Sunday, December 4, 2011

Creating an on hover lightbox plugin using jquery

Welcome to yet another article of jquery. Here we will be creating an "onhover lightbox". I had seen this kind off lightbox on few portfolio websites i was going through recently.




Demo Link: http://designmantra.x10.mx/labs/hoverlightbox/

The procedure to create this very simple.

1. We first detect if there is a lightbox container on the page, if it doesnot exist create one using javascript.

2. Create an image object of target to be loaded. On the onload event of that object detect the width of the image and calculate the margin from the left.

Formula for that would be
(screen width - image width)/2

Then fade in the lightbox div and assign the margin value to its and change or set src attribute of image tag within this div.

The source code for this can be downloaded from
http://designmantra.x10.mx/labs/hoverlightbox/hoverlightbox.zip