If you use less in your project you'll certainly prefer not to use the css bundled with NailThumb, but you'll like the usefull thumbnail mixin provided in jquery.nailthumb.less file. Include it in your less imports and just call .thumbnail(@width: 110px, @height: 110px, @margin: 0px) on your container.
If you don't know what less is, visit lesscss.org and most of all Bootstrap from Twitter. If you ever found working with css dull and painfull you will love it and never work without ever after. To provide a tiny example of less potential, if you'd want to write your own classes for NailThumb in less you'll just have to write this line.
If you already use Bootstrap working directly with less and have some problems compiling it, stay tooned with this site. We had to develop a simple application for this site to compile bootstrap .less files cause we had some problem finding a working solution for every OS we need to use. We actually use it from Ant, but as soon as the GUI is mature enough we will share it here.
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<script type="text/javascript">
jQuery.fn.nailthumb.defaults.animation = null;
jQuery.fn.nailthumb.defaults.method = 'resize';
jQuery.fn.nailthumb.defaults.maxEnlargement = 2;
...
</script>
<script type="text/javascript">
jQuery.fn.nailthumb.doThumb(jQuery('.selector .to .image img'),jQuery('.selector .to .container'),{});
</script>
<script type="text/javascript">
jQuery('.selector .to .container').nailthumb({
onStart:function(){$.fn.nailthumb.toggleDebug()},
onFinish:function(){$.fn.nailthumb.toggleDebug()}
});
</script>