JS animated. How to work with prettyPhoto gallery

This tutorial will show you how to work with prettyPhoto gallery in JS animated template.

Let’s see how to add our own images and expand the gallery.

1. Open the needed index file in Adobe Dreamweaver software (you can find the name of that file in the browser address bar).

2. Turn off the Live View in order to see the block structure.

3. Using the Split Mode, select desired image to see it’s code.

4. “lightbox-image” class is used for thumbnails displaying.

5. Change the thumbnail image to your own one in the following code:

<figure class="lightbox-image"><img src="images/page3-img9.jpg" alt="" />

6. “img-indent” class is used for lightbox image displaying.

Put your own lighbox image in the following code:

<figure class="img-indent"><a href="images/slide-3.jpg" alt="" />

Save the changes and preview the page in your browser. Lightbox image has been successfully added.

Let’s see how to expand the gallery.

1. Select the last gallery block.

2. And duplicate it.

Gallery has been successfully expanded. You are free to use your own images for every gallery item.

This is the end of the tutorial. Let us know if you have any questions.

Feel free to check the detailed video tutorial below: