Adding a link in Lightbox image viewer 2.03

[dee_em]

1) Script Title: Lightbox image viewer 2.03

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...box2/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?

Thanks!

[jscheuer1]

See:

http://www.dynamicdrive.com/forums/s...ad.php?t=20140

[dee_em]

Works great, thanks!

[dee_em]

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?

[jscheuer1]

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.

[dee_em]

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 ...

[jscheuer1]

Please post a link to the page on your site that contains the problematic script so we can check it out.

[dee_em]

http://www.055interactive.com/linktest.html

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!

[jscheuer1]

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.

[dee_em]

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!