jQuery NailThumb from any image to any thumbnail with full control
NailThumb 1.1 Released 24 May 2012
NailThumb v.1.1 released: view the download page & change log or the new live demo
from this
to this
or more...
any size and shape
three methods, no distortion
any animation you can imagine
control over crop and resize direction
overlapping thumbnail title of any length
Never resize a thumbnail again
one line of code for creating thumbnails from high-res images
no distortion
decide thumbnail dimensions directly from CSS
experience how useful it is in dynamic web applications, where you can face any shape or size.
What it's useful for?
Basically any media gallery
But imagine you want to use avatars in your web applications: with this plugin you can avoid to develop a functionality that enable your user to load avatars of the right height and width, and still you'll be able to present them nicely in the size/sizes your layout need. Most of all you'll be able to change those sizes whenever you want without the need for your users to upload a new one, or even manage different sizes/ratio for different layouts with no drawbacks on the avatar chosen.
Take a look at the avatar demo
What this is not?
This plugin won't help you deliver very big high-res images more easily. If you have very big images and wish to have lower size thumbnails you'll still have to batch resize them before hand. There is no way this can be done client side via javascript.
However with this plugin you'll just have to resize them to a more bandwidth friendly dimension, you won't need to crop/resize them to any particular aspect ratio, and most of all you'll be able to change that shape via css whenever you want afterwards.
×
Code
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/jquery.nailthumb.1.0.js"></script>
...
<div class="nailthumb-container"><img src="img/small/howl.png" /></div>
<div class="nailthumb-container"><img src="img/small/rose.png" /></div>
<div class="nailthumb-container"><img src="img/small/roses.png" /></div>
...
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.nailthumb-container').nailthumb({width:100,height:100});
});
</script>
×
Code
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/jquery.metadata.js"></script>
<script type="text/javascript" src="path/to/jquery.nailthumb.1.0.js"></script>
...
<div class="nailthumb-column nailthumb-column-larger nailthumb-column-metadata">
<div class="">
<div class="nailthumb-container inline-block {method:'resize'}"><img src="img/small/rose.png" title="resize" /></div>
<div class="nailthumb-container inline-block {title:'title override'}"><img src="img/small/rose.png" title="original title" /></div>
<div class="nailthumb-container inline-block {titleAttr:'src'}"><img src="img/small/rose.png" title="title attribute is src" /></div>
</div>
<div class="inline-block">
<div class="nailthumb-container inline-block {fitDirection:'bottom right'}"><img src="img/small/rose.png" title="bottom right" /></div>
<div class="nailthumb-container inline-block {height:70}"><img src="img/small/rose.png" title="different height" /></div>
<div class="nailthumb-container inline-block {titleWhen:'load'}"><img src="img/small/rose.png" title="fixed title" /></div>
</div>
</div>
...
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.nailthumb-column-metadata .nailthumb-container').nailthumb({width:130,height:110});
});
</script>
×
Code
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/jquery.nailthumb.1.0.js"></script>
...
<div class="nailthumb-column nailthumb-column-larger nailthumb-column-nocontainer">
<div class="">
<img src="img/small/howl.png" title="resize" />
<img src="img/small/rose.png" title="resize" />
<img src="img/small/roses.png" title="resize" />
</div>
</div>
...
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.nailthumb-column-nocontainer img').nailthumb({width:130,height:110});
});
</script>
×
Code
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/jquery.nailthumb.1.0.js"></script>
...
<div class="nailthumb-container"><img src="img/small/howl.png" /></div>
<div class="nailthumb-container"><img src="img/small/rose.png" /></div>
<div class="nailthumb-container"><img src="img/small/roses.png" /></div>
...
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.nailthumb-container').nailthumb({width:100,height:100,fitDirection:'top left'});
});
</script>
×
Code
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/jquery.nailthumb.1.0.js"></script>
...
<div class="nailthumb-container"><img src="img/small/howl.png" /></div>
<div class="nailthumb-container"><img src="img/small/rose.png" /></div>
<div class="nailthumb-container"><img src="img/small/roses.png" /></div>
...
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.nailthumb-container').nailthumb({width:100,height:100,method:'resize',fitDirection:'top left'});
});
</script>
×
Code
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/jquery.nailthumb.1.0.js"></script>
<style type="text/css" media="screen">
.square {
width: 100px;
height: 100px;
}
.horiz {
width: 100px;
height: 70px;
}
.vert {
width: 100px;
height: 130px;
}
</style>
...
<div class="nailthumb-container square"><img src="img/small/howl.png" /></div>
<div class="nailthumb-container horiz"><img src="img/small/rose.png" /></div>
<div class="nailthumb-container vert"><img src="img/small/roses.png" /></div>
...
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.nailthumb-container').nailthumb();
});
</script>
×
Code
<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">
.nailthumb-image-titles-bigger span.nailthumb-title {
background: none repeat scroll 0 0 rgba(0, 125, 0, 0.5);
font-size: 15px;
height: 30px;
}
</style>
...
<div class="nailthumb-container square-thumb nailthumb-image-titles-animated-onhover"><img src="img/small/rose.png" title="animated - on over" /></div>
<div class="nailthumb-container square-thumb nailthumb-image-titles-animated-onload"><img src="img/small/rose.png" title="animated - on load" /></div>
<div class="nailthumb-container square-thumb nailthumb-image-titles-bigger"><img src="img/small/rose.png" title="styled bigger" /></div>
<div class="nailthumb-container square-thumb nailthumb-image-titles-onhover"><img src="img/small/rose.png" title="on over" /></div>
<div class="nailthumb-container square-thumb nailthumb-image-titles-onload"><img src="img/small/rose.png" title="on load" /></div>
<div class="nailthumb-container square-thumb nailthumb-image-titles-verylong"><img src="img/small/rose.png" title="" /></div>
...
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.nailthumb-image-titles-animated-onhover').nailthumb();
jQuery('.nailthumb-image-titles-animated-onload').nailthumb({titleWhen:'load'});
jQuery('.nailthumb-image-titles-onhover').nailthumb({animateTitle:false});
jQuery('.nailthumb-image-titles-onload').nailthumb({titleWhen:'load',animateTitle:false});
jQuery('.nailthumb-image-titles-bigger').nailthumb({titleWhen:'load'});
jQuery('.nailthumb-image-titles-verylong').nailthumb({titleWhen:'load',title:"Nel mezzo del cammin di nostra vita mi ritrovai per una selva oscura, ché la diritta via era smarrita. Ahi quanto a dir qual era è cosa dura esta selva selvaggia e aspra e forte che nel pensier rinova la paura! Tant' è amara che poco è più morte; ma per trattar del ben ch'i' vi trovai, dirò de l'altre cose ch'i' v'ho scorte. Io non so ben ridir com' i' v'intrai, tant' era pien di sonno a quel punto che la verace via abbandonai."});
});
</script>
×
Code
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/jquery.nailthumb.1.0.js"></script>
<script type="text/javascript" src="path/to/jquery.imgpreload.min.js"></script>
...
<div class="nailthumb-container"><img src="img/small/howl.png" /></div>
<div class="nailthumb-container"><img src="img/small/rose.png" /></div>
<div class="nailthumb-container"><img src="img/small/roses.png" /></div>
...
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.nailthumb-container img').imgpreload({
each: function(){
$(this).parents('.nailthumb-container').nailthumb({width:100,height:100,preload:false});
}, all: function(){
}
});
});
</script>
×
Code
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/jquery.nailthumb.1.0.js"></script>
<script type="text/javascript" src="path/to/jquery.showLoading.min.js"></script>
...
<div class="nailthumb-container placeholder"></div>
<div class="nailthumb-container show-loading"><img src="img/image.png" /></div>
...
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.nailthumb-container.placeholder').nailthumb({
imageUrl: 'http://...'
});
jQuery('.nailthumb-container.show-loading').nailthumb({
imageUrl: 'http://...',
onStart:function(container){
container.showLoading();
},
onFinish:function(container){
container.hideLoading();
}
});
});
</script>
×
Code
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/jquery.nailthumb.1.0.js"></script>
<script type="text/javascript" src="path/to/jquery.showLoading.min.js"></script>
...
<div class="nailthumb-container placeholder"></div>
<div class="nailthumb-container show-loading"><img src="img/image.png" /></div>
...
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.nailthumb-container.placeholder').nailthumb({
imageUrl: 'http://...'
});
jQuery('.nailthumb-container.show-loading').nailthumb({
imageUrl: 'http://...',
onStart:function(container){
container.showLoading();
},
onFinish:function(container){
container.hideLoading();
}
});
});
</script>
×
Code
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/jquery.nailthumb.1.0.js"></script>
...
<div class="nailthumb-container"><a href="http://..."><img src="img/image.png" /></a></div>
<div class="nailthumb-container"><a href="http://..."><img src="img/image.png" /></a></div>
...
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.nailthumb-container').nailthumb({
imageFromWrappingLink: true,
});
});
</script>
×
Code
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/jquery.nailthumb.1.0.js"></script>
...
<div class="nailthumb-container" id="customfunction-container"><img src="img/image.png" /></div>
<div class="nailthumb-container"><img src="img/image.png" /><img src="img/small/roses.png" class="hide" title="image hidden inside container" /></div>
<img id="customfunction-image" src="img/small/roses.png" class="hide" title="image found by id" />
...
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.nailthumb-container').nailthumb({
imageCustomFinder: function(el){
if (el.attr('id')) {
return jQuery('#'+el.attr('id').replace('-container','-image'));
} else {
return el.find('img:last');
}
}
});
});
</script>
×
Code
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/jquery.nailthumb.1.0.js"></script>
...
<div class="nailthumb-container"><img src="img/small/roses.png" class="hide" title="fade" /></div>
<div class="nailthumb-container"><img src="img/small/roses.png" class="hide" title="slide" /></div>
<div class="nailthumb-container"><img src="img/small/roses.png" class="hide" title="animate" /></div>
<div class="nailthumb-container"><img src="img/small/roses.png" class="hide" title="custom" /></div>
<div class="nailthumb-container"><img src="img/small/roses.png" class="hide" title="no animation" /></div>
...
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.nailthumb-container:eq(0)').nailthumb({
replaceAnimation:'fade'
});
jQuery('.nailthumb-container:eq(1)').nailthumb({
replaceAnimation:'slide'
});
jQuery('.nailthumb-container:eq(2)').nailthumb({
replaceAnimation:'animate'
});
jQuery('.nailthumb-container:eq(3)').nailthumb({
replaceAnimation: function(image,after) {
image.show(1000,after)
}
});
jQuery('.nailthumb-container:eq(4)').nailthumb({
replaceAnimation:null
});
});
</script>
×
Code
<script type="text/javascript">
jQuery.fn.nailthumb.defaults.animation = null;
jQuery.fn.nailthumb.defaults.method = 'resize';
jQuery.fn.nailthumb.defaults.maxEnlargement = 2;
...
</script>
×
Code
<script type="text/javascript">
jQuery.fn.nailthumb.doThumb(jQuery('.selector .to .image img'),jQuery('.selector .to .container'),{});
</script>
×
Code
<script type="text/javascript">
jQuery('.selector .to .container').nailthumb({
onStart:function(){$.fn.nailthumb.toggleDebug()},
onFinish:function(){$.fn.nailthumb.toggleDebug()}
});
</script>