Click to toggle dark text on white

Home » Plugins » Simplethumbs

Simplethumbs: Simple Thumbnails Gallery Script for jQuery

Click here for the simplethumbs.min.js code - Click here for the uncompressed code

$().simplethumbs(). Version 0.9.2

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.

<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>

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:

Start Slideshow | Stop Slideshow | Toggle Slideshow
Previous Image | Next Image

Click here for the simplethumbs.min.js code - Click here for the uncompressed code

There are a few other configurations that may be useful. Here are all the options at default settings:

jQuery("#thumbnails").simplethumbs({
    slideshow: "",//required, location of image viewport
    preload: true,//recommended for anything but very large galleries, preloads all required images
    activeClass: "active",//class placed on active thumbnail
    speed: 600,//speed of transition between images
    next: "#next-image",//button for "next" image
    prev: "#prev-image",//button for "previous" image
    wrap: false,//if true, reaching the end wraps back to the beginning, when using "next" and "previous" buttons
    cycle: false,//autostart slideshow
    cycleWrap: true,//does slideshow stop at end? similar to "wrap" option for next and previous
    interval: 3000,//delay between automatic slides
    reverse: false,//if true, slideshow goes in reverse
    startCycle: "#start-cycle",//to start the slideshow
    stopCycle: "#stop-cycle",//to stop it
    toggleCycle: "#toggle-cycle",//to toggle it
    hoverPause: false,//if true, hovering over the slideshow will pause the automatic cycle
    callAfter: function(thumb) {},//callback before
    callBefore: function(thumb) {},//callback after
    beforeCycle: function() {},//callback before automatic cycle
    afterCycle: function() {}//callback after automatic cycle
});

Click here for the simplethumbs.min.js code - Click here for the uncompressed code

© 2006-2013 Abel Mohler How to Hire Me | How Websites are Built | For Developers: jQuery Window Script