lightbox image viewer implementation

**mudge** · 06-29-2007, 12:38 PM

lightbox image viewer

http://www.dynamicdrive.com/dynamici...tbox/index.htm

Hello
I’m new to DD and to html, scripts etc but would really love the above script working on my Frontpage photo based website. Currently all the larger versions of my thumbnail images are on separate pages of my web. For this ‘image viewer script do I need to make a copy of all my large images and place them in a separate folder or can I just link to each image where they are now?
Also, is it fairly straightforward for a newbie to implement this?
Thanks - mc

**Veronica** · 06-29-2007, 02:34 PM

You should be able to keep the images where they are. Just make sure that the path (location) is correct in your html script.

Yes, it's pretty simple to implement. Just follow the directions. If you are using Frontpage, it would be best to insert the links in Source or HTML View. Also, start with one picture and get it to work before doing all your pics.

If you have problems, come on back, post a link to your page, and someone can look at it and help.

**mudge** · 06-29-2007, 05:33 PM

Thank you Veronica for the reply and suggestion re Frontpage. I'm in the process of changing hosts so thought it would be nice to change the look of my site. Will give the script a go within the next week or so and hopefully things will go without any problems. Good to know if i do encounter any i can get some help

**mudge** · 07-01-2007, 11:04 PM

O.K. i downloaded the zip file and named a folder on my frontpage 'lightbox'. I then unzipped the zip (new to all of this so may have done things wrong) and added the five files - copy and pasted each one into the folder. I think i added the part that should go into the head section correctly but not 100% sure.
Uploaded the site via frontpage and just checked the first five images on top which were the only ones i did to see if it worked and sadly they didn't. The page if anyone can check where i might have gone wrong or need to add is here:
photos-london.com/london2.htm

Thanks for any help in sorting this out. Would be great to see it working

**mudge** · 07-02-2007, 07:34 PM

any help please? Below is the relevant part of the view source page if it helps. if it looks a mess it is frontpage! I've highlighted in blue the bits that i've placed as per instructions via the DD script. THANK YOU

<title>quality photos of London. British images from the English capital</title>
<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen"/>
<script type="text/javascript" src="lightbox.js"></script>

</head>

<body link="#808080" alink="#C0C0C0" bgcolor="#3D3D3D" text="#FFFFFF" vlink="#C0C0C0">

<td align="center" height="19" width="107"><a href="demo.htm" rel="lightbox"><img border="2" src="demolew_small.jpg" width="94" height="106"></a></td>
<td align="center" height="19" width="106"><a href="girl.htm" rel="lightbox"><img border="2" src="girl_small1.jpg" width="100" height="93"></a></td>
<td align="center" height="19" width="108"><a href="cityblds1.htm" rel="lightbox"><img border="2" src="cityblds1_small1.jpg" width="100" height="77"></a></td>
<td align="center" height="19" width="107"><a href="london/london0002.htm" rel="lightbox"><img border="2" src="london0002_small.jpg" alt="london0002.jpg (97751 bytes)" width="95" height="103"></a></td>
</tr>

**jscheuer1** · 07-03-2007, 03:30 PM

Code:

http://www.photos-london.com/lightbox.js

and:

Code:

http://www.photos-london.com/lightbox.css

Are not on your server. There could be other problems, but the script & stylesheet (as well as the other resource files*) must be on the server in the location indicated in the page's code.

Additionally, the href for the rel="lightbox" links must be the address of the larger image, not the address of a page.

*overlay.png, loading.gif, close.gif

**mudge** · 07-03-2007, 03:42 PM

Hi and thanks for checking. They are there but i put them in a folder named 'lightbox' see link http://www.photos-london.com/lightbox/
Is this wrong? and if so how should i have uploaded them? Cheers

**jscheuer1** · 07-03-2007, 03:57 PM

See my previous message, I just updated it to include more information. However, your new question requires additional information as well. If you put the files on the server in a folder, that location must be reflected on the page that uses those resource files. Example for your demo page:

Code:

<link rel="stylesheet" href="/lightbox/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="/lightbox/lightbox.js"></script>

You still need to make the href of the rel="lightbox" links be an image address, not a page address. And, the path to the other resource files:

*overlay.png, loading.gif, close.gif

needs (for this to work with all browsers that support lightbox and with all page locations on your site) to be given in the lightbox.css and lightbox.js files wherever they are mentioned in those files. You can skip this last bit at first, just to get the basic effect working.

**mudge** · 07-03-2007, 10:29 PM

Thanks you for pacing me gently through this. Just did a quick read of your answer and it'll take a bit of time for it to sink in but i added the folder name 'lightbox' to the head code as instructed, re-uploaded and clicked on an image and the page went dark as it does in the example script. Just got the other parts to work now

Many Thanks

Originally Posted by jscheuer1

See my previous message, I just updated it to include more information. However, your new question requires additional information as well. If you put the files on the server in a folder, that location must be reflected on the page that uses those resource files. Example for your demo page:

Code:

<link rel="stylesheet" href="/lightbox/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="/lightbox/lightbox.js"></script>

You still need to make the href of the rel="lightbox" links be an image address, not a page address. And, the path to the other resource files:

*overlay.png, loading.gif, close.gif

needs (for this to work with all browsers that support lightbox and with all page locations on your site) to be given in the lightbox.css and lightbox.js files wherever they are mentioned in those files. You can skip this last bit at first, just to get the basic effect working.

Thread: lightbox image viewer implementation

Thread Tools

Search Thread

lightbox image viewer implementation

Bookmarks

Bookmarks

Posting Permissions