How to group multiple images in one Thumbnail?

Do you have a gallery and you realized you might need to group related images together into single thumbnail? The main purpose is to allow your visitors to have greater ease of navigation and experience while browsing the gallery. For example, you have a list of product A-Z that you like to show them in different perspectives. When your visitors click on the thumbnail of product A; he or she can see the top, bottom, front and side view of product A.

Steps to group Images Together in Single Thumbnail?
The first thing is required you to install a Wordpress plugin called Lightbox Plus and by tweaking it with a little code, you can easily achieve what you want.

1. You can download the Lightbox Plus directly from Wordpress.org.
2. Before you can use it, you need to install and activate it.
3. You can check out the installation instruction of Lightbox Plus from this post.
4. After you have done the setting, you can start adding images to your page/post.
5. If, for example, you are the restaurant owner and you are going to showcase your menu photos in your gallery page.
6. So go to the gallery page and click on the “Add an image” icon on top of the editor and add the group of images you want individually into the page.
7. Now you will need to edit the html code so click on the HTML tab on top of the editor and you can see the code such as the following:
   (Note: Your URL and images should be different from below.)

<!--First Group of Images: Food -->
<a title="food" rel="lightbox[food]" href="http://demo.mydomain.com/wp-content/uploads/2011/03/pizza-MH900182722.jpg"><img src="http://demo.mydomain.com/wp-content/uploads/2011/03/pizza-MH900182722-300x300.jpg" width="300" height="300" /></a>

<a title="french fies" rel="lightbox[food]" href="http://demo.mydomain.com/wp-content/uploads/2011/03/j0424373.jpg"> </a>

<a title="pizza" rel="lightbox[food]" href="http://demo.mydomain.com/wp-content/uploads/2011/03/j0422281.jpg"> </a>

1. In order to group images together, you will need to insert a HTML tag “rel” into the <a href> link such as rel="lightbox[food]" as shown in the screen capture.
2. The first line of code is the image where it will show as the thumbnail.
3. As for the rest of images, you will not need them to show up so delete the <img> code and just leave the <a href> link will do.
4. But remember to add in rel="lightbox[food]" into the <a href> code too.
5. The final code will look like the screen capture as below:

<!--First Group of Images: Food -->
<a title="food" rel="lightbox[food]" href="http://demo.mydomain.com/wp-content/uploads/2011/03/pizza-MH900182722.jpg"><img src="http://demo.mydomain.com/wp-content/uploads/2011/03/pizza-MH900182722-300x300.jpg" alt="" width="300" height="300" /></a>

<a title="french fies" rel="lightbox[food]" href="http://demo.mydomain.com/wp-content/uploads/2011/03/j0424373.jpg"> </a>

<a title="pizza" rel="lightbox[food]" href="http://demo.mydomain.com/wp-content/uploads/2011/03/j0422281.jpg"> </a>

1. Click on “Update” to save and you can check if it is working by going to your gallery page.
2. If you want to add another thumbnail, just repeat the same steps as above to achieve it. For example, to add another group “Drink”, the code will be as follow.

<!--First Group of Images: Food -->
<a title="food" rel="lightbox[food]" href="http://demo.mydomain.com/wp-content/uploads/2011/03/pizza-MH900182722.jpg"><img src="http://demo.mydomain.com/wp-content/uploads/2011/03/pizza-MH900182722-300x300.jpg" alt="" width="300" height="300" /></a>

<a title="french fies" rel="lightbox[food]" href="http://demo.mydomain.com/wp-content/uploads/2011/03/j0424373.jpg"> </a>

<a title="pizza" rel="lightbox[food]" href="http://demo.mydomain.com/wp-content/uploads/2011/03/j0422281.jpg"> </a>

<!--Second Group of Images: Drink -->
<a title="Drinks" rel="lightbox[drinks]" href="http://demo.mydomain.com/wp-content/uploads/2011/03/ist2_6972667-multi-fruit-jelly.jpg"><img src="http://demo.ehomepreneur.com/wp-content/uploads/2011/03/ist2_6972667-multi-fruit-jelly-199x300.jpg" alt="" width="199" height="300" /></a>

<a title="Volka" rel="lightbox[drinks]" href="http://demo.mydomain.com/wp-content/uploads/2011/03/ist2_5527686-jello-in-glasses.jpg"> </a>

<a title="Red Sling" rel="lightbox[drinks]" href="http://demo.mydomain.com/wp-content/uploads/2011/03/ist2_1167718-cranberry-juice.jpg"> </a>

Once you have added the code, you should be able to see each thumbnail has its own group of related images.