[header style=”” type=”h3″ id=”image-hovers”]Image Slider[/header]

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!

[divider_top text=””] [header style=”” type=”h3″ id=”image-hovers”]Basic Usage:[/header] [padding size=”5″]

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.
[clear] [padding size=”10″] [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] [divider_top text=””] [header style=”divider” type=”h4″ id=”image-hovers”]No Thumbnails (selector=”false”)[/header] [image_slider width=”660″ height=”260″ selector=”false”]

[slide_item title=”the tree of life” description=”My description on this image” type=”lightbox” link=”http://themes.ddwebstudios.net/wordpress/ultrasharp/wp-content/uploads/2012/02/full-slide.jpg”] http://themes.ddwebstudios.net/wordpress/ultrasharp/wp-content/uploads/2012/02/full-slide.jpg
[/slide_item]

[slide_item title=”sky is the limit” description=”Another description on this image” type=”lightbox” link=”http://themes.ddwebstudios.net/wordpress/ultrasharp/wp-content/uploads/2012/02/full-slide.jpg”] http://cl.ly/DvGN/full-slide2.jpg
[/slide_item]

[slide_item title=”crossing a beautiful bridge” description=”Write here anything that you might wanna say about the picture. Or not.” type=”lightbox” link=”http://themes.ddwebstudios.net/wordpress/ultrasharp/wp-content/uploads/2012/02/full-slide.jpg”] http://cl.ly/Duwc/Image%202012.02.05%204:52:11%20PM.png
[/slide_item]

[slide_item title=”back to being a kid (no desc)” type=”lightbox” link=”http://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.png
[/slide_item]

[slide_item title=”the tree of life” description=”My description on this image” type=”lightbox” link=”http://themes.ddwebstudios.net/wordpress/ultrasharp/wp-content/uploads/2012/02/full-slide.jpg”] http://themes.ddwebstudios.net/wordpress/ultrasharp/wp-content/uploads/2012/02/full-slide.jpg
[/slide_item]

[slide_item title=”sky is the limit” description=”Another description on this image” type=”lightbox” link=”http://themes.ddwebstudios.net/wordpress/ultrasharp/wp-content/uploads/2012/02/full-slide.jpg”] http://cl.ly/DvGN/full-slide2.jpg
[/slide_item]

[slide_item title=”crossing a beautiful bridge” description=”Write here anything that you might wanna say about the picture. Or not.” type=”lightbox” link=”http://themes.ddwebstudios.net/wordpress/ultrasharp/wp-content/uploads/2012/02/full-slide.jpg”] http://cl.ly/Duwc/Image%202012.02.05%204:52:11%20PM.png
[/slide_item]

[slide_item title=”back to being a kid (no desc)” type=”lightbox” link=”http://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.png
[/slide_item]

[slide_item title=”the tree of life” description=”My description on this image” type=”lightbox” link=”http://themes.ddwebstudios.net/wordpress/ultrasharp/wp-content/uploads/2012/02/full-slide.jpg”] http://themes.ddwebstudios.net/wordpress/ultrasharp/wp-content/uploads/2012/02/full-slide.jpg
[/slide_item]

[slide_item title=”sky is the limit” description=”Another description on this image” type=”lightbox” link=”http://themes.ddwebstudios.net/wordpress/ultrasharp/wp-content/uploads/2012/02/full-slide.jpg”] http://cl.ly/DvGN/full-slide2.jpg
[/slide_item]

[slide_item title=”crossing a beautiful bridge” description=”Write here anything that you might wanna say about the picture. Or not.” type=”lightbox” link=”http://themes.ddwebstudios.net/wordpress/ultrasharp/wp-content/uploads/2012/02/full-slide.jpg”] http://cl.ly/Duwc/Image%202012.02.05%204:52:11%20PM.png
[/slide_item]

[slide_item title=”back to being a kid (no desc)” type=”lightbox” link=”http://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.png
[/slide_item] [/image_slider]

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.