jQuery Plugin for Creating Thumbnails From High-Res Images - NailThumb

NailThumb is an useful jQuery plugin that helps you to automatically generate thumbnails from High-Res Images for your image gallery.

You might also like:

• jQuery Plugin For Thumbnail Grid with Expanding Preview
• 3D Thumbnail Paper Folding Effect
• Adaptive Thumbnail Pile Effect with Automatic Grouping
• Amazing Thumbnail Zoom Plugin With Sliding Captions
• Cool Thumbnail Spotlight Effect With Jquery
• Navigation Gallery with Scrollable Thumbnails

How to use it:

1. Include jQuery library and NailThumb.js on your page. 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="src/jquery.nailthumb.1.1.min.js"></script>

2. Include Shadowbox plugin to apply a beautiful modal effect to your images.

<link href="shadowbox.css" rel="stylesheet" type="text/css">
<script src="shadowbox.js"></script>

3. Include NailThumb CSS to style your plugin. 

<link href="src/jquery.nailthumb.1.1.min.css" rel="stylesheet" type="text/css">

4. Define thumbnail dimensions via CSS

<link href="src/jquery.nailthumb.1.1.min.css" rel="stylesheet" type="text/css">

5. The HTML

<style type="text/css" media="screen">
.demo {
width: 150px;
height: 150px;
background-image: url("path/to/loadingplaceholder");
background-position: center center;
background-repeat: no-repeat;
display: inline-block;
}
</style>

6. The javascript

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('.demo').nailthumb({
        imageCustomFinder: function(el){
            var image = $('<img />').attr('src',el.attr('href').replace('/full/','/small/')).css('display','none');
            image.attr('alt',el.attr('title'));
            el.append(image);
            return image;
        },
        titleAttr:'alt'
    });
    Shadowbox.init();
});
</script>

---

This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.