PDA

View Full Version : Script or code wanted so pics show in new window



straka01
16-02-2008, 03:18 PM
I have a basic web site that I want to improve. I have thumbnails linking to larger photos. When I click on the thumbnail my picture opens up in part of the full screen - all the rest of the area is white and the only way back to the original page is by pressing the back button.

I would like to make it so that the main image comes a in a seperate smaller window on top of the main one.

Can anyone tell me or guide to a resource where I can get html code or script so that when I click on a thumbnail it opens up a new window with the photo - on top of and smaller than the original window.

Many thanks

Greg
16-02-2008, 03:31 PM
Here's the script I generate when I use Dreamweaver. But it'd probably be best to say what you use to author your pages.


<a href="javascript:void(0)" onClick="MM_openBrWindow('http://www.mysite.co.nz/images/image.jpg','','width=300,height=360')"><img src="images/image2.jpg" width="175" height="210" border="0">

Or you could find something here (http://www.htmlgoodies.com/beyond/javascript/article.php/3470771), or do a Google for "open new browser window"

sal
16-02-2008, 03:41 PM
Nowadays this is taken care of JS and "faux" popups.There are quite a few different options in this line of solution, the original being Lightbox (http://www.huddletogether.com/projects/lightbox2/) and its various (http://www.digitalia.be/software/slimbox) successors (http://mjijackson.com/shadowbox/).These are usually a snap to get working with your own site.

A popular one at the moment is FancyZoom (http://www.cabel.name/2008/02/fancyzoom-10.html).

kahawai chaser
16-02-2008, 08:19 PM
What I use to do for one of my sites, is to link the smaller thumbnail image to the same larger image (reduced from the original, using photo editing). The smaller and reduced images are housed in separate folders on my web server.

The code is a bit like this...

<a href="http://www.site (or your web folder) of reduced image A /"target=_blank"><img src="http://www.site (or your web folder) of thumbnail image A" ALT="click to visit reduced image" border="0"></a>

The =_blank allows a separate window to open, and the Alt = " click to etc, allows text to display when the mouse is moved over the thumbnail - not strictly necessary, but apparently helpful for Google indexing purposes - as images are not recognized when Google crawls your site.

Maybe test this out, I can't recall if this will fully work. But depending on the number of images you have, it may be better to incorporate a separate page for enlarged images or maybe a slide show, either with embedded javascript or linked to a slide show flash based site...