Finally Got Lightbox working through...

Mar 31st, 2010 at 07:45 AM
User 180142 Photo

Sue
Ambassador
1,879 posts

Just so you all know, I dreamed about CoffeeCup Easter Eggs last night--ALL NIGHT!!!! OMG....
Sue aka CR Azy
------------------
http://www.marcothroughtheyears.com
http://www.deforestkelleyuniverse.com
http://www.robertcarlylemoments.com
Jun 13th, 2010 at 09:00 AM
User 2101251 Photo

http://www.ionu.co.uk
Registered User
4 posts

Hi Marc any chance you could help me with lightbox in VSD the way you've done it is exactly how i would like my site to work.

Scott i tried the instruction on the link you provided but i'm afraid i got stuck here:

Replace file.ext with the name of the file you want to display inside the ColorBox. Leave the rel value (e.g. example1) alone. Any HTML objects that use the same rel value will share the ColorBox, and left/right navigation arrows will automatically be added just outside the contents of the ColorBox. The title value is is text you can use to describe what's being displayed in the ColorBox. It appears just outside the contents of the ColorBox.

i would like to have a page showing small resized image in a grid layout on my site and when a visitor click the images it then shows a bigger version of the picture in a light box then allows you to click next or previous for the rest of the images like on marc's site above, but im stuck. not sure what to put instead of file.ext or where the images should be located.

im afraid im a newby at this so any help would be greatly appreciated.
http://www.ionu.co.uk
Jun 13th, 2010 at 12:19 PM
User 38401 Photo

Jo Rice
Senior Advisor
10,951 posts

Hiya Simon,

I think the file.ext is the image/file/etc. that you want to be showing in the lightbox. In other words if you have a photo you want popping up in that colorbox, use that file's name. Since it can use more than just image files it may have other extensions (ext = file extension) so whatever the full name of your file would be is what goes there. Hopefully that helps?

As for where to put that, you put that exactly where the instructions have the file.ext in them, as in the line in number 30-4 of the instructions, the below bolded part is where that name of your file goes. Keep in mind that if it's not in the same directory as the colorbox files you'll want to put the full link in there instead of a relative link:

<a href="file.ext" rel="example1" title="Caption text">Link Text</a>

href=" " is exactly the same as if you were adding a link to your site rather than the colorbox so treat it that same way.

rel=" " tells the colorbox which setup to use. If you look in the colorbox files you downloaded you'll see there are multiple example folders. Each of these will most likely display the colorbox a little differently so you should test which one(s) you like and use them. You would upload the folder(s) (I would say just upload them all so you always have them available) and then reference inside the rel=" " part of the above line which one you want to use for that particular image or file. If you put example1 there it will display it with example1's settings, CSS setup etc. and if you put example2 it will use the settings and files inside the example2 folder and so on.

title=" " is of course just what the example says, a Caption to put on the image mouse over.

Link Text being what you would want to actually display text wise either on or below the photo, I'll assume below.

Please let me know if any of this is incorrect guys, I'm just looking at the files and making assumptions based on logic, but that doesn't mean my logic is always correct lol. Looks bout right to me is all I can say. Let me know if this answers your question at all too please Simon :)
Jo

http://elementsinwebdesign.com
Jun 21st, 2010 at 03:37 PM
User 291856 Photo

mmc
Registered User
55 posts

Not sure of i am adding the correct code to the header section on my html tool...
Here is the link of what I am tring to do using Lightbox with VSD 6.0..
Could anyone guess what code I am missing?
Jun 21st, 2010 at 03:40 PM
User 562592 Photo

The Philosopher
Registered User
2,038 posts

I think you forgot the link.
The philosopher has not done philosophy until he has acted upon the mere conviction of his idea; for proof of the theory is in the act, not the idea.

My Web Development Company: http://www.innovatewebdevelopment.com (Created with Coffee Cup Software).

My Personal Website: http://www.EricSEnglish.com
Jun 21st, 2010 at 10:40 PM
User 291856 Photo

mmc
Registered User
55 posts

...sorry , here is the link:

http://www.rilabradoodles.com/Page7.html
Jun 21st, 2010 at 11:00 PM
User 562592 Photo

The Philosopher
Registered User
2,038 posts

The first problem I see in your code is that you have <head> listed twice. That is enough of a problem to screw up everything on your page. You can only have <head></head> one time in your document.
The philosopher has not done philosophy until he has acted upon the mere conviction of his idea; for proof of the theory is in the act, not the idea.

My Web Development Company: http://www.innovatewebdevelopment.com (Created with Coffee Cup Software).

My Personal Website: http://www.EricSEnglish.com
Jun 21st, 2010 at 11:02 PM
User 562592 Photo

The Philosopher
Registered User
2,038 posts

Upon looking at the source code further, it all seems messed up to me. I know your using VSD, not sure if thats how it outputs the html code, but its really funky. I am not sure how the code listed could produce any webpage. Maybe someone more familiar with VSD should look into this.
The philosopher has not done philosophy until he has acted upon the mere conviction of his idea; for proof of the theory is in the act, not the idea.

My Web Development Company: http://www.innovatewebdevelopment.com (Created with Coffee Cup Software).

My Personal Website: http://www.EricSEnglish.com
Jun 22nd, 2010 at 03:24 PM
User 271657 Photo

paintbrush
Ambassador
3,816 posts

Eric, I think you're onto something with the double head sections. Whenever I've added stuff to VSD, I used the Edit Header option in the menu, so I take off any <head> tags that are on the code I'm copying - 'cause they're already there in VSD. Looks like a good place to start.
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
Jun 26th, 2010 at 07:20 PM
User 244141 Photo

Rod A.
Ambassador
1,209 posts

They're really some snazzy sites on this thread, and Marc, that site rocks...looks awesome.

add:I had really good success with videobox(have to modify the css), and smoothbox with VSD.
Web Design: https://www.websnoogie.com
Member - BBB: Websnoogie, LLC

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.