The file jquery.nailthumb.css in the bundle provides both decoration and basic style attributes for the correct functioning of the plugin. This stylesheet obviously refer to the classes the plugin uses. If you change them via options you'll have to change the stylesheet accordingly, or you could use the less mixins also provided in the bundle.
There are few known interaction issues with other css
Some css reset set image max-width to 100%. This will not make the plugin work correctly. The CSS and less mixins provided already solve the issue, but keep it in mind in case you decide to rewrite your own stylesheet
If the container has a text-align center or right applied the positioning of the thumbnail will be wrong. If you ever see a thumbnail positioned too much to the right it's almost certanly this case. Again both css and less mixins try to prevent this applying text-align:left to the container, but there can always be a rule with higher priority that overwrites it.
<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>