NextGen NivoSlider

NextGen NivoSlider allows you to create a NivoSlider as a widget or with a shortcode. This plugin uses the ‘NextGen Gallery’ plugin to obtain the images using tags or gallery IDs.

NivoSlider is a great responsive image slideshow that is highly customizable. With a large array of effects and many additional options you are sure to find a combination that will suit your website.

Requirements:

• NextGen Gallery Plugin

Features:

NextGen NivoSlider has been completely overhauled and is continually being added to. It currently supports all the of NivoSlider’s original functions and even has some extra’s!

• Responsive!
• Fully integrated with NextGen gallery
• Theme support
• Automatic URL linking (put a mailto:, http://, ftp:// or local / into your alt text)
• Extra effect(s)
• Shortcode and Widget support
• Touchscreen support (experimental)

Parameters:

You can use the following parameters in the [ngg-nivoslider] shortcode. Defaults, where applicable, are shown between parentheses (), available options between brackets [].

• title: Title for slider. Leave blank for no title. (ex: title=»My Slider»)
• gallery: Leave blank to use all galleries or choose a gallery to use. (ex: gallery=»galleryid»)
• order [random»|»asc»|»desc»|»sortorder»]: 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. (ex: order=»random»)
• tags: comma separated list of tags to filter results by. (ex: tags=»tag1, tag2″)
• shuffle [boolean]: If order is random and this is true will shuffle images with javascript. Useful if your are caching your pages. (ex: shuffle=»true»)
• max_pictures: The maximum amount of pictures to load. (ex: max_pictures=»6″)
• html_id («slider»): HTML id to use. Defaults to ‘slider’. Needs to be different for multiple sliders on same page. (ex: html_id=»custom-slider»)
• width: Width to use on slider. (ex: width=»200″)
• height: Height to use on slider. (ex: height=»150″)
• center: Centers content in container. Requires width to be set. (ex: center=»1″)
• resize: Resizes the images using TimThumb(v2). Available options are: (ex: resize=»3″) 1 — Resize to Fit specified dimensions (no cropping) 2 — Crop and resize to best fit the dimensions (default) 3 — Resize proportionally to fit entire image into specified dimensions, and add borders if required 4 — Resize proportionally adjusting size of scaled image so there are no borders gaps
• resizewidth: The width TimThumb will use to resize the image (sc: resizewidth=»800″)
• resizeheight: The height TimThumb will use to resize the image (sc: resizeheight=»600″)
• resizebg («ffffff»): The color (denoted in hex) to use for the borders that are generated when using resizing option 3 (ex: resizebg=»a0fb69″)
• caption [«alttext»|»description»|»both»]: Show a caption with the slide, showing either the alttext or description as set up in NextGen gallery or both as «Bolded AltText — Description»
• htmlcaption: HTML formatted caption to show on all images (ex: htmlcaption=»Title Welcome to this website«)
• showgallerytitle [boolean]: Display the gallery title (ex: showgallerytitle=»true»)
• showgallerydesc [boolean]: Display the gallery description (ex: showgallerydesc=»true»)

Nivo slider settings:

Please check the NivoSlider website for more details.

• effect: What effect to use as transition. You can specify sets like: ‘fold,fade,sliceDown’. See list below for available effects.(ex: effect=»sliceDown,sliceUp»)
• slices: The amount of slices to divide the image to for the slice effects(ex: slices=»3″)
• boxCols: Amount of columns to split the image into for the box effects (ex: boxcols=»10″)
• boxRows: Amount of row to split the image into for the box effects (ex: boxrows=»8″)
• animSpeed: Slide transition speed in milliseconds (1000ms = 1 second). (ex: animspeed=»300″)
• pauseTime: Time to pause in milliseconds (1000ms = 1 second) before continueing to the next image (ex: pausetime=»5000″)
• startSlide: Set starting Slide. It’s 0-index so use 0 for the first slide. (ex: startslide=»3″)
• directionNav [«true»|»false»]: Whether to display the Next & Prev controls or not. (ex: directionnav=»true»)
• controlNav [«true»|»false»]: 1,2,3… (ex: controlnav=»setting»)
• controlNavThumbs [«true»|»false»]: Use thumbnails for Control Nav if set to true. (ex: controlnavthumbs=»true»)
• thumbsWidth: Resize thumbnail to this width. Recommended to set if using thumbnails. (ex: thumbswidth=»20″)
• thumbsHeight: Resize thumbnail to this height. Recommended to set if using thumbnails. (ex: thumbsheight=»20″)
• thumbsContainerHeight: Height for thumbnails container. Calculation should be ‘number of thumbnail image rows’ x ‘thumbsheight’. (ex: thumbscontainerheight=»20″)
• thumbsGap: Gap between thumbnails. (ex: thumbsgap=»5″)
• controlNavThumbsFromRel: Use image rel for thumbs. (ex: controlnavthumbsfromrel=»setting»)
• controlNavThumbsSearch: Replace this with… (ex: controlnavthumbssearch=»setting»)
• controlNavThumbsReplace: …this in thumb Image src. (ex: controlnavthumbsreplace=»setting»)
• keyboardNav: Use left & right arrows. (ex: keyboardnav=»setting»)
• pauseOnHover: Stop animation while hovering. (ex: pauseonhover=»setting»)
• manualAdvance: Force manual transitions. (ex: manualadvance=»setting»)
• prexText: Text to display for previous (ex: prevtext=»prev»)
• nextText: Text to display for next (ex: prevtext=»next»)
• randomStart [«true»|»false»]: Start with a random slide (ex: randomstart=»true»)
• captionOpacity: Universal caption opacity. (ex: captionopacity=»setting»)
• disableCaptions: (ex: disablecaptions=»1″)
• beforeChange: (ex: beforechange=»setting»)
• afterChange: (ex: afterchange=»setting»)
• slideshowEnd: Triggers after all slides have been shown. (ex: slideshowend=»setting»)
• lastSlide: Triggers when last slide is shown. (ex: lastslide=»setting»)
• afterLoad: Triggers when slider has loaded. (ex: afterload=»setting»)

Nivo Effects:

• random
• sliceDown
• sliceDownLeft
• sliceUp
• sliceUpLeft
• sliceUpDown
• sliceUpDownLeft
• fold
• foldReverse
• fade
• slideInRight
• slideInLeft
• boxRandom
• boxRain
• boxRainReverse
• boxRainGrow
• boxRainGrowReverse

Shortcode examples:

• [ngg-nivoslider html_id=»about-slider»]
• [ngg-nivoslider title=»Hello» gallery=»1″ html_id=»about-slider» width=»200″ height=»150″ center=»1″]
• [ngg-nivoslider html_id=»about-slider» directionnav=»false» controlnav=»false»]
• [ngg-nivoslider tags=slideshow order=»random» effect=»fade» shuffle=»true» max_pictures=»12″ html_id=»slider» resizebg=»fdfdfd» resizewidth=»900″ resizeheight=»620″ resize=»3″ center=»1″ directionNav=»false» controlNav=»false» pauseTime=»10000″ animSpeed=»1000″ pauseOnHover=»false»]

To do

Feel free to suggest new features or things you’d like to see in this plugin!

• Create some extra themes.
• Scrollable thumbnails?