Trouble with Lightbox html coding in...

User 2432550 Photo


Registered User
105 posts

Can someone please walk me through how to put a Lightbox in my Visual Site Designer site? I have looked at the Progrower steps for adding a colorbox and have watched a tutorial that makes it seem simple, but something isn't adding up somewhere.

I downloaded lightbox2 and added all those files (and the jQuery) to the root folder.

My body html is :
<a href="Revolt in the Studio Session I #1.png" rel="lightbox"><img src="Revolt in the Studio Session I #1thumb.png" /><a/>
<a href="Revolt in the Studio Session I #2.png" rel="lightbox"><img src="Revolt in the Studio Session I #2thumb.png" /><a/>

My header html is :
<link href="css/lightbox.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/lightbox.js"></script>

The "Revolt in the Studio Session I #1" etc is just my image file names.

What am I doing wrong? When I preview it, nothing shows up but the red Xs. Thanks for your help!
User 187934 Photo


Senior Advisor
20,271 posts

Hi Tara,
Can you share a link to the page your trying to get it working on?:)
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

It hasn't been published yet...
User 187934 Photo


Senior Advisor
20,271 posts

I've never used Lightbox but I know enough to look through your source code for problems.
Here's what I would try to rule out a few problems.
Click "Preview" in VSD
Now right click off to the side of the page and select "View Page Source"
Now scroll down looking for blue <script> tags that link to JQuery files and click on them.
If you get a page that has a lot of code that you can't understand then the file is linked properly and added to your VSD site. If you get some code and it says can't be found or missing then that file has not been added to your site properly. After you click these links and confirm one way or the other, right click and you will get a menu where you can click "Back" to go back to your page and continue clicking the blue links confirming each one that works or doesn't work. Write down the ones that don't and add those to your site using the add files tool.
If you don't find anything missing then you may want to publish the site to your S-Drive account so we can at least look at it.:)
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

Ok, sorry I'm new at html.. I published it here, have just started and been trying to figure out the lightbox before I go forward. - http://tarajohnson.coffeecup.com/

Some of the html I put in myself is from your progrower site.. Thanks so much for your help with this, I appreciate it!
User 187934 Photo


Senior Advisor
20,271 posts

All the files that your suppose to add to your site aren't on the server.
Use the add files tool and add the files in these links to the proper location. You can come back here and click on the links to check if their on the server.:)
http://tarajohnson.coffeecup.com/colorbox/colorbox.css
http://tarajohnson.coffeecup.com/colorb … olorbox.js
http://tarajohnson.coffeecup.com/css/lightbox.css
http://tarajohnson.coffeecup.com/js/jquery-1.7.2.min.js
http://tarajohnson.coffeecup.com/js/lightbox.js
http://tarajohnson.coffeecup.com/Revolt … I%20#2.png
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

Are these things that are all included in the Lightbox2 download? I added every file that was included in the folder...

I don't know what I'm doing wrong :(
User 187934 Photo


Senior Advisor
20,271 posts

Yes they should be included.If you can preview it in the files they include then their there.:)
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

I have added all the files that are in the folder. The only files missing are the colorbox ones.. what I downloaded from the lightbox2 website didn't include those.

Is my html code that I put above right?

(Sorry about all the back and forth, but I'm just not getting anywhere)
User 187934 Photo


Senior Advisor
20,271 posts

Here's the problem.
You put the files in the root of your site instead of the folders like the links show.
these ar missing.
http://tarajohnson.coffeecup.com/colorbox.css
http://tarajohnson.coffeecup.com/jquery.colorbox.js

These are there
http://tarajohnson.coffeecup.com/lightbox.css
http://tarajohnson.coffeecup.com/jquery-1.7.2.min.js
http://tarajohnson.coffeecup.com/lightbox.js
You'll need to adjust the links in your html to their proper locations.
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.