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.
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.
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.
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).
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.
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.
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.
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.
Define the speed of the animated transition. Enter a value in miliseconds. Higher values will result in faster animations. Default is 800.
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.
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.
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
where 2653 would be the ID number of an image loaded in the post and excluded from the 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.