If you’re looking for a simple way to show multiple images, with multiple captions, this open source jQuery Slider just may be for you. It’s a basic rotator with a fade in / out effect which can be used for many instances. HardWirdMedia worked hard custom developing this plugin so that it can be shared with the world.
The sliders usage is simple, html markup should be something like below…(note both caption and image are required, inner span class is not but is useful to show color variation of the caption)
Next call the slider function within a jQuery doc ready statement (supports multiple instances):
Options are as follows:
timelength = milliseconds between slides
showbuttons = Y or N : If N the mini buttons, next and previous buttons are all removed
minibuttons = Y or N : If N the mini buttons get removed, but the next and previous buttons remain unless specified by showbuttons. The positioning for mini buttons is determined by CSS.
minibuttonopacity = 0 – 1 : the highlighted slide’s mini button opacity. 1 is 100% opacity, 0 is 0% opacity
centerbuttons = Y or N : vertically center the next and previous buttons or don’t.
alignrightnextbutton = Y or N : Y right aligns the Next Button to the right side of the slider. N sets the next button 5 px away from the previous button.
btnoffset = Number in pixels. Offest of buttons from the left edge and from the right edge.
effects = The effect to be used. Possible values: ‘blind’, ‘clip’, ‘drop’, ‘explode’, ‘fold’, ‘puff’, ‘slide’, ‘scale’, ‘size’, ‘pulsate’. Must Have jQuery UI included.
captioneffects = type of effect to apply the caption divs. Possible values: ‘blind’, ‘clip’, ‘drop’, ‘explode’, ‘fold’, ‘puff’, ‘slide’, ‘scale’, ‘size’, ‘pulsate’. Must Have jQuery UI included.
captionclass = The class to apply the caption effects to. The code requires a caption div to be present (for now). If you don’t specify a caption class it will default to ‘.Caption’.
usenumbers = Y or N : whether or not the mini buttons use a number, or displays a graphic.
minibtnimagesrc = The url location of an image to use for the css background image. Note that your css has to set the div size to match your image size. (.MiniBtn);
usecaptions = Y or N: whether or not to use captions in your html code. If N, you don’t have to include a caption div, just img’s.
Css can be adjusted as needed within ctgslider.css. This includes slider size, placement of the mini buttons, Previous and Next Button Graphics, etc.
I’ve tested it in multiple browsers and it currently works fine on:
Using with WordPress
If you are using this slider with WordPress, the jQuery UI script will have to be included in this manner:
Besides the slider code, there is also a file which can be included for WordPress called “wp-slider.php.” This file is a wordpress query which grabs posts from a category named “slider” (must be set). The title becomes the caption class (if needed, otherwise leave blank). You will also need to reset your loop on your wordpress main page so that it doesn’t show the slider class on your main blog page. You can use the code below before your while loop to do so. the “cat=-#” is where you would insert your slider category id to exclude it from your home page loop.
If you have questions, or feature requests, please let us know.