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
widthnumbernullThumbnail widthit's considerably better to use css to set thumbnail dimensions
heightnumbernullThumbnail height
methodstring'crop'Valid values are 'crop' or 'resize'
fitDirectionstringnullA 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'
imageUrlstringnullUse this option to set the image to use for thumbnailrefer to these examples
imageFromWrappingLinkbooleanfalseThe image used for thumbnail is the href of the first link inside the container
imageCustomFinderfunctionnullCustom function that return a jQuery object containing the <img /> to use for thumbnail
replaceAnimationstring/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
selfStartAfterAppearbooleanfalseIf 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
animationstring'swing'Animation easing. Works only with valide jQuery animation easing and obviously not with custom animations
animationTimenumber1000Animation duration
titleAttrstring'title'Image attribute to use as title. If imageFromWrappingLink option is true this attribute is read from the <a/> tag
titlestringnullIf this option is defined it will override image attribute
animateTitlebooleantrueIf true the title appearance will be animated
titleAnimationstring'swing'Title animation easing. Works only with valide jQuery animation easing
titleAnimationTimenumber500Title animation duration
titleWhenstring'hover'Valide input are 'hover' and 'load'. Determines if the title is always visible or only on mouse over
titleScrollingbooleantrueIf true the title will scroll horizontaly if it's longer then the thumbnail viewport
proportionsfloatnullFixed 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
maxEnlargementfloatnullShould be greater then 1 and is the maximum enlargement for images smaller then the viewport
maxShrinkfloatnullShould be less then 1 and is the maximum shrink for images larger then the viewport
imageClassstring'nailthumb-image'CSS class applied to the image
containerClassstring'nailthumb-container'CSS class applied to the thumbnail container
titleClassstring'nailthumb-title'CSS class applied to the span containing the title
titleScrollerClassstring'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
loadingClassstring'nailthumb-loading'CSS class applied to the thumbnail container while waiting for the image to be loaded
onStartfunctionnullCustom function fired when a NailThumb start working. Gives you two arguments: onStart(currentContainer,options)
onFinishfunctionnullCustom function fired when NailThumb finish working on a thumbnail. Gives you two arguments: onFinish(currentContainer,options)
afterReplacefunctionnullCustom function fired only if NailThumb have to create, or move from another node, the thumbnail image. Gives you three arguments: afterReplace(currentContainer,currentImage,options)
afterAppearfunctionnullCustom function fired only when the image has been shown, so after any animation has occurred. Gives you three arguments: afterAppear(currentContainer,currentImage,options)
ifImageAddContainerbooleantrueIf 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
preloadbooleantrueThis 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
nostylebooleanfalseIf 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
serverSideParamsobjectnull 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