NailThumb Plugin public functions.
| Function | description | |
|---|---|---|
| $.fn.nailthumb.doThumb(image,container,options) | Utility function if you need to call the thumbnailing process manually. Make sure the image is already loaded and provide both image and container in jQuery objects | usage |
| $.fn.nailthumb.toggleDebug() | Activates/deactivates debug mode. When debug is on it will generate a lot of logging in your console. Concentrate on a single thumbnail that is causing trouble and toggle debug both in onStart and onFinish custom functions, so you won't have to lose time trying to find the logs that you need. Don't leave debug on in your final result because it can cause visible performance issues if you have a lot of images | usage |
| $.fn.nailthumb.setServerSideParams(image,container,options) | Method that sets the image src for imageresizing params. This method is public so that you can overwrite it if you use another server side tool for image manipolation (if this is the case, please let us know so we can add support for it). | |
| $.fn.nailthumb.evalServerSideParams(image,container,options) | Method that returns the correct param string for imageresizing params. This is the function that actually provide correct dimensions from CSS if no width/height is explicitly set. Overwrite this if you need to handle some params differently. | |
<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>