Image Slider

With just a few lines of shortcodes (don’t worry, it’s all done with the help of the visual editor!), you can have the slider below working in no time. It features a thumbnail slider (optional), lightbox integration and a description!

Basic Usage:

The slider is basically composed of two parts. A wrapping shortcode called “image_slider” where you define your width, height, selector and autoslide time, and multiple children “slide_item” shortcodes, in which you define your slides individually. These are the attributes each shortcode gets:

“image_slider”

width: Width of your slide. Images bigger than this will be cut out (you can use timthumb as well)
Default: 900
height: Height of your slide. Images bigger than this will be cut out (you can use timthumb as well)
Default: 300
selector: Whether or not to show the thumbnails selector.
Options: true, false — Default: true
autoslide: Time in miliseconds for how long to wait in each slide. Don’t use to disable it.
Default: none

“slide_item”

title: Title of your slide. Displays at the bottom left.
description: Description of your slide. Displays smaller than text at the bottom left.
type: Whether to display as lightbox or link upon click.
Options: lightbox, link — Default: lightbox
link: the URL where your slide will lead to upon clicking.
width & height: Set width and height to crop the image with timthumb.

[sourcecode language="plain"][image_slider width="660" height="260" selector="true" autoslide=""]

[slide_item title="..." description="..." type="lightbox" link="..." width="..." height="..."]
full size image URL here ie. http://cl.ly/DvGN/full-slide2.jpg
[/slide_item]

… Insert as many more slide_item as you want …

[/image_slider][/sourcecode]