19-Aug-2012

JJ NextGen Cycle plugin

The 'JJ NextGen JQuery Cycle' allows you to create a 'Cycle Lite' (http://jquery.malsup.com/cycle/lite/) 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.
  • If a width and height are defined under the configuration all images will be resized to those dimensions (Highly recommended).
  • 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 image alt text. If alt text is present but not a valid url alt text will be used instead for image alt text.

You can specify the following parameters:

NOTE: sc means shortcode:

  • Title: Title. Leave blank for no title. (sc: title="My Cycle Lite")
  • 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")
  • 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 'cycle_lite'. Needs to be different for multiple instances on same page. (sc: html_id="cycle_lite")
  • Image width: Width of image. Defaults to 200. Recommended to set this. (sc: width="200")
  • Image height: Height of image. Defaults to 200. Recommended to set this. Will prevent a floating problem if set. (sc: height="150")
  • Center: Centers content in container. Requires width to be set. (sc: center="1")

Cycle Lite settings:

Please check the cycle lite home page form more information (http://jquery.malsup.com/cycle/lite/).

  • timeout: Milliseconds between slide transitions (0 to disable auto advance).. (sc: timeout="4000")
  • speed: Speed of the transition (any valid fx speed value). (sc: speed="1000")
  • sync: True if in/out transitions should occur simultaneously. (sc: sync="1")
  • fit: Force slides to fit container. (sc: fit="0")
  • pause: True to enable "pause on hover". (sc: pause="1")
  • delay: Additional delay (in ms) for first transition (hint: can be negative). (sc: delay="2)

Shortcode Examples:

  • [jj-ngg-jquery-cycle html_id="about-cycle-lite" gallery="1" width="200" height="150"]
  • [jj-ngg-jquery-cycle title="Hello" html_id="about-cycle-lite" gallery="1" timeout="3000" speed="1000"]
  • [jj-ngg-jquery-cycle html_id="about-cycle" gallery="2" width="150" height="100" timeout="3000" speed="1000" fit="1"]

Leave a Reply

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram