New jQuery plugin: ‘imgPreview’

The ‘imgPreview’ plugin allows your users to preview an image before clicking on it and, out of necessity, will preload the image so when a user does click through to it there is no waiting time!

The image preview shows up in a tooltip-like box appearing alongside the user’s cursor when hovering over a link. The plugin is entirely unobtrusive; it does not require any hooks to target specific links (no non-semantic classes); it will automatically detect the anchors that are linking to images and will only apply the preview effect to them.

Options

Additionally, it allows for quite a high level of customisation, the following options are available: (to see a demo, scroll down to the bottom of the post)

  • imgCSS – This setting must be an object. The CSS specified within will be applied to the preview image. So, if you wanted to limit all image previews to a width of 200px you could do it like this: 
    $('a').imgPreview({
    imgCSS: {
        width: '200px'
    }
});
  • distanceFromCursor – This setting must be an object. Within it there must be a ‘top’ and ‘left’ property, both of which correspond to position of the preview in relation to the user’s cursor. By default the position is set to {top:10,left:10}. Be sure not to position the preview directly over the link as this will mess up the hover in/out effect; an offset is required.
  • preloadImages – This setting must be a Boolean value (true/false). This setting dictates whether or not the plugin will preload the images before the user hovers over any particular link. This is recommended and is set to true by default – if you have a lot (>30) of links to images on a single page then it’s advisable to disable this feature.
  • Callback functions:
    • onShow – The onShow setting must be a function. It is a callback which will be run when the preview container appears. Within the callback you have access to the preview ‘container’ via the this keyword and the hovered link via the first parameter.
    • onLoad – The onLoad setting must be a function. It is a callback which will be run when the preview image has loaded. It’s different to onShow in that it will only run once the image has been loaded, not before. Within the callback you have access to the preview image via the this keyword and the hovered link via the first parameter. To get access to the container you could just do: $(this).parent().
    • onHide – The onHide setting must be a function. It is a callback which will be run when the preview container disappears (when a user stops hovering over a link). Within the callback you have access to the preview ‘container’ via the this keyword and the hovered link via the first parameter.
  • containerID – This setting must be a String value and will determine the ID applied to the preview container. This is not for the plugin’s benefit; its only purpose is to accomodate CSS styling (within a stylesheet).
  • containerLoadingClass – This setting must be a String value and will determine the class added to the preview container when an image is loading and will be removed when the image has finished loading. If you’ve enabled preloading of images then don’t worry about this setting as it won’t have any effect.
  • thumbPrefix [NEW in V0.13] – This setting allows you to specify a thumbnail prefix for images. So, if you have an anchor with an href of ‘images/whatever.jpg’ and you have set this setting to ‘thumb_’ the preview-image will end up as ‘images/thumb_whatever.jpg’.
  • srcAttr [NEW in V0.2] – This setting allows you to specify what attribute to retrieve the image SRC from. So, if you have a link to a website and you want to show a screenshot of that website then you can store the location of the preview image in the ‘rel’ attribute of the anchor, leaving the ‘href’ untouched. E.g. $('a').imgPreview({srcAttr: 'rel'});. By default this setting is set to ‘href’. Along with this new option it is now possible to get an image preview when hovering over non-anchor elements – you must specify the right ‘srcAttr’ though.

Download

Demo

Various demonstrations of the plugin can be found over here: https://j11y.io/demos/imgPreview/full/

As always, please let me know about any bugs, concerns or questions in the comments below! 🙂

Thanks for reading! Please share your thoughts with me on Twitter. Have a great day!