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

File Size: 268KB
Views Total: 11048
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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:

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.