Trouble with Lightbox html coding in...

User 38401 Photo


Senior Advisor
10,951 posts

Hiya Tara,

The [set1] is just a group code so that you can view multiple images in one shot. If you have them in there singly and not connected in any way, then no arrows are going to show up (Unless you're using something like Visual Lightbox2 which automatically does all this for you).

What you need to do now is change the word "set1" to whatever group of photos you are putting together. You can name this anything you want to such as if you have 100 images you want to show, and some are Green and some are REd and some are Blue, etc. Group those images together and put the category name of whichever color they belong to in that set of square brackets [blue] and then only the images that have that grouping will show together. This gives you the ability to create multiple slide shows in a sense in one page and in one set of thumbnails or links.

So right now you have 2 images linked together in a gallery. Lets say you add 8 more images and they are 2 different types of designs that you want to focus on like say Yellow Flowers and Red Flowers. You can then change one set of images to the grouping [redflowers] and the other grouping of images to [yellowflowers].

There would be 10 images, but only 5 of them would show when clicking on the red ones and visa versa with the yellow ones.

The reason this is so great is you can separate your images by category on the page with titles above them like

This Group is the Yellow Flower Group

<a href="image1.png" rel="lightbox[yellowflowers]"><img src="image1thumb.png" /><a/>
<a href="image2.png" rel="lightbox[yellowflowers]"><img src="image2thumb.png" /><a/>
<a href="image3.png" rel="lightbox[yellowflowers]"><img src="image1thumb.png" /><a/>
<a href="image4.png" rel="lightbox[yellowflowers]"><img src="image2thumb.png" /><a/>
<a href="image5.png" rel="lightbox[yellowflowers]"><img src="image1thumb.png" /><a/>

This Group is the Red Flowers Group

<a href="image1.png" rel="lightbox[redflowers]"><img src="image1thumb.png" /><a/>
<a href="image2.png" rel="lightbox[redflowers]"><img src="image2thumb.png" /><a/>
<a href="image3.png" rel="lightbox[redflowers]"><img src="image1thumb.png" /><a/>
<a href="image4.png" rel="lightbox[redflowers]"><img src="image2thumb.png" /><a/>
<a href="image5.png" rel="lightbox[redflowers]"><img src="image1thumb.png" /><a/>

Keep in mind though that if you separate the groups using the categories you should visually separate them on the page too so people realize it or they will wonder why they aren't seeing all the images when they click the arrows. If you want them to all show then just make one category like the [set1] and all images on that page will show.

Gives you great categorization facilities. Keep in mind though that the rel tag does not validate, but I don't believe it hurts anything either as we've used it for many projects :) Enjoy!
User 2432550 Photo


Registered User
105 posts

I got the Lightbox to work, but the page seems to act up when I try to put 2 html codes and separate them into 2 groups. All the way at the bottom is some extra arrows and Cancel button. How do I remove this?

http://tarajohnson.coffeecup.com/PastWork.html

User 187934 Photo


Senior Advisor
20,271 posts

You don't copy the code that's in the header HTML only the body then tweak the image src and href.:)
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2432550 Photo


Registered User
105 posts

Wow that was easy, thank you so much!!
User 187934 Photo


Senior Advisor
20,271 posts

Looks like you still have some extra stuff as there's a light box loading image at the bottom.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.