SIMPLE THUMBS, JQUERY GALLERY

This plugin works with minimal markup and is easy to instantly configure. The image that appears in the gallery window must be pointed at in the HREF attribute of each thumbnail. The thumbnail that is currently displayed will have an “active” class on it. You must configure most of the styles yourself, as there is minimal interference from the plugin.

Simple Thumbs, jQuery Gallery

You can also create buttons to start, stop, or toggle an automatic slideshow. By default these elements can be inserted with a #start-cycle, #stop-cycle, and #toggle-cycle id to them, without requiring additional JavaScript configuration. You can also indicate “next” and “previous” buttons with a #next-image and #prev-image ID. These buttons will stop an automatic slideshow if it is occuring. So with the same script as above, you could do this:

<div id="imageview">
    <img src="images/sample1.jpg" alt="example" />
</div>
<div id="thumbnails">
    <a href="images/sample1.jpg" class="active"><img src="images/thumbnails/sample1.jpg" alt="" /></a>
    <a href="images/sample2.jpg"><img src="images/thumbnails/sample2.jpg" alt="" /></a>
    <a href="images/sample3.jpg"><img src="images/thumbnails/sample3.jpg" alt="" /></a>
    <a href="images/sample4.jpg"><img src="images/thumbnails/sample4.jpg" alt="" /></a>
    <a href="images/sample5.jpg"><img src="images/thumbnails/sample5.jpg" alt="" /></a>
</div>
<script type="text/javascript">
    jQuery(document).ready(function() {
        $('#thumbnails').simplethumbs({slideshow: '#imageview'});
    });
</script>