jQuery NailThumb

Thanks

This plugin didn't have any contributor yet, but I feel it's important to thank all the people who provided open source software that made possible this project and this site

jQuery - If you are here you probably already know how it can change your working life
Bootstrap from Twitter - Without which working on this site would have been really painfull. It should have been an industrial secret, and instead is shared open source. This is wonderfull world
Less - I will never work without it
Metadata - The only jQuery plugin I include in any project even if I don't need to use it
Google Code Prettify - Best and simpliest way to style your code examples, even Bootstrap people didn't feel the need to enhance it
Shadowbox and YoxView - Both very good javascript library for media galleries. Here used only for the live demo, but one of the main aim of this plugin is to integrate with them in the best and easiest way possible
Image Preload and ShowLoading jQuery plugins - Usefull and lightweight jQuery plugins to solve some recurring development problems, here used only in the examples considering the possible interactions of NailThumb with them
Nathanael from imageresizing - Very powerful tool for image manipolation server-side
worfoual for the help testing NailThumb on various browsers and OS


            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

Thanks

Code

Code

Code

Code

Code

Code

Code

Code

Code

Code

Code

Code

Code

Code

Code

Code

Code

Code