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. 

Now updated to 1.1!

http://hardwiredmedia.com/ctgslider-1.1.zip

Demo:

http://hardwiredmedia.com/ctgslider-1.1/index.html

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)

 Javascript | 
 copy code |
?
 
01
02
<div id="ctgslider"> 
03
<img src="images/Slider-1.jpg">
04
<div class='Caption'>Caption 1</div>
05
<img src="images/Slider-2.jpg">
06
<div class='Caption'>Caption 2</div>
07
<img src="images/Slider-3.jpg">
08
<div class='Caption'>Caption 3</div>
09
<img src="images/Slider-4.jpg">
10
<!-- can include span classes within caption to change text color individually-->
11
<div class='Caption'><span class="Caption2">Caption 4</span></div>
12
</div>
13

Then your javascript linking, within the head tag looks like:

 Javascript | 
 copy code |
?
 
01
02
<!-- hotlink jQuery -->
03
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
04
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
05
 
06
<!-- attach stylesheet -->
07
<link rel="stylesheet" type="text/css" href="yoururl/ctgstyle.css" media="screen" />
08
 
09
<!-- attach javascript -->
10
<script type="text/javascript" src="yoururl/ctgslider.js"></script>
11

Next call the slider function within a jQuery doc ready statement (supports multiple instances):

 Javascript | 
 copy code |
?
 
01
02
<script type="text/javascript">
03
 
04
$().ready(function() {
05
 $('#ctgslider').ctgslider({
06
 'timelength':4000, 
07
  'showbuttons': 'Y',
08
  'minibuttons':'Y', 
09
  'minibuttonopacity': .65, 
10
  'centerbuttons': 'Y', 
11
  'alignrightnextbutton' : 'Y',
12
 'btnoffset':5 ,
13
 'effects':'fast',
14
 'captioneffects':'explode',
15
 'captionclass':'.Caption', 
16
 'usenumbers':'Y',
17
 'minibtnimagesrc':'images/star.png',
18
 'usecaptions':'Y'
19
 }); 
20
 
21
$('#ctgslider2').ctgslider({
22
'timelength':6000,
23
'showbuttons': 'Y',
24
'minibuttons':'Y',
25
'minibuttonopacity': .2,
26
'centerbuttons': 'N',
27
'alignrightnextbutton' : 'N',
28
'effects': 'fold',
29
 'captioneffects':'explode'
30
});
31
});
32
</script>
33
 
34

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.

Using with WordPress

If you are using this slider with WordPress, the jQuery UI script will have to be included in this manner:

 Javascript | 
 copy code |
?
 
1
<?php
2
wp_enqueue_script('jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js', array('jquery'), '1.8.6');
3
?>
4
 
5

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. 

 PHP | 
 copy code |
?
 
1
<?php 
2
wp_reset_query(); 
3
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1; 
4
query_posts('cat=-311&paged='.$paged);
5
 
6
?>

If you have questions, or feature requests, please let us know.