View Full Version : Adding a link in Lightbox image viewer 2.03

09-23-2007, 03:02 PM
1) Script Title: Lightbox image viewer 2.03

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm

3) Describe problem:

I would like to add a link to another web site (in a new window) next to the caption and image number that appear in the box at the bottom of the enlarged image. I believe I need to tweak the lightbox.js file, but I don't know how. Any helper?


09-23-2007, 03:33 PM


09-23-2007, 08:05 PM
Works great, thanks!

09-23-2007, 08:40 PM
Unfortunately there is one problem:

if I use your code in a slideshow, when I browse from picture to picture using the "PREV" and "NEXT" buttons, only the first enlarged image (the one I triggered by clicking on the thumbnail) shows the link. When I click "NEXT" the new enlargement only displays the image number, not even the title.

Any idea?

09-23-2007, 10:31 PM
I'd try something like so:

<a href="images/image-1.jpg" rel="lightbox[groupname]"
onmousedown="this.title='<a href=\'http://www.google.com/\'>Google</a>';"
onmouseout="this.title='<a href=\'http://www.google.com/\'>Google</a>';"
onmouseover="this.title='';"><img src="images/thumb-1.jpg" width="100" height="40" alt=""></a>

That should get everything lined up properly for the image grouping routines of the script. You can also add a descriptive title in the onmouseover event if you like and use it (for non-javascript enabled browsers) as the link's title attribute as well.

Think outside the lightbox. :)

09-24-2007, 02:08 AM
I implemented the latest code you sent but I'm facing exactly the same problem: only the thumbnail I click on first will show the link in the large window; if I click "NEXT" or "PREV" from there the only information I get in the box underneath is the image number and the close button. No title, no link ...


09-24-2007, 04:49 AM
Please post a link to the page on your site that contains the problematic script so we can check it out.

09-24-2007, 07:36 PM

It's a test page I created not accessible from the navigation, but will serve the purpose.

1. Once you are there click on the very last thumb in the lower-right corner
(xbox), you'll see that the large image will have a link to Google at the bottom.

2. Now x out of the large image and go back to the thumbs; click on another one, the "Boeing Aero eMagazine" for instance.

3. As the large version of it shows up, use the "NEXT" button in it to navigate to the Xbox image. Notice how this time, in the gray box beneath the image, only its number is visible (16/16) and nothing else.

Your help is highly appreciated, thanks!

09-24-2007, 09:26 PM
Your demo works fine here, even after following the procedure you outline in FF 2, Safari 3, IE 7, and Opera 9. Perhaps you need to clear your browser's cache.

09-25-2007, 01:42 AM
Apparently the only browser that doesn't like this solution is Safari 2.04 (Mac).
It works just fine everywhere else, as far as I could tell.

Thanks for the troubleshooting, John; we both learn something!:)

10-06-2007, 06:16 PM
Nope, it's not working across all browsers. I still see the same issue in FF (Mac).
go to this URL: http://055interactive.com/webtest.html
click on the 3rd thumb from the left in the bottom row
from the enlarged picture click "NEXT"

You'll only see "16/16" or "null"

If instead you click directly on the 4th thumb in the bottom row, you'll see a "View live" link above the "16/16"

This is driving me crazy ... :confused:

10-06-2007, 08:25 PM
Try upgrading to FF version. I don't have a Mac though, that's on a PC, but it works fine there.

10-07-2007, 12:08 AM
I just did; same thing ...

Is there anything else I could try? Should the javascript be tweaked somehow?
It must be an issue that other users have, it's a pretty common thing to have a link in an image gallery.

If you think of any solution I'll be happy to be the guinea pig and test it on my site.

Thanks! :)

10-07-2007, 02:46 PM
I just did; same thing ...

Is there anything else I could try? Should the javascript be tweaked somehow?
It must be an issue that other users have, it's a pretty common thing to have a link in an image gallery.

If you think of any solution I'll be happy to be the guinea pig and test it on my site.

Thanks! :)

It's possible that a tweak might help, but since I don't have the version of FF that you are talking about or the platform that you are using it on, it would be hard for me to advise you. I'd try upgrading to and see if that fixes it. If so, it is most likely just a bug in the implementation of FF anyway.

10-07-2007, 02:58 PM
I just looked at your source code and it would be better if you include the title attribute, try this:

<td width="24%" height="122" valign="top"><a href="images/web/emc_L.jpg" rel="lightbox[portfolio]"
title="<a target='_blank' href='emc_map/index.html'>View Live</a>"
onmousedown="this.title='<a target=\'_blank/\' href=\'emc_map/index.html\'>View Live</a>';"
onmouseout="this.title='<a target=\'_blank/\' href=\'emc_map/index.html\'>View Live</a>';"
onmouseover="this.title='';"><img src="images/web/emc.gif" width="165" height="115" border="0" alt=""></a> </td>
<td width="4%">&nbsp;</td>

Note: It is also a good idea to make the onmousedown and onmouseout versions the same, as I have in the above.

Also: This is not a bug of any browser, you just left out the title.

10-08-2007, 04:37 PM
I'll implement later today and report back.


10-09-2007, 04:18 AM
YES!! Finally! It works everywhere I tested it. Thanks for pointing out my error, sometimes you really need a second pair of eyes to see clearly ...

Thank you, thank you!!:)

01-05-2009, 06:20 PM
Hi, This thread has helped me some but I am still having some issues. I have a lightbox: [sites] that has 3 different slides related to it. I am trying to put a link to each site at the bottom of each slide and have them open in a new window. The first one works great. When I click on "next" sometimes the link is there and sometimes not. The first one opens in a new window the 2nd and 3rd do not. Here is my code for all 3:

<a href="assets/echoartsproductions.jpg" rel="lightbox[sites]" title="www.echoartsproductions.com"
onmousedown="this.title='<a target=\'_blank/\'href=\'http://www.echoartsproductions.com/\'>Click here to visit</a>';"
onmouseout="this.title='<a href=\'http://www.echoartsproductions.com/\'>Click here to visit</a>';">
<img src="assets/echoArts_site.jpg" hspace="3" vspace="0" border="0" id="Image1" onmouseover="MM_swapImage('Image1','','assets/echoArts_site_over.jpg',1)" onmouseout="MM_swapImgRestore()"/></a>

<a href="assets/carolinakids.jpg" rel="lightbox[sites]" title="www.carolinakidsinmotion.com"
onmousedown="this.title='<a target=\'_blank/\'href=\'http://www.carolinakidsinmotion.com/\'>Click here to visit</a>';"
onmouseout="this.title='<a href=\'http://www.carolinakidsinmotion.com/\'>Click here to visit</a>';">
<img src="assets/ckm_tap_link.jpg" hspace="3" vspace="0" border="0" id="Image2" onmouseover="MM_swapImage('Image2','','assets/CKM_site_over.jpg',1)" onmouseout="MM_swapImgRestore()"/></a>

<a href="assets/emerycpa.jpg" rel="lightbox[sites]" title="www.emerycpa.net"
onmousedown="this.title='<a target=\'_blank/\'href=\'http://www.emerycpa.net/\'>Click here to visit</a>';"
onmouseout="this.title='<a href=\'http://www.emerycpa.net/\'>Click here to visit</a>';">
<img src="assets/emery_pic_link.jpg" hspace="3" vspace="0" border="0" id="Image15" onmouseover="MM_swapImage('Image15','','assets/emery_site_over.jpg',1)" onmouseout="MM_swapImgRestore()"/></a>

Any suggestion? Thanks!

01-05-2009, 06:48 PM
It's now much simpler, use version 2.04a:




You will need to update all of your lightbox files, and there is now an additional script which means that in the head of your page you must include the call to builder (see demo page).

Once you have upgraded, all you need is:

<a href="larger_image.jpg" rel="lightbox[groupname]" rev="linkfortitle.htm::_blank" title="My Caption">Link Text or Thumbnail Image Tag</a>

01-05-2009, 09:32 PM
Awesome! works great. Thanks!

01-29-2010, 06:00 PM
dear great coders,

i have a form on my webpage. i want to submit the form into lightbox window... it will be sth like thanks message or confirmation message. how can i do that ?

01-29-2010, 08:35 PM
I am having trouble making the closelabel.gif and loading.gif display. I have tried various things, but just does not want to work. I use dreamweaver, so not sure if something is wrong here in the javascript.

// Configuration
var fileLoadingImage = "assests/loading.gif";
var fileBottomNavCloseImage = "assests/closelabel.gif";

var animate = true; // toggles resizing animations
var resizeSpeed = 7; // controls the speed of the image resizing animations (1=slowest and 10=fastest)

var borderSize = 10; //if you adjust the padding in the CSS, you will need to update this variable