Garralab

jQuery NailThumb from any image to any thumbnail with full control

Never distorted

Whatever method you choose and whatever proportions limit you fix NailThumb will always create a thumbnail without any distortion and will keep your image as big as possible.

Crop
Resize
Fixed or limited proportions

Basic usage

Basically what you need for each thumbnail is a container and a way to set your thumbnail width and height. Best way to do so is via CSS (see this example), so whenever you'll want to restyle you won't have to touch your javascript to let the thumbnails fit.

You can also control animation or even the way the right image is dected


    <script type="text/javascript" src="path/to/jquery.js"></script>
    <script type="text/javascript" src="path/to/jquery.nailthumb.1.0.js"></script>
    <link href="path/to/jquery.nailthumb.1.0.css" type="text/css" rel="stylesheet" />
    <style type="text/css" media="screen">
        .square-thumb {
            width: 150px;
            height: 150px;
        }
    </style>
    ...
    <div class="nailthumb-container square-thumb">
        <img src="path/to/image.png" />
    </div>
    <div class="nailthumb-container square-thumb">
        <img src="path/to/image.png" />
    </div>
    <div class="nailthumb-container square-thumb">
        <img src="path/to/image.png" />
    </div>
    ...
    <script type="text/javascript">
        jQuery(document).ready(function() {
            jQuery('.nailthumb-container').nailthumb();
        });
    </script>