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

Creating Simple Image Slider Jquery Plugin

Today we will see how to create a simple image slider plugin using jquery. The demo can be seen here

demo: http://designmantra.x10.mx/labs/imageslider/

In here i will be explaining the logic used to build this.


Step 1: Assign css styling to the images which will be part of the slideshow. we will be positioning them absolutely positioning them and adding setting there display property to none.

Step 2: Then set the image display property to block for image you want show.

Step 3: We set a timer of 7 seconds after which jquery will check whether the active image is the last image or not.
If not the last image it will change the display property of next image to block and set display property to none for current image.
If its last image the it will change the display property of the 1st image.

We have also given 2 user controls by which user can move back and forth within these images. One control is pair of arrows that helps you move forward and backward in images.

The next set of controls are image controls which equal to the number of images. On clicking on these you can directly jump to any image.
When user clicks the index value of that element is determined and then the respective image is activated.
Feel free to download the code and experiment

Download code : http://designmantra.x10.mx/labs/imageslider/imageslider.zip