Introduction

jQuery Simple Slider. This Plugin add a feature slide un UL/LI list with an image inside, in very simple mode. HTML Tagging required is:

<ul>
 <li title="Title 1"><img title="Subtitle 1" src="image1.jpg" /></li>
 <li title="Title 2"><img title="Subtitle 2" src="image2.jpg" /></li>
 <li>...</li>
</ul>

From release 1.1.0 you can set timeout params for each single slide. Thanks to Santino Bivacqua to suggest:

<ul>
 <li rel="simpleSlider{timeout: 4000}" title="Title 1"><img title="Subtitle 1" src="image1.jpg" /></li>
 <li rel="simpleSlider{timeout: 1000}" title="Title 2"><img title="Subtitle 2" src="image2.jpg" /></li>
 <li>...</li>
</ul>

LI title and IMG title are used for show a caption on bottom of slide.

Usage

You can download source Javascript file from this repository:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3")</script>
<!-- load latest version of jquery footer caption -->
<script type="text/javascript" src="http://undolibrary.googlecode.com/svn/trunk/jquery/jquery.simpleslider/jquery.simpleslider.js"></script>

When the DOM page is loaded, you can call footerCaption() method.

<script type="text/javascript">
google.setOnLoadCallback( 
    function() {
         $('ul#myslider').simpleSlider();
    }
);
</script>

Options

You can set some options like object param in the simpleSlider() method.

 * @param 	alpha	       Caption opacity (default '0.7'),
 * @param 	bgColor	       Caption background color (default '#000')
 * @param	bgSpeed	       Background image fade speed ( 'slow', 'normal', 'fast' or number of milliseconds) default 'slow'
 * @param	captionSpeed   Caption slideUp/slideDown speed ( 'slow', 'normal', 'fast' or number of milliseconds) default 'slow'
 * @param	height         Caption height (default '50px')
 * @param 	titleStyle     CSS Object for title ( default { color: '#fff', fontSize: '14px', fontFamily: 'Arial', margin: '0 10px 0 10px', textAlign: 'left' } )
 * @param 	subtitleStyle  CSS Object for subtitle (default { color: '#fff', fontSize: '10px', fontFamily: 'Verdana', margin: '0 10px 0 10px', textAlign: 'left' } )
 * @param	timeOut        Milliseconds interval between slide ( default 4000 )

Sample

$('ul#myslide').simpleSlider( {alpha: '0.5', titleStyle: { fontSize: '18px' } } );