Our Photo Gallery

To do the coding to move through a group of images, in your code add the group name. In my sample, the group name is New Orleans.
<a href="gallery/neworleans3.jpg" rel="lightbox[New Orleans]" title="French Quarter Buggy Ride">
<figure><img alt="New Orleans" src="gallery/neworleans3small.jpg" width="150" height="100" class="image-gallery" /><figcaption>Add Your Description</figcaption></figure></a>

The larger images are not responsive.

Fun in New Orleans

The  coding below allows for viewing for one picture at a time. It also shows the gallery in a field set.

Deep Sea Fishing

You can add as many lightboxes as you choose! It's easy to do. How to add the Lightbox

1. Use the "split" view so you can see the code.

2. Insert the small photo, then link it to the larger photo. (You should have a large image and a small image for each photo.)

3. You will see something like this in the code view: <a href="images/yourphotoname.jpg">

4. Add this code right after the .jpg" AND right before the closing > rel="lightbox" title="My New Picture"

5. Your code will look like this: <a href="gallery/neworleans3.jpg" rel="lightbox[New Orleans]" title="French Quarter Buggy Ride">
<figure><img alt="New Orleans" src="gallery/neworleans3small.jpg" width="150" height="100" class="image-gallery" /><figcaption>Add Your Description</figcaption></figure></a>>

6. You can change the words "French Quarter Buggy Ride" to anything you would like. Do not erase the quotation marks!

7. To make the link appear under the picture, you will need to edit the "figcaption":
<a href="gallery/neworleans3.jpg" rel="lightbox[New Orleans]" title="French Quarter Buggy Ride">
<figure><img alt="New Orleans" src="gallery/neworleans3small.jpg" width="150" height="100" class="image-gallery" /><figcaption>Add Your Description</figcaption></figure></a>

8. Add the gray border class in your code: class="image-gallery"
<a href="gallery/neworleans3.jpg" rel="lightbox[New Orleans]" title="French Quarter Buggy Ride">
<figure><img alt="New Orleans" src="gallery/neworleans3small.jpg" width="150" height="100" class="image-gallery" /><figcaption>Add Your Description</figcaption></figure></a>

9. Your finished gallery photo code will look like this:
<a href="gallery/neworleans3.jpg" rel="lightbox[New Orleans]" title="French Quarter Buggy Ride">
<figure><img alt="New Orleans" src="gallery/neworleans3small.jpg" width="150" height="100" class="image-gallery" /><figcaption>Add Your Description</figcaption></figure></a>

10. See your new lightbox in action!