jQuery NailThumb

License

NailThumb is provided AS IS under GPL-3.0

Basically this means this program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You'll find a copy of the license bundled with the plugin or you can find it online here.

Compatibility many thanks to worfoual for the help testing it

browser	version (for jQuery)	tested with
Firefox	1+	3.6 - 10 - 11 - 12
Chrome	1+	19 - 20
Internet Explorer	6+	7 - 8 - 9
Safari	1+	5
Opera	1+	10 - 11

Support

support	bug report
blog	dev blog - rss
discussions	forum
watch/fork	GitHub

Downloads

date	bundle	version
24 may 2012	nailthumb.1.1.zip	1.1 changes
Version 1.1 changelog added options to work with imageresizing server-side effects. options page - live demo Fixes fixed a css problem that prevented IE7 from working correctly. IE7 need the container to have positon:relative for overflow:hidden to work properly.
10 march 2012	nailthumb.1.0.zip	1.0


            serverSideParams:{
                's.sepia':true,
                flip:'x'
            }


            <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>


                .yourContainerClass {
                    .thumbnail(150px, 150px);
                }

jQuery NailThumb from any image to any thumbnail with full control

License

Compatibility many thanks to worfoual for the help testing it

Support

Downloads

Code

Code

Code

Code

Code

Code

Code

Code

Code

Code

Code

Code

Code

Code

Code

Code

Code

Code