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.

<a href="http://arju-on-it.com/wp-content/uploads/HKMagazine.jpg"><img class="alignleft" style="border: 1px solid black; margin-left: 3px; margin-right: 3px;" title="HK Magazine" src="http://arju-on-it.com/wp-content/uploads/HKMagazine.jpg" alt="HK Magazine Interviews Fion Chang AKA Hong Kong's Makeup Magician" width="60" height="70" /></a>

<a href="http://arju-on-it.com/wp-content/uploads/HK Brides evening gowns.jpg"><img class="alignleft" style="border: 1px solid black; margin-left: 3px; margin-right: 3px;" title="HK Brides" src="http://arju-on-it.com/wp-content/uploads/HK Brides evening gowns.jpg" alt="Elegant Evening Gown" width="60" height="70" /></a>

<a href="http://arju-on-it.com/wp-content/uploads/HK Brides floral evening gown.jpg"><img class="alignleft" style="border: 1px solid black; margin-left: 3px; margin-right: 3px;" title="HK Brides" src="http://arju-on-it.com/wp-content/uploads/HK Brides floral evening gown.jpg" alt="Floral Evening Gown" width="60" height="70" /></a>

<a href="http://arju-on-it.com/wp-content/uploads/HK Brides gold evening dress.jpg"><img class="alignleft" style="border: 1px solid black; margin-left: 3px; margin-right: 3px;" title="HK Brides gold" src="http://arju-on-it.com/wp-content/uploads/HK Brides gold evening dress.jpg" alt="Gold Evening Dress" width="60" height="70" /></a>

<a href="http://arju-on-it.com/wp-content/uploads/HK Brides jade evening dress.jpg"><img class="alignleft" style="border: 1px solid black; margin-left: 3px; margin-right: 3px;" title="HK Brides jade" src="http://arju-on-it.com/wp-content/uploads/HK Brides jade evening dress.jpg" alt="Jade Evening Dress" width="60" height="70" /></a>

<a href="http://arju-on-it.com/wp-content/uploads/HK Brides pink evening gown.jpg"><img class="alignleft" style="border: 1px solid black; margin-left: 3px; margin-right: 3px;" title="HK Brides pink" src="http://arju-on-it.com/wp-content/uploads/HK Brides pink evening gown.jpg" alt="Pink Evening Gown" width="60" height="70" /></a>

<a href="http://arju-on-it.com/wp-content/uploads/HK Brides scarlet red evening gown.jpg"><img class="alignleft" style="border: 1px solid black; margin-left: 3px; margin-right: 3px;" title="HK Brides scarlet" src="http://arju-on-it.com/wp-content/uploads/HK Brides scarlet red evening gown.jpg" alt="Scarlet Red Evening Gown" width="60" height="70" /></a>

<a href="http://arju-on-it.com/wp-content/uploads/bridal bouquet.jpg"><img class="alignleft" style="border: 1px solid black; margin-left: 3px; margin-right: 3px;" title="Bridal Magazine" src="http://arju-on-it.com/wp-content/uploads/bridal bouquet.jpg" alt="Bridal Bouquet Couple" width="60" height="70" /></a>

<a href="http://arju-on-it.com/wp-content/uploads/my garland.jpg"><img class="alignleft" style="border: 1px solid black; margin-left: 3px; margin-right: 3px;" title="Bridal Magazine Garland" src="http://arju-on-it.com/wp-content/uploads/my garland.jpg" alt="My Garland" width="60" height="70" /></a>

<a href="http://arju-on-it.com/wp-content/uploads/greenery.jpg"><img class="alignleft" style="border: 1px solid black; margin-left: 3px; margin-right: 3px;" title="Bridal Magazine wedding" src="http://arju-on-it.com/wp-content/uploads/greenery.jpg" alt="Wedding Greenery" width="60" height="70" /></a>

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

<a href="http://arju-on-it.com/wp-content/uploads/HKMagazine.jpg"><img class="alignleft" style="border: 1px solid black; margin-left: 3px; margin-right: 3px;" title="HK Magazine" src="http://arju-on-it.com/wp-content/uploads/HKMagazine.jpg" alt="HK Magazine Interviews Fion Chang AKA Hong Kong's Makeup Magician" width="60" height="70" /></a>

<a href="http://arju-on-it.com/wp-content/uploads/HK Brides evening gowns.jpg"> </a>

<a href="http://arju-on-it.com/wp-content/uploads/HK Brides floral evening gown.jpg"> </a>

<a href="http://arju-on-it.com/wp-content/uploads/HK Brides gold evening dress.jpg"> </a>

<a href="http://arju-on-it.com/wp-content/uploads/HK Brides jade evening dress.jpg"> </a>

<a href="http://arju-on-it.com/wp-content/uploads/HK Brides pink evening gown.jpg"> </a>

<a href="http://arju-on-it.com/wp-content/uploads/HK Brides scarlet red evening gown.jpg"> </a>

<a href="http://arju-on-it.com/wp-content/uploads/bridal bouquet.jpg"> </a>

<a href="http://arju-on-it.com/wp-content/uploads/my garland.jpg"> </a>

<a href="http://arju-on-it.com/wp-content/uploads/greenery.jpg"> </a>

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,

<a href="image_url"><img src="imageurl" alt="Arju on IT" width="60" height="70" /></a>

<a href="image_url"> </a>

<a href="image_url"> </a>


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