Friday, October 15, 2010

How to display multiple images from one thumbnail using lightbox

With lightbox wordpress plugin you can present your group of images in a slick window, while darkening the rest of the page which makes your site professional looking. Now if there is two many images then you might think about group of images. For example, you can think in one group there will be 50 images and in another group there will be 60 images. Displaying 50 and 60 images in one page increases loading time as well as space is wasted and make sites unprofessional looking. So you might wonder how to keep only one thumbnail and clicking on thumbnail will load multiple images.

Let's say we have the following codes, which is used to display 10 images and we have 10 thumbnails through lightbox. Now our goal will be display only first image thumbnail and upon clicking on first image we can go backward and forward to display rest of the images.

The idea we need to make the first image to be loaded via tag and for rest of the images there will be no tag. So re writing my code as following.

The above code will work and it will display multiple images under one thumbnail. Since it is defined via the img tag, but the others have no content, but will still be parsed by the lightbox script.

In a nutshell, to make one thumbnail and multiple images write code in this way,

An important note is to follow the space and indentation as required. If you don't follow lightbox-2 code will not work.

No comments:

Post a Comment