Colorbox verses Visual Lightbox -...

User 187934 Photo


Senior Advisor
20,265 posts
Online Now

Here's a quick version for you to get started. I'll dbl check everything tomorrow again when I get a chance.
http://progrower.coffeecup.com/shadowbox.html
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 403435 Photo


Registered User
199 posts

Thanks Rolly, As soon as I wake up more I'm going to try this. This is great! Does it matter where I put the shadowbox.js, the shadowbox.css and the close image? Can I substitute the file names of the videos for the file names of the pictures? Thank you so much. You make things that appear too hard to attempt seem so very easy.
User 38401 Photo


Senior Advisor
10,951 posts

Hiya Sarah,

Looks like the code has the .js and .css files inside a folder called shadowbox so just make a folder in your main website directory and name it that and put the files inside there.

Read through the entire page he posted and I think most of your questions are answered there. Has step by step instructions for what to do with the files and images (including the close image which is considered an image) and where to put them etc.

The File names can be whatever you want them to be so if you're planning to use this for videos, then the images would be the image names and the video links would be the video names. This would open the video when clicking the image on the gallery. Do like shown below but replace the information highlighted with your own.

The href part highlighted below would be your video directory and file name.
The src part highlighted below would be your image name that when clicked takes you to the video.

<a href="shadowbox/images/forsythia.jpg" rel="shadowbox[plants]"><img src="shadowbox/images/forsythiatn.jpg" alt="Forsythia" title="Forsythia bush" /></a>

If your video directory resides outside of the shadowbox directory you'll need to add a ../ to the front of the video directory like so:

<a href="../yourvideodirectory/yourvideoname.ext" rel="shadowbox[yourvideocategory]"><img src="shadowbox/images/yourimagethumbnailname.ext" alt="yourvideoinfo" title="yourvideoinfo for caption on zoomed box" /></a>

Hope that helps and I'm sure Rolly will be around soon to further assist you :)
User 403435 Photo


Registered User
199 posts

Thank you JoAnn, You and Rolly are making things so doable. When I first read instructions it is so intimadating that I usually give up before I try something. It is so hard for me to learn by reading. Much easier by watching or hearing. Guess my reading eyes don't connect to my brain. Anyway, thank you so very much. You both have made this understandable and I feel more confident that maybe I can do it.
User 38401 Photo


Senior Advisor
10,951 posts

Glad it helped Sarah, I know how you feel, reading instructions is definitely not my strong point either lol. I'm a hands on person as well so don't feel bad about that, just learn as ya go :) Enjoy!
User 187934 Photo


Senior Advisor
20,265 posts
Online Now

I put the link setup for videos on there for you.:)
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 403435 Photo


Registered User
199 posts

Thanks, JoAnn and Rolly, Now to try to put things all together. What a challenge. As soon as I get it done I will give you a link so that you both can see what great teachers you are. Thanks again!



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.