jQuery AutoThumb

Easy, easy.

An easy to use jQuery plugin for creating thumbnails and lightboxes for large images.

Click an image to see it in action...

Sample Image Sample Image Sample Image Sample Image

How to Use

HTML:

HEAD: <link href="/path/to/jquery.autothumb.css" rel="stylesheet" type="text/css">
BODY: <img src="/path/to/image.jpg" class="my-img-class" height="480" width="640" alt="My Image">

JavaScript:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="/path/to/jquery.autothumb.min.js"></script>
  
$(document).ready(function () {
    $(".my-img-class").autoThumb();
});

Easy peasy... The above code will take every image that matches the selector and scale it down to either 150px wide or 200px high by default. When the image is clicked, it will expand to it's normal size.

The best part is, the full image is loaded – so there is no waiting for the large image to come up*...

Current options (none are required):

$("my-selector").autoThumb({
    maxWidth: xxx, // Number in pixels. Default: 150
    maxHeight: xxx, // Number in pixels. Default: 200
    lightbox: true|false // When set to false, no Lightbox will appear.
});

Use only numbers for maxWidth & maxHeight. The pixel px is not required.

If you like this plugin, please let me know.@honyovk

* Not recommended for use with a lot of large images.