PDA

View Full Version : Lightbox image viewer 2.03



jtarabay
04-26-2007, 01:27 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 don't really have a problem, the script is great and works great. I just had a question about it. Is there any way to add a link to in the caption? So if I had an image...and I wanted to put a caption called view testimonial, and have users be able to click it and it would bring up the testimonials page for that image. Thanks for any help you can offer.

Jason

jscheuer1
04-26-2007, 02:47 PM
You could just put the link in the title attribute (both examples modified from and tested with the distribution's demo index.html page):


<a href="images/image-1.jpg" rel="lightbox" title="<a href='http://www.google.com/'>Google</a>"><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a>

But, that will show up in some browsers as a tool tip onmouseover of the trigger and looks strange when it does. So, this works out better:


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

Note: Be careful to follow the quoting and escaping syntax shown.

jtarabay
04-26-2007, 05:00 PM
Your second option works great thank you. Just one more thing regarding that... I need a link in there, and you showed me how to do that, is there a way to have both text and a link though? I need some text that is not a link, and text that is a link. Is there something I can add to it to allow this? Here is my code using the code you showed me:

<a href="images/exthouse1.jpg" rel="lightbox" title= "title" onmousedown="this.title='<a target=\'_blank/\' href=\'http://www.google.com/\'>Google</a>';" onmouseout="this.title='';">
<img src="images/exthouse1thumb.jpg" width="100" height="100" alt="" border="8" style="border-style: solid; border-color: #BCAB77" /></a>

Thanks for your help. =)

jscheuer1
04-26-2007, 05:09 PM
You have some extra stuff (red):


<a href="images/exthouse1.jpg" rel="lightbox" title= "title" onmousedown="this.title='<a target=\'_blank/\' href=\'http://www.google.com/\'>Google</a>';" onmouseout="this.title='';">
<img src="images/exthouse1thumb.jpg" width="100" height="100" alt="" border="8" style="border-style: solid; border-color: #BCAB77" /></a>

I don't think it will hurt anything. But, if you lost the space after, it would. Best to get rid of it. As for your question, you can just add any text in there that you like (showing only the onmousedown - that's all that changes):


onmousedown="this.title='For more info, try: <a target=\'_blank/\' href=\'http://www.google.com/\'>Google</a>, they\'re great!';"

Be sure to continue escaping single quotes/apostrophes (') as shown.

V1RUS
02-13-2008, 03:31 PM
Hello Everyone,

i know this thread is very old, but i have a little Question. I add these Lines into my dokument and it works fine.

<a href="images/FDGUbanner.jpg" rel="lightbox[linksammlung]" onmousedown="this.title='<a href=\'http://www.fdgu.de/\'>click here to visit fdgu</a>';" onmouseout="this.title='';">
<a href="images/v1rus_kills_10.gif" rel="lightbox[linksammlung]" onmousedown="this.title='<a href=\'http://www.google.com/\'>Google</a>';" onmouseout="this.title='';"><img src="images/v1rus_kills_10.gif" width="191" height="166" alt="" border="0"></a>

But at every displayed image, the hyperlink of google will be shown. How can I show a different hyperlink at each image?

For each help im very pleased (and sorry for may bad english)

jscheuer1
02-13-2008, 06:36 PM
Use the new updated version:

http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm

In it, the title attribute of your rel="lightbox" link will be the text of the caption displayed in lightbox pop up box/viewer. The rev attribute (if used) of your rel="lightbox" link will be the href of the caption link.

Much simpler, really - ex:


<a href="images/image-1.jpg" rel="lightbox" title="my caption" rev="http://www.dynamicdrive.com">image #1</a>

V1RUS
02-14-2008, 07:13 AM
Perfect. Many Many THX :)

ApranaX
02-26-2008, 06:43 PM
I tried everything %85 completed. But I have only 1 problem...

So,


- I added link ...But When I try to click that link its opening in the same page..I want to open different page. Because I want to use second page,different picture for print option...

here is my code ;


<div class="thumbsBox">
<a href="slides/M-1316-US.jpg" rel="lightbox[roadtrip]" title="<a href='http://www.koaka.com'>Print Size</a>"><img src="thumbs/M-1316-US.jpg" width="53" height="80" border="0"><div>M-1316-US</div></a></div>

Its mean I want to open second page like as POP-UP...

Thx a lot...

jscheuer1
02-26-2008, 06:53 PM
I tried everything %85 completed. But I have only 1 problem...

So,


- I added link ...But When I try to click that link its opening in the same page..I want to open different page. Because I want to use second page,different picture for print option...

here is my code ;


<div class="thumbsBox">
<a href="slides/M-1316-US.jpg" rel="lightbox[roadtrip]" title="<a href='http://www.koaka.com'>Print Size</a>"><img src="thumbs/M-1316-US.jpg" width="53" height="80" border="0"><div>M-1316-US</div></a></div>

Its mean I want to open second page like as POP-UP...

Thx a lot...

You really should use the updated version of the script and modify it to accept target, see:

http://www.dynamicdrive.com/forums/showthread.php?t=28841

However, if you want to keep using the method you are currently employing:


<a href="slides/M-1316-US.jpg" rel="lightbox[roadtrip]" title="<a target='_blank' href='http://www.koaka.com'>Print Size</a>"><img sr . . .

ApranaX
02-26-2008, 06:59 PM
Thk you you are perfect..you solved my problem...

I dont know how will I upgrade I am afraid of that I will damage everything..I dont know If I dont updated the version do I live any problem ?

I have another problem with print option...

Thx again...

ApranaX
03-26-2008, 06:09 PM
Another question is When I click the link button it is opening normal explorer size ... I want to open a new blank page like as pictures' orginal size. like as POP UP page format...

<div class="thumbsBox">
<a href="slides/M-100-US.jpg" rel="lightbox" title="<a target='_blank' href='http://www.keca.ca/print_size/M-100-US.jpg'>PRINT FULL SIZE</a>"><img src="thumbs/M-100-US.jpg" width="53" height="80" border="0"><div>M-100-US</div></a></div>

this is my code...I tried something with java but lightbox didnt work verywell....could you help me Sir ?

ApranaX
03-27-2008, 01:04 PM
Is anyone help me ????