Please forgive my absolute ignorance on the subject of web design. I have created my entire website without knowing the slightest bit about code. I would like to use lightbox2 on my website but haven't a clue how to even begin. I don't even know what jquery is and I feel like I'm being spoken to in a foreign language without the first clue about syntax!

Can some kind, patient individual please point me towards a tutorial catering towards "lightbox2 for absolute idiots?" or perhaps explain in layman's terms how to go about this? I need to specifically know how to use it in coffeecup because most of the tutorials I've found deal with dreamweaver (the coffeecup one on youtube did not shed much light).

This is the gallery for which I am trying to create image popups in lightbox.
http://www.cherubnest.com/Gallery-Rosette.html

As you can see, I currently have the thumbnails set up as mouseover buttons (I would love to keep the mousover functionality of the buttons, if I can)

This is what I'm assuming I have to do.
I have to download the lightbox2 folder from here http://lokeshdhakar.com/projects/lightbox2/ and put it who knows where once it's downloaded.
I need to click on "add html" on VSD and create an object with it. In the header section of the prompt that appears, I need to enter the top two bits of code in the "how to use" section of the site.

That is
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/lightbox.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />

in the body part of the html prompt, I copy and paste the following
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

but in this case I change the name of image-1 to the one I'm trying to apply and "image #1" as well. Not sure which is the thumbnail and which the enlarged image.

How on earth do I direct the site to my images? Am I supposed to upload the images somewhere? Do I put them in the coffeecup website folder on my desktop?

And where on earth does jquery come in? Is that more stuff I have to download and paste?

I'm sure I have more questions but if someone could get me this far I would be so appreciative!

Thank you!
Kate.

Eric is very patient and has many tutorials and examples on his web site. Check out his Colorbox and see if that will work instead of Lightbox. If not then I'm sure it is similar. If not I'm sure Eric will chime in soon.

http://progrower.coffeecup.com/colorboxslideshow.html

Thank you, Gunsmoke. This looks brilliant!
The images folder referenced on the tutorial- is that the folder on my harddrive where all the coffeecup web images are automatically loaded, or do I have to upload something to my website? I'm sorry, these questions must seem so basic!

I guess where I'm confused is "Add a folder to the Root of your site and call it colorbox."
Not sure what the root is here.

No problem, easy to solve. In VSD go to the top menu and select 'edit'. Then drop down and select 'add files'. This will open up a new box. In that new box click on the folder icon with the little plus sign on it, then type in a folder name 'colorbox' if that is what it is suppose to be. Don't hit the 'Enter' key after typing the name or it will disappear! Hit the 'Tab' key instead. Create the folders that the tutorial talks about, then use the 'Add Files' icon with the little plus to add the specific files in each folder. When you are finished just click 'ok'.

This adds the folders and files to the VSD site so that when you upload it to the net, everything goes where it should. It also gives you the ability to 'preview' your site before uploading it to the net.

Let us know if you need more.

Thank you, Gunsmoke. That explanation was really clear. I think I managed everything but when I clicked on preview, instead of opening up a preview of the site, it opened up an txt document in notepad. Very odd! Any idea why?
Thanks so much for your help!

Oops, now just realised that every page preview is opening up notepad rather than the preview of the website. Wondering what on earth I did this time!

Right click any html document then in the menu choose "Open With" then "Choose default program"

Thank you, Eric. Your website is so helpful.
Unfortunately, I'm still not able to get the colorbox to show up yet. I feel like I'm close but it's not able to retrieve the image for some reason. I'm sure my image source is not correct, and to be honest, I'm not really sure what "alt" is supposed to be.
If you wouldn't mind taking a look at my code, I would really appreciate it.

<a class='group4' href="images/AlexNurs1.jpg" style="border: none;" title="Alex's Nursery"><img src="images/AlexNurs1.jpg" width="180" height="139" alt="images/AlexNurs1.jpg" title="" border="0" /></a>

I have the image uploaded to the root folder, under "images." Is that the correct spot?

When I preview the site, the correct size outline of a thumbnail shows up, with a little broken page icon inside. Then when I click on the image, it opens another page that says the following

This webpage is not found
No webpage was found for the web address: file:///C:/Users/Kate/AppData/Local/Temp/vsd_tmpdir/images/AlexNurs1.jpg
Error 6 (net::ERR_FILE_NOT_FOUND): The file or directory could not be found.

This didn't start happening until I copied the code over to another page. Before, it was opening a colorbox outline with the arrows/ x but there was no image inside. Hope this makes sense.

Okay, sorry to keep updating before you've had a chance to respond but I'd rather not waste your time. I've figured out how to get the image. The problem was that the image source should have been colorbox/images/AlexNurs1.jpg and I was leaving out the colorbox part.
Now it's still opening the image in a separate tab. Perhaps I have to add the edit header part in again.

Update 2: Okay, adding the code to the edit-header on the individual page I was working on worked. The outline of the box looks a little funny for some reason. I'd rather just have the image open up. Is it possible to edit the PNG image to remove the thick black border?

oh yes, it's definitely not opening up correctly. Will try to attach an image of the screen.