All options can be specified directly in the plugin call or via metadata. If you need to change any default option so you don't have to specify it for every call of NailThumb you can use $.fn.nailthumb.defaults.
| Name | type | default | description | |
|---|---|---|---|---|
| width | number | null | Thumbnail width | it's considerably better to use css to set thumbnail dimensions |
| height | number | null | Thumbnail height | |
| method | string | 'crop' | Valid values are 'crop' or 'resize' | |
| fitDirection | string | null | A string combining two directions separated by a space. If a direction is not specified it will default to center. Valide input are, following css conventions, 'top', 'bottom', 'center', 'left' and 'right'. Example: 'top left', 'bottom' or 'right top' | |
| imageUrl | string | null | Use this option to set the image to use for thumbnail | refer to these examples |
| imageFromWrappingLink | boolean | false | The image used for thumbnail is the href of the first link inside the container | |
| imageCustomFinder | function | null | Custom function that return a jQuery object containing the <img /> to use for thumbnail | |
| replaceAnimation | string/function | 'fade' | Either a string, 'fade', 'slide' or 'animate', or a custom function. If set to null no animation will occur. Refer to this example, expecially if you want to use a custom function | |
| selfStartAfterAppear | boolean | false | If you are using a custom animation leave this to false, and remember to fire yourself the afterAppear function passed as argument to the animation function when your own animation has ended. If your animation is synchronous you can avoid to fire the function received as argument and turn this option to true. This will make the part of the NailThumb process that appen after the image is show to be fired immediately after execution of the custom animation function | |
| animation | string | 'swing' | Animation easing. Works only with valide jQuery animation easing and obviously not with custom animations | |
| animationTime | number | 1000 | Animation duration | |
| titleAttr | string | 'title' | Image attribute to use as title. If imageFromWrappingLink option is true this attribute is read from the <a/> tag | |
| title | string | null | If this option is defined it will override image attribute | |
| animateTitle | boolean | true | If true the title appearance will be animated | |
| titleAnimation | string | 'swing' | Title animation easing. Works only with valide jQuery animation easing | |
| titleAnimationTime | number | 500 | Title animation duration | |
| titleWhen | string | 'hover' | Valide input are 'hover' and 'load'. Determines if the title is always visible or only on mouse over | |
| titleScrolling | boolean | true | If true the title will scroll horizontaly if it's longer then the thumbnail viewport | |
| proportions | float | null | Fixed image proportions. If defined the image will be shrinked or enlarged accordingly and then only placed in the thumbnail viewport in accordance with fitDirection option. For example if set to 1 the image will not be redimensioned, if set to 0.5 it will be shrinked to half and if set to 2 will be doubled. Try it with the controls in the overview page | |
| maxEnlargement | float | null | Should be greater then 1 and is the maximum enlargement for images smaller then the viewport | |
| maxShrink | float | null | Should be less then 1 and is the maximum shrink for images larger then the viewport | |
| imageClass | string | 'nailthumb-image' | CSS class applied to the image | |
| containerClass | string | 'nailthumb-container' | CSS class applied to the thumbnail container | |
| titleClass | string | 'nailthumb-title' | CSS class applied to the span containing the title | |
| titleScrollerClass | string | 'nailthumb-title-scroller' | CSS class applied to the span inside the title span, used for scrolling effect and present only if title is larger thene the viewport | |
| loadingClass | string | 'nailthumb-loading' | CSS class applied to the thumbnail container while waiting for the image to be loaded | |
| onStart | function | null | Custom function fired when a NailThumb start working. Gives you two arguments: onStart(currentContainer,options) | |
| onFinish | function | null | Custom function fired when NailThumb finish working on a thumbnail. Gives you two arguments: onFinish(currentContainer,options) | |
| afterReplace | function | null | Custom function fired only if NailThumb have to create, or move from another node, the thumbnail image. Gives you three arguments: afterReplace(currentContainer,currentImage,options) | |
| afterAppear | function | null | Custom function fired only when the image has been shown, so after any animation has occurred. Gives you three arguments: afterAppear(currentContainer,currentImage,options) | |
| ifImageAddContainer | boolean | true | If you call NailThumb directly on <img/> tags if this option is true NailThumb will wrap every image in a <div/> container (the needed viewport). If you set this to false, NailThumb will consider the immediate parent of the image has the container and so it will apply the needed properties to it (height and width too if specified). Turn this to false only if you find easier to set a selector directly for the images, but already have a container that fits on the page. View this example for more informations | |
| preload | boolean | true | This option tell NailThumb to wait for the image to be loaded before start the thumbnailing process. Set this to false if you think this mechanism is not working as expected, but then remember to call NailThumb only after you ensured in some other way that the images have been loaded. View this example for reference to an image preloading plugin | |
| nostyle | boolean | false | If you set this to true NailThumb will avoid to set some of the styles that applyes to container and image. It will still apply those that can't be avoided for correct placing. Just remember that you'll have to apply yourself via css overflow:hidden and padding:0px to the container and position:relative to the image | |
| serverSideParams | object | null |
We introduced this option to be able to work in sinergy with imageresizer. The value should be
an object containing all options you want to use for imageresizer (you can find the complete list here).
For example this code will set imageresizer options to set image sepia effect and flip it horizontally.
"width", "height" and "method" options will be sent to imageresizer as NailThumb calculated them, but they can be overwrited by the correspondig imageresizer options ("width","height" and "mode").
The only option that is not sent to imageresizer is "noServerResize", if this is set to true NailThumb won't send it's calculated dimensions and method to imageresizer, so you can use this if you want to get a full-size image and use only the other imageresizer options.
View this demo to get an idea of what can be achieved with imageresizer | |