+7 987 254 97 98

Image Slider

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!

  • My description on this imagehttp://themes.ddwebstudios.net/wordpress/ultrasharp/wp-content/uploads/2012/02/full-slide.jpghttp://themes.ddwebstudios.net/wordpress/ultrasharp/wp-content/uploads/2012/02/full-slide.jpg
  • Another description on this imagehttp://cl.ly/DvGN/full-slide2.jpghttp://themes.ddwebstudios.net/wordpress/ultrasharp/wp-content/uploads/2012/02/full-slide.jpg
  • Write here anything that you might wanna say about the picture. Or not.http://cl.ly/Duwc/Image%202012.02.05%204:52:11%20PM.pnghttp://themes.ddwebstudios.net/wordpress/ultrasharp/wp-content/uploads/2012/02/full-slide.jpg
  • http://cl.ly/DvC7/Image%202012.02.05%204:54:00%20PM.pnghttp://themes.ddwebstudios.net/wordpress/ultrasharp/wp-content/uploads/2012/02/full-slide.jpg
  • My description on this imagehttp://themes.ddwebstudios.net/wordpress/ultrasharp/wp-content/uploads/2012/02/full-slide.jpghttp://themes.ddwebstudios.net/wordpress/ultrasharp/wp-content/uploads/2012/02/full-slide.jpg
  • Another description on this imagehttp://cl.ly/DvGN/full-slide2.jpghttp://themes.ddwebstudios.net/wordpress/ultrasharp/wp-content/uploads/2012/02/full-slide.jpg
  • Write here anything that you might wanna say about the picture. Or not.http://cl.ly/Duwc/Image%202012.02.05%204:52:11%20PM.pnghttp://themes.ddwebstudios.net/wordpress/ultrasharp/wp-content/uploads/2012/02/full-slide.jpg
  • http://cl.ly/DvC7/Image%202012.02.05%204:54:00%20PM.pnghttp://themes.ddwebstudios.net/wordpress/ultrasharp/wp-content/uploads/2012/02/full-slide.jpg
  • My description on this imagehttp://themes.ddwebstudios.net/wordpress/ultrasharp/wp-content/uploads/2012/02/full-slide.jpghttp://themes.ddwebstudios.net/wordpress/ultrasharp/wp-content/uploads/2012/02/full-slide.jpg
  • Another description on this imagehttp://cl.ly/DvGN/full-slide2.jpghttp://themes.ddwebstudios.net/wordpress/ultrasharp/wp-content/uploads/2012/02/full-slide.jpg
  • Write here anything that you might wanna say about the picture. Or not.http://cl.ly/Duwc/Image%202012.02.05%204:52:11%20PM.pnghttp://themes.ddwebstudios.net/wordpress/ultrasharp/wp-content/uploads/2012/02/full-slide.jpg
  • http://cl.ly/DvC7/Image%202012.02.05%204:54:00%20PM.pnghttp://themes.ddwebstudios.net/wordpress/ultrasharp/wp-content/uploads/2012/02/full-slide.jpg
Get The Code
[sourcecode language=»plain»][image_slider width="660" height="260" selector="true" autoslide="7000"]

[slide_item title="Slide Title" description="Slide Description" type="lightbox" link="..." width="660" height="260"]http://cl.ly/DvC7/Image%202012.02.05%204:54:00%20PM.png[/slide_item]

[slide_item title="Slide Title" description="Slide Description" type="lightbox" link="..." width="660" height="260"]http://cl.ly/DvC7/Image%202012.02.05%204:54:00%20PM.png[/slide_item]

… INSERT AS MANY MORE AS YOU WANT …

[/image_slider][/sourcecode]

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]

No Thumbnails (selector=»false»)