jQuery NailThumb from any image to any thumbnail with full control
This example shows how to use NailThumb with no css configuration and one line initialization as in jQuery best tradition.
This configuration, while it needs a minimal setup, has the downside that if images are visible when they are thumbnailed the effect won't be very smooth, since theire size will change, and the page will adapt, not with a good visive effect. There are better ways to handle this transition, most of all when is CSS to set thumbnail size since you can hide the images before thumbnail them and there will be no resize in the page, the thumbnail will appear with any desired effect and no placing adjustments.
view code
When you create galleries of high resolution images, or even if you just have a lot of thumbnails in the same page, the load and resize of the images could take a bit of time, and you probably should show a loading icon.
If you use the background of the container as a placeholder as shown in this example it's fairly simple to show a loading animation, because NailThumb add/remove the class in loadingClass option while working/waiting the image to be ready. This is probably the best way to go also if your thumbnails are "CSS driven", because since it's your stylesheet that define the thumbnail dimension, it should be also responsible for style and size both of the placeholder and the loading icon
If you don't use a placeholder or already use a loading plugin like jQuery ShowLoading, you can use onStart and onFinish functions.
view code
The best way to use NailThumb is to let your css drive.
Simply set width and heinght for the container element via css and with a single line of code resize all the thumbnails of a page, even if they are of different sizes.
This way you will never have to specify thumbnails dimension in your code, thus your stylesheets will always be self-sufficient.
view code
If you have web-unfriendly images, that may require a bit of time to load, and you don't have a thumbnail version to use, you should probably use a placeholder and let NailThumb show the real image only when it's ready. The result is a lot smoother this way even if your images are small and fast to load.
You have a bit of options both for specifing which is the real image to use for thumbnail and for effect when it appears.
Easiest to specify another image to load as thumbnail is to use imageUrl option. Once that url is loaded the image will be placed correctly in the container, replacing any image present.
In this example in the first case there's an image as placeholder, while in the second the container is empty and its background is used as placeholder image.
view code
If you use a plugin for media galleries, like YoxView or ShadowBox you'll probably have a link to the full-size image wrapping your thumbnail.
In this case just set to true imageFromWrappingLink to have nailthumb replace your thumbnail with the resized and clipped full-size image.
View the ShadowBox or YoxView demo
view code
Since your full-size image could be anywhere in the page, or even not loaded you have imageCustomFinder custom function. The container is passed as an argument, so you can use any attribute to find the full-size image.
In the first example the image his hidden inside the container. In the second it's found replacing part of the container id.
view code
You have three animations to choose from setting option replaceAnimation to 'fade', 'slide' or 'animate'. If you set it to null no animation will take place.
Custom animation
You can also use your custom animation by setting replaceAnimation to be a function. You'll get passed as an argument the image and another function. You will need to fire manually that function once your animation is ended, else the thumbnail process won't end the right way (basically the title won't be placed and onFinish won't fire).
Click on an image to see the animation. In the second row the animations are the same, but the image is already in place. As you can see if images are visible all the time the effect is not always very good. You just need to set the image as hidden to have a smoother result.
view code
You can show a title over the thumbnail, either by title option or by an attribute of the image
you have the option to show it only on mouse over and whether or not to use animation.
You will need to use the stylesheet provided with the bundle to display it correctly, but feel free to restyle it to your liking.
To disable title display you should set titleAttr option to null, else any image with a title attribute will show it. In any case if it's specified a title option or a titleAttr option referring a non empty attribute, the plugin will try to show it.
Defaults are:
| option | default |
|---|---|
| title | null |
| titleAttr | 'title' |
| titleWhen | 'hover' |
| animateTitle | true |
view code
NailThumb is integrated with jQuery Metadata Plugin, a very usefull plugin that allows you to specify metadata directly in your markup and reuse them via javascript.
Metadata integration can be very powerfull and allows you to limit even more the line of javascript that you need to write.
In this specific case you can define any option of NailThumb using metadata, and the plugin will use them for each element to extend the options specified in the call for all the elements.
In the example below the only javascript line executed is a call of NailThumb over a jQuery selector that select all elements, with only width and height options specified. All the different results are obtained only by defining other options for each element via metadata directly in html markup.
view code
The set of objects on which NailThumb is applied should be a container wrapping an image. If you have only images NailThumb will add the container for each image, and will apply to it the class specified in containerClass option.
If your images already have a suitable container and you need to point the selector to images for other reasons, set to false ifImageAddContainer option, and NailThumb will use the actual parent of the image as container.
view code
By default if crop is needed it's centered, but you can specify fitDirection option
view code
If you don't like the image to be cropped you can set method option to 'resize'
Image proportions will be preserved all the same, but if they don't fit the container shape the image will be centered.
Similar to 'crop' method you can specify image position with fitDirection option
view code
Sometimes the browser execute the javascript before the images have been loaded, even if you execute it in jQuery(document).ready(). In Chrome this appens almost all the time.
To solve this you have the option preload active by default.
If you prefer or already use a plugin to manage image preloading you probably should turn this option off. For example you could prefer to process thumbnails only after all images have been loaded, functionality offered by jQuery Image Preload Plugin, good lightweight plugin that never failed me.
view code