An image zoom/lightbox plug-in built using jquery. If you require a simple image preview this plug-in may be just what you’re looking for. Plug-in uses no external CSS files or images yet giving you the whole variety of options for customisation.

The code:

First of all include jQuery, jQuery easing plugin and the image zoom plugin (found to download at the end of this post) in the head section of your page.

Secondly, every image that the zoom plugin should apply to has to have the same class applied. In our sample we use ’krtgImgZoom’ class. 

However, if you have various groups of images or, let’s say two different galleries on the same page, and would like the image zoom plug-in to be styled differently for each of them, just use different classes.

A sample image with the class applied would look like this:

And lastly, add the following code before the closing of the body section. If you used multiple classes to separate images, each class has to have the plug-in applied separately:

Plug-in will use alternative (alt) text applied to each image as the desicription. If not found, description will be omitted from the display.

Following are the variables that can be changed to customise the appearance of the lightbox (we have mentioned the setting that was used in the sample code above in the square brackets for the easier track back):

• maximum box width [800] 
• maximum box height [640]
• colour of the border and description box [#cb5501]
• opacity of the border [0.8]
• font colour for the description box [#FFF]
• colour for the cover of the rest of the page [#EEE]
• width of the border [5]
• border radius [10]

Notes:

If image’s native size is smaller than the maximum size defined in the parameters it will appear in it’s native size.

If maximum box defined is bigger than the current viewport of the browser (might be a more common case on the mobile browsers) image will be sized down to fit within the current viewport.

All colours can be entered in either shorter 3 or full 6 character codes (#FFF or #FFFFFF).

Opacity should be provided in the range of 0 - 1. Older browsers may not display border opacity. In such case fallback non transparent colour will be applied.

Border radius may not work in the older browsers.

And that is it. If you’ve got any questions feel free to use the comment section below or drop us an email to blog@kartogram.co.uk

Regards,

SD