Athena - Responsive Flat WordPress Theme for Personal Blogs and Shops

Slider Gallery Shortcode for WordPress

A couple of weeks ago I started building a plugin to be sold on the CodeCanyon network. The idea for this plugin was that it should be a shortcode to display a slider gallery with a minimal effort. Plugin is finished now and you can buy it from CodeCanyon. In this post we’ll go through a short review about the plugin.

Overview

The gallery is created just by adding the shortcode [slider]. The slider, which is built on top of jQuery, is created with the images loaded in the post. There are some parameters that you can set when typing the shortcode but we’ll be back later on this. The plugin creates the jQuery slider you can see above. Check also the  live demo. The buttons and labels are created only with CSS so you don’t need any images.

Plugin settings and shortcode parameters

There’s a settings page for the plugin where you can set some default options for the plugin but of course you can override them any time you add the shortcode. Each parameter that you can pass to the shortcode has a corresponding default option on this page.

Parameter: size

You can choose the size of the outputted image in the slider, between  ’thumbnail‘, ‘medium‘ and ‘full‘ (which are also the accepted values for the shortcode parameter), which will use the  size provided by your WordPress installation (you can configure these sizes in Settings\Media in the WP admin).

Parameter: link

There’s a checkbox to wrap the image with a link to the source file, in case you want to use a thumbnail size in the slider and link it to the full size using Thickbox, Colorbox or something similar. In the shortcode parameter, the accepted value is link.

Parameter: controls

The controls are optional as well, you can either display or hide them by checking the checkbox. In the shortcode parameter, the accepted values are false and true.

Parameter: title

The image title is also optional is the plugin will use the title you assigned to it while uploading it with the Add Image uploader. In the shortcode parameter, the accepted values are false and true.

Parameter: transition

You can select the default transition with the last option in the settings page. The possible values for this setting are all those from jQuery Cycle, the plugin used to create the slider
fade, scrollHorz, scrollVert, scrollUp, scrollDown, scrollLeft, scrollRight, slideX, slideY, shuffle, turnUp, turnDown, turnLeft, turnRight, zoom, fadeZoom, blindX, blindY, blindZ, growX, growY, curtainX, curtainY, cover, uncover, toss, wipe.

Parameter: speed

Define the speed of the animated transition. Enter a value in miliseconds. Higher values will result in faster animations. Default is 800.

Parameter: timeout

Define the length of the pause between transitions (how long one image is displayed before the next one enters). Enter a value in miliseconds. The higher the value, the longer the pause. Default is 2000.

Parameter: delay

Define the pause before the first transition (how long the first image is displayed before the second image enters). This is a one time parameter. Higher values will cause longer delays. You can enter a negative value. Default is -8000.

Parameter: exclude

There’s an additional parameter available when you add the shortcode to exclude images that you don’t want to be added to the slider. To do this, you need the ID number of the image. Check the image at the left to know how to find the image ID number. While you’re uploading the image, click the Post URL button and copy the number at the end. In the image at the left, the ID would be 2653. You can then type

[slider exclude="2653"]

where 2653 would be the ID number of an image loaded in the post and excluded from the slider.

Using the shortcode

As mentioned before, in its most basic form, all you need to do is to type:

[slider]

into the text editor to create a slider with the images attached to the post. If you want to add parameters you can type something like the following image shows. The slider generated by this shortcode would use a medium size for the pictures, it would add a link to each one, the transition used would be toss and it would display a label with the title for each image.

One of the first questions asked by one of the buyers was if it would work in a page listing several blog posts containing each one a different slider gallery. The answer is absolutely yes! It will work and you can even set different options for each slider using the shortcode.

Again, the plugin makes use of the excellent Cycle plugin for jQuery (dual licensed under MIT and GPL licenses) so it has a solid foundation for the slider. Even more, if you’re a developer you can create your own flavor of Cycle including only the transition you want to use and replace the one bundled in the plugin.

The plugin is available for purchase on CodeCanyon, one of the Envato marketplaces.

Hope you find it interesting and will be waiting for your feedback.


“Slider Gallery Shortcode for WordPress” received 35 comments! Add yours.

  1. Karen October 12th, 2010

    Great plugin!

  2. Ride the wave November 18th, 2010

    [...] Documentation for the plugin is available at ilovecolors. [...]

  3. Alan November 19th, 2010

    Very good, just what I needed, most slider plugins are pretty bloated or are incompatible with IE versions. This one works with IE6 (tested with IE texter).

  4. Janovsek December 14th, 2010

    Such a good post. He should receive credit for it. Thanks

  5. Buitrago December 27th, 2010

    Great share. Keep posting

  6. Bowsher January 9th, 2011

    Great blog!
    Keep it up

  7. Kotz January 14th, 2011

    Nice thought!
    Keep posting

  8. Montee January 16th, 2011

    Nice post!
    Thanks

  9. Philpot January 16th, 2011

    Good blog!
    Thanks

  10. Jose February 2nd, 2011

    I do not get to run this plugin. Does it work on WordPress3?
    I only get a empty slider:

  11. Jose February 2nd, 2011

    Sorry! I was trying to copy the script, but doesn’t appear

  12. Elio February 2nd, 2011

    Yes, it works fine even with WordPress 3.1 RC 3. Have you uploaded images to the post?

  13. Jose February 2nd, 2011

    Yes! you can see it working on http://www.tmcreative.es/smart/

    It should appear on top of the 3 columns

  14. Elio February 2nd, 2011

    the markup doesn’t looks like the one that is generated with ilc-slider, I’m guessing you’ve integrated it somehow with your theme? are you using do_shortcode? the slider has to be used within a loop or at least within a foreach for posts with a call to setup_postdata first.

  15. Jose February 2nd, 2011

    I think you’re right, my theme has integrated shortcodes, but I never imagined that this could cause a conflict. Many thanks. I’m going to check my shortcode file now

  16. Jose February 2nd, 2011

    Thanks a lot, Elio. The slide works perfect! ;-)

  17. Elio February 2nd, 2011

    It looks great! Congrats!

  18. Drew February 21st, 2011

    Hi there!

    I purchased this code but I am having one small issue. I am unsure of how to format a slider on a page to the right, with text appearing to the left of it.

    As you can see from my page @

    http://www.artemisled.com/solutions/downlights/4-inch-dimmable-led-downlight-g-013-l-4

    the text is coming in at the bottom, under the slider. Let me know if you can help me out! I would appreciate it :)

    Best Regards,
    Drew

  19. Elio February 22nd, 2011

    To clarify, this has nothing to do with the slider: you just need to adjust the CSS of your site. For instance, in the div where you typed:
    <div align="right">
    remove that attribute and add a css rule with:
    float: right;
    I’m unsure if it will work on every browser I’ve just tested it quickly on your site using Chrome’s inspector but it could work.

  20. Drew February 22nd, 2011

    Awesome ok thanks Elio I will try it out! Appreciate it :)

    I just noticed that once I added the slider it behaved a bit differently than a static image did and well, I got scared.

    Again, thanks :)

  21. Drew February 22nd, 2011

    One more thing, it appears that my images are displaying in a reverse order.

    Starts with the last and ends with the first according to the code. Nothing in the settings to indicate why this would be.

    Thanks for the tips. ;)

    Drew

  22. Elio February 23rd, 2011

    You can adjust the order in the WordPress image uploader manager for the post. Just drag and drop to order them and the plugin will respect the order.

  23. Drew March 2nd, 2011

    Coo; thanks. :)

  24. Sammet March 30th, 2011

    Hi
    I justs bought your plugin Slider Gallery Shortcode but the controls are behind the images. I am using the Headway theme and put the code in a socalle PHP/HTML Leaf. I have tried doing the sme in a post with the same results. Please, any help would be great!
    Thansk
    Sammet

  25. Elio March 30th, 2011

    Hi Sammet, this looks like a particular CSS issue in your theme. Controls are properly positioned in demo and other sites from customers. Maybe I can help you with it, is the site online somewhere?

  26. Sammet March 30th, 2011

    Hi!
    Thanks Elio for such a quick answer!
    I have my site hidden during the development process.

    Do you think this is happening because I have other sliders such as SlideDeck installed? Or is it because the pictures are in different sizes?

    If you think it is the CSS maybe I can send you my themes CSS? Would that help? I really , really like the simplicity of your plugin and I hope we will get it to work!

    Thanks for help!

    Sammet

  27. Sammet March 30th, 2011

    Sammet here again,

    I just want to ask you if you know if your slider gallery shortcode conflict with certain plugin. As I wrote before I have sliddeck installed and NextGen Gallery. Can this be the problem?

    I have spent more hours looking for an alternative, but I fall back on your slider gallery short code over and over again. It is exactly what I want, -if I just could make it to work!

    Do you have a chatroom or something similar where we can talk directly? That would be so great!

    Thanks for help!

  28. Elio March 30th, 2011

    Hi Sammet, it should not conflict with it. That said, I can’t guarantee that it will work with every other plugin in the world. The plugin has been throughly tested in many live sites and special care has been put in making it compatible with all browsers. For instance, SlideDeck, doesn’t supports IE6, which ILC Slider does supports.
    Anyway, is it mandatory for you to use SlideDeck? you can do pretty much anything with jQuery Cycle, the jQuery slide plugin that is used for ILC Slider.

  29. Al Hilal April 4th, 2011

    is there ‘large’ option in size parameter?

  30. Elio April 4th, 2011

    Yes, using the parameter is “full”, the slider will display the largest size available in your WordPress installation.

  31. cdr May 12th, 2011

    [slider]

    The Print Title Goes Here
    Digital Print / 18 x 24 Inches
    Purchase / $20 + Shipping / Ships Within 1 Week

  32. Dave March 5th, 2012

    For anyone wanting to exclude the featured image from the slider here’s the code:

  33. Dave March 5th, 2012

    oh sorry it won’t let me insert code..

  34. Stefan Debattista March 6th, 2012

    Hi, why isn’t this working please? I purchased the code yesterday (or the day before). Thanks.

    [slider size="full" exclude="355" exclude="354" exclude="353" exclude="352" exclude="351" exclude="349" exclude="350"]

  35. Elio March 6th, 2012

    Stefan, as explained in the documentation, the exclude attribute must receive the IDs to exclude separated by commas.
    [slider size="full" exclude="355,354,353,352,351,349,350"]
    Please leave any support questions in the Discussions tab for this item on CodeCanyon.