click on thumbnail image to open different image (lightbox)

General discussions about WebYep
Post Reply
Russ Sargeant
Posts: 4
Joined: Tue Nov 27, 2007 2:14 pm

click on thumbnail image to open different image (lightbox)

Post by Russ Sargeant » Wed Jan 07, 2009 4:22 pm

Hi there,

I wish to create an image gallery where the thumbnail images are different images to the enlargements. My thumbnails are ‘crops’ of the larger image. I’m also using lightbox.
Is this possible? I realise the default behaviour in WebYep is to automatically create the thumbnail from the enlargement using GD. I can manually type-in the image hyperlink, but then that technique ignores lightbox and just shows me the image in a browser window.

So to re-iterate: I want to be able to click on a thumbnail image which then opens a different image in lightbox.

(1.3.0/Windows Vista/Dreamweaver/CS3)

Max
Rank 4
Rank 4
Posts: 176
Joined: Wed Nov 08, 2006 10:39 pm
Location: UK
Contact:

Re: click on thumbnail image to open different image (lightb

Post by Max » Fri Jan 09, 2009 6:44 pm

Russ Sargeant wrote:Hi there,

I wish to create an image gallery where the thumbnail images are different images to the enlargements. My thumbnails are ‘crops’ of the larger image. I’m also using lightbox.
Is this possible? I realise the default behaviour in WebYep is to automatically create the thumbnail from the enlargement using GD. I can manually type-in the image hyperlink, but then that technique ignores lightbox and just shows me the image in a browser window.

So to re-iterate: I want to be able to click on a thumbnail image which then opens a different image in lightbox.

(1.3.0/Windows Vista/Dreamweaver/CS3)



The only way I can think of doing this, though Johannes will be the expert here, is to create a webyep image within a loop (so you can have as many eventual thumbnail size images you want) with thumbnail turned off.
Then use the link within the Webyep image interface to launch a popup window which in turn would have another webyep image. Though this popup window will need to have the javacript that launches it written in the optional html attributes area.
The draw back is it doesnt use the lightbox effect.

max

Russ Sargeant
Posts: 4
Joined: Tue Nov 27, 2007 2:14 pm

Post by Russ Sargeant » Mon Jan 12, 2009 10:50 am

Thanks Max, yes I had tried that and since had a reply from Johannes saying that this isn't possible :(
Thanks again, Russ.

dbaquero
Posts: 1
Joined: Wed Sep 23, 2009 6:16 pm

Re: click on thumbnail image to open different image (lightbox)

Post by dbaquero » Wed Sep 23, 2009 6:23 pm

Hi, I just joined to post a solution that I hope will help everyone in the same or similar canandrum.

My need, specifically was to create a roll over thumbnail for a map that opens with lightbox, so instead of putting the command to open the image I click on, I put it on the a href with the address of the image I want to open.

this is the code I used:

<a href="images/mapa.gif" rel="lightbox" title="Muros 146 y Gonzales Suarez. Quito - Ecuador.<br>+593.2.255.0839 / +593.2.256.2483" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('mapa','','images/mapa_btn_on.png',1)">
<img src="images/mapa_btn_off.png" alt="Mapa a Hotel Villa Nancy, Quito Ecuador" name="mapa" width="76" height="57" border="0" id="mapa" /></a>

currently I am developing this site so if you want to check out the working script go to http://www.hotelvillanancy.com/v3 (if you see this after the site is live, omit the v3 from the URL). the rollover is a basic script from dreamweaver cs4, so there's extra code for the roll over on the header, so i won't post it here unless it's requested. I've tested this script on safari, chrome, ie8, ie7 and ff3.0.11

the simple version would be:
<a href="images/target_image.ext" rel="lightbox" title="text that goes under the lightbox image when it opens">
<img src="images/whatever_thumbnail_you_want.ext" alt="about your photo helps with seo"></a>

I haven't tried it, yet... but I assume the same principle will work to link a lightbox photo from a text link.

Post Reply