PDA

Click to See Complete Forum and Search --> : Thumbnail leading to a larger pic in a seperate pop up window

Webbie2003
04-01-2003, 06:34 AM
Hi Everybody

How do I do this ??? ...

Smaller pic which when clicked on opens up a seperate pop up window with that same pic in it but much larger , I wanna be able to control the size of the pop up window that opens .... ( I want the pop up window to be the size of the larger pic thats in it ) .


Thanks
pyro
04-01-2003, 07:25 AM
Try this code. It should be close to what you are looking for:

<html>
<head>
<title>Untitled</title>

<script language="javascript" type="text/javascript">

function openpic(img,title,width,height)
{
picwin = window.open('','','width='+width+',height='+height+'')
picwin.document.write(
'<html>',
'<head>',
'<title>'+title+'</title>',
'</head>',
'<body bgcolor="darkblue">',
'<img src="'+img+'">',
'</body>',
'</html>' //no comma after last line
);
}

</script>

</head>

<body>
<a href="yourlarge.gif" onClick="openpic(this.href,'Page Title','325','325'); return false;"><img src="yoursmall.gif" border="0"></a>
</body>
</html>
Optimus_Primo
04-02-2003, 12:44 AM
how about a thumbnail pic when clicked opens a separate pop up window (another url)?
nash
04-02-2003, 07:18 AM
I think that's what you're looking for (I used it a lot on my site, it works well)

To have bigger image in popup from a thumb:

Put this between <HEAD> and </HEAD> only once!

<SCRIPT LANGUAGE="JavaScript"><!--
/*
To be put only once in the header of the page
*/
function afficheVignette(cheminVignette,cheminMaxi)
{
document.write('<A HREF="javascript:afficheMaxi(\''+cheminMaxi+'\')"><IMG SRC="'+cheminVignette+'" HSPACE=0 VSPACE=0 BORDER=0 ALT="clich here to enlarge"></A>');
}
function afficheMaxi(chemin)
{
i1 = new Image;
i1.src = chemin;
html = '<HTML><HEAD><TITLE>Image</TITLE></HEAD><BODY LEFTMARGIN=0 MARGINWIDTH=0 TOPMARGIN=0 MARGINHEIGHT=0><CENTER><IMG SRC="'+chemin+'" BORDER=0 NAME=imageTest onLoad="window.resizeTo(document.imageTest.width+14,document.imageTest.height+32)"></CENTER></BODY></HTML>';
popupImage = window.open('','_blank','toolbar=0,location=0,directories=0,menuBar=0,scrollbars=0,resizable=1');
popupImage.document.open();
popupImage.document.write(html);
popupImage.document.close()
};
// -->
</SCRIPT>

To be put between the <BODY> and </BODY> of your page where the pic should go

<SCRIPT LANGUAGE="JavaScript">
afficheVignette("XXXXTHUMBXXXX.gif","XXXXXIMAGEXXXX.gif");
</SCRIPT>

In this script part of it is french... (but I'm french) "Vignette" means "thumb"! ;)

Normally, the only things you need to change are the names of the pics (I put them in caps with lots of XXXXX around ;) )
Webbie2003
04-02-2003, 10:18 AM
Thanks ... Pyro , Nash & Optimus_Primo

Webbie
Optimus_Primo
04-03-2003, 01:27 AM
hello guys...i want ur ideas on this script... it works well on IE but NOT on Netscape? tell me whats wrong with my script?

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Popup Window Image Preview</title>
<script language="javascript">
<!-- hide from old browsers
function selectWin(source,h1,w1){
newWin = window.open(source,"","height=" + h1 + ",width=" + w1 + ",top=10,left=0,scrollbars=yes");

}
// stop hiding -->
</script>
</head>

<body>

<p><a href="javascript:selectWin('c:/my documents/my webs/tables_collection.htm',400,750)"><img border="2" src="Table_1.gif" width="42" height="44"></a></p>

<p>&nbsp;</p>

</body>

</html>
Maximus Prime
04-11-2003, 02:51 PM
I use MS front Page... haven't gotten to the big leagues yet.

If you use MSFP try this... insert your picture into the place you want it on your page. Click on the picture and click CTRL+T... it'll auomatically make a thumbnail. Then go into hyperlink settings - Target Settings - New Window. Ths is how I do it since I am HTML writing illiterate. I am just figuring out how to plug things into the HTML script to change things. No formal schooling obviously.