JJ NextGen JQuery Slider

Allows you to pick a gallery from the 'NextGen Gallery' plugin to use as a 'JQuery Nivo slider'.

Author:JJ Coder (profile at wordpress.org)
WordPress version required:2.8
WordPress version tested:3.2.1
Plugin version:1.3.9
Added to WordPress repository:24-01-2011
Last updated:14-07-2011
Warning! This plugin has not been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.
Rating, %:86
Rated by:4
Plugin URI:
Total downloads:127 665
Active installs:1 000+
plugin download
Click to start download

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 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
  • random
  • 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:

Screenshots
FAQ
ChangeLog