JJ NextGen JQuery Slider

The ‘JJ NextGen JQuery Slider’ allows you to create a ‘Nivo slider’ (http://nivo.dev7studios.com/) as a widget or as a shortcode. This plugin uses the ‘NextGen Gallery’ plugin for its images.

Requirements:

• NextGen Gallery Plugin (https://wordpress.org/extend/plugins/nextgen-gallery/)

NextGen Gallery Integration:

• This plugin uses the original width and height of the image uploaded so make sure the images are the correct dimensions when uploaded.
• Alt & Title Text Field: Provide a full url here and the image will link to this. Only works if alt field starts with either of these; /, http, or ftp.
• Description Field: Will be used as a caption.

You can specify the following parameters:

NOTE: sc means shortcode:

• Title: Title for slider. Leave blank for no title. (sc: title= »My Slider »)
• Gallery: Leave blank to use all galleries or choose a gallery to use. (sc: gallery= »galleryid »)
• Order: Order to display results in. You can choose; Random, Latest First, Oldest First, or NextGen Sortorder. Random will still work when a page is cached. (sc: order= »random »| »asc »| »desc »| »sortorder »)
• Tags: comma separated list of tags to filter results by. (sc: tags= »tag1, tag2″)
• Shuffle: If order is random and this is true will shuffle images with javascript. Useful if your are caching your pages. (sc: shuffle= »true »| »false »)
• Max pictures: The maximum amount of pictures to use. (sc: max_pictures= »6″)
• HTML id: HTML id to use. Defaults to ‘slider’. Needs to be different for multiple sliders on same page. (sc: html_id= »slider »)
• Width: Width to use on slider. (sc: width= »200″)
• Height: Height to use on slider. (sc: height= »150″)
• Center: Centers content in container. Requires width to be set. (sc: center= »1″)

Nivo slider settings:

Please check the Nivo slider home page for more details (http://nivo.dev7studios.com/#usage).

• effect: Specify sets like: ‘fold,fade,sliceDown’. (sc: effect= »setting »)
• slices: (sc: slices= »setting »)
• boxCols: (sc: boxcols= »setting »)
• boxRows: (sc: boxrows= »setting »)
• animSpeed: Slide transition speed. (sc: animspeed= »setting »)
• pauseTime: (sc: pausetime= »setting »)
• startSlide: Set starting Slide (0 index). (sc: startslide= »setting »)
• directionNav: Next & Prev. (sc: directionnav= »setting »)
• directionNavHide: Only show on hover. (sc: directionnavhide= »setting »)
• controlNav: 1,2,3… (sc: controlnav= »setting »)
• controlNavThumbs: Use thumbnails for Control Nav. You can choose ‘nextgen thumbs » that will automatically use the image’s thumbnail from nextgen gallery or ‘nextgen original’ that will use the current image. (sc: controlnavthumbs= »true »| »false »| »nextgen_thumbs »| »nextgen_original »)
• thumbsWidth: Resize thumbnail to this width. Recommended to set if using thumbnails. (sc: thumbswidth= »20″)
• thumbsHeight: Resize thumbnail to this height. Recommended to set if using thumbnails. (sc: thumbsheight= »20″)
• thumbsContainerHeight: Height for thumbnails container. Calculation should be ‘number of thumbnail image rows’ x ‘thumbsheight’. (sc: thumbscontainerheight= »20″)
• thumbsGap: Gap between thumbnails. (sc: thumbsgap= »5″)
• controlNavThumbsFromRel: Use image rel for thumbs. (sc: controlnavthumbsfromrel= »setting »)
• controlNavThumbsSearch: Replace this with… (sc: controlnavthumbssearch= »setting »)
• controlNavThumbsReplace: …this in thumb Image src. (sc: controlnavthumbsreplace= »setting »)
• keyboardNav: Use left & right arrows. (sc: keyboardnav= »setting »)
• pauseOnHover: Stop animation while hovering. (sc: pauseonhover= »setting »)
• manualAdvanc: Force manual transitions. (sc: manualadvance= »setting »)
• captionOpacity: Universal caption opacity. (sc: captionopacity= »setting »)
• Disable captions: (sc: disablecaptions= »1″)
• beforeChange: (sc: beforechange= »setting »)
• afterChange: (sc: afterchange= »setting »)
• slideshowEnd: Triggers after all slides have been shown. (sc: slideshowend= »setting »)
• lastSlide: Triggers when last slide is shown. (sc: lastslide= »setting »)
• afterLoad: Triggers when slider has loaded. (sc: afterload= »setting »)

Nivo Effects:

• sliceDown
• sliceDownLeft
• sliceUp
• sliceUpLeft
• sliceUpDown
• sliceUpDownLeft
• fold
• fade
• aléatoire
• slideInRight
• slideInLeft
• boxRandom
• boxRain
• boxRainReverse
• boxRainGrow
• boxRainGrowReverse

Shortcodes:

• [jj-ngg-jquery-slider html_id= »about-slider »]
• [jj-ngg-jquery-slider title= »Hello » gallery= »1″ html_id= »about-slider » width= »200″ height= »150″ center= »1″]
• [jj-ngg-jquery-slider html_id= »about-slider » directionnav= »false » controlnav= »false »]

Try out my other plugins:

• JJ NextGen JQuery Carousel (https://wordpress.org/extend/plugins/jj-nextgen-jquery-carousel/)
• JJ NextGen JQuery Cycle (https://wordpress.org/extend/plugins/jj-nextgen-jquery-cycle/)
• JJ NextGen Unload (https://wordpress.org/extend/plugins/jj-nextgen-unload/)
• JJ NextGen Image List (https://wordpress.org/extend/plugins/jj-nextgen-image-list/)
• JJ SwfObject (https://wordpress.org/extend/plugins/jj-swfobject/)

Contributors