jQuery NailThumb Live Demo

If you already use a jQuery plugin or another type of library to manage your media gallery, the integration with NailThumb is pretty straightforward. Tipically you'll have an html structure similar to this, a link to the full size image, wrapping a thumbnail image. In this case all you need to do is add the class that defines your thumbnail dimension to the link and call NailThumb on it.

In case you don't have thumbnails already and don't want to produce them you can also set to true imageFromWrappingLink option and then you won't even need to have an image inside the link. While this method works, it should be avoided, first because it works only with images, so if your media is a video you won't find any image at that url, but most importantly because if your images are heavy some browser will become really unresponsive, even with all animations turned off. This is surely the case with Chrome. So if you don't want to produce thumbnails keep in mind that it isn't a browser friendly solution and at least keep the number of images per page as low as possible. In the two examples below there's still a link as container with no images and imageCustomFinder is used to append the smaller version of the image transforming the href of the full image.

YoxView is a powerfull and easy to use jQuery plugin. Follow this link for full reference. view code

If you already use a jQuery plugin or another type of library to manage your media gallery, the integration with NailThumb is pretty straightforward. Tipically you'll have an html structure similar to this, a link to the full size image, wrapping a thumbnail image. In this case all you need to do is add the class that defines your thumbnail dimension to the link and call NailThumb on it.

In case you don't have thumbnails already and don't want to produce them you can also set to true imageFromWrappingLink option and then you won't even need to have an image inside the link. While this method works, it should be avoided, first because it works only with images, so if your media is a video you won't find any image at that url, but most importantly because if your images are heavy some browser will become really unresponsive, even with all animations turned off. This is surely the case with Chrome. So if you don't want to produce thumbnails keep in mind that it isn't a browser friendly solution and at least keep the number of images per page as low as possible. In the two examples below there's still a link as container with no images and imageCustomFinder is used to append the smaller version of the image transforming the href of the full image.

ShadowBox is js library very easy to use and compact. My personal favourite for display effects view code

If you need to manage avatars in your application this plugin can be of great help. You're not forced to limit the shape of the images your user upload, and still you can use that image in different sizes and shape through out your code as it fits your style best. And even if you need to restyle it's still very easy to give a complete preview to your users.

Avatar Manager

Image

url

Keep image size under 300KB

Nickname

Show nickname on hover

Crop direction

Profile preview

garralab some@email

Your, Inc.
555 Some Ave, Suite 555
San Francisco, CA 94107
P: (123) 456-7890

Post preview

Some title your post will be displaced here

some comment text


            <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/yoxview-init.js"></script>
            <style type="text/css" media="screen">
                .square-thumb {
                    width: 150px;
                    height: 150px;
                    background-image: url("path/to/loadingplaceholder");
                    background-position: center center;
                    background-repeat: no-repeat;
                }
            </style>
            ...
            <div class="yoxview-container">
                <a class="square-thumb" title="Image Title" href="path/to/full/image"></a>
                <a class="square-thumb" title="Image Title" href="path/to/full/image"></a>
                <a class="square-thumb" title="Image Title" href="path/to/full/image"></a>
            </div>
            ...
            <script type="text/javascript">
                jQuery(document).ready(function() {
                    jQuery('.square-thumb').nailthumb({
                        imageCustomFinder: function(el){
                            var image = $('<img />').attr('src',el.attr('href').replace('/full/','/small/')).css('display','none');
                            image.attr('alt',el.attr('title'));
                            el.append(image);
                            return image;
                        },
                        titleAttr:'alt'
                    });
                    jQuery('.yoxview-container').yoxview();
                });
            </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/shadowbox.js"></script>
            <link href="path/to/shadowbox.css" type="text/css" rel="stylesheet" />
            <style type="text/css" media="screen">
                .square-thumb {
                    width: 150px;
                    height: 150px;
                    background-image: url("path/to/loadingplaceholder");
                    background-position: center center;
                    background-repeat: no-repeat;
                }
            </style>
            ...
            <a class="square-thumb" rel="shadowbox[gallery]" title="Image Title" href="path/to/full/image"></a>
            <a class="square-thumb" rel="shadowbox[gallery]" title="Image Title" href="path/to/full/image"></a>
            <a class="square-thumb" rel="shadowbox[gallery]" title="Image Title" href="path/to/full/image"></a>
            ...
            <script type="text/javascript">
                jQuery(document).ready(function() {
                    jQuery('.square-thumb').nailthumb({
                        imageCustomFinder: function(el){
                            var image = $('<img />').attr('src',el.attr('href').replace('/full/','/small/')).css('display','none');
                            image.attr('alt',el.attr('title'));
                            el.append(image);
                            return image;
                        },
                        titleAttr:'alt'
                    });
                    Shadowbox.init();
                });
            </script>