...

View Full Version : :: thumbnail to fullsize image js windows ::



babelfish
07-03-2003, 10:41 AM
im looking for some kind of script that will i can add something like an onClick="popup(this)" which will automatically get the name of a thumbnail and then create the popup window from the full size one - for some reason any attempt i have tried seems to fail :( i basically dont wanna go in sticking every ID in a page cos im gonna have about 40+ thumbs on a page)

thx peeps

is it also possible to maybe automatically format the window it pops up in? maybe like creating html page on the fly rather than just having the image shown on its own? (cos i wanna remove the borders)

requestcode
07-03-2003, 02:05 PM
Something like this?
<html>
<head>
<title>Image Pop Up</title>
<script language="JavaScript">
img0=new Image() // preload images
img0.src="thumb0.gif"
img1=new Image()
img1.src="thumb1.gif"
img2=new Image()
img2.src="thumb2.gif"
image0=new Image() // preload images
image0.src="large0.gif"
image1=new Image()
image1.src="large1.gif"
image2=new Image()
image2.src="large2.gif"
var ImgWin=" "
function imgwin(Imgn)
{
w=eval(Imgn+".width")
if(w<100)
{w=100}
h=eval(Imgn+".height")
if(h<100) // cannot open window less than 100 by 100 pixels
{h=100}
h=h+25
picgif=eval(Imgn+".src")
if(ImgWin.open)
{ImgWin.close()}
ImgWin=window.open("","winimg",config="width="+w+",height="+h,+"location=no,status=no,directories=no,toolbar=no,scrollbars=no,menubar=no,resize=no,top=30,left=30");
ImgWin.document.write("<html>")
ImgWin.document.write("<head><title>Display Image</title></head>")
ImgWin.document.write("<body onblur='self.focus()' marginheight='0' marginwidth='0' leftmargin='0' topmargin='0' bgcolor='lightyellow'>")
ImgWin.document.write("<center><img src="+picgif+" border='0' hspace=0 vspace=0><br>")
ImgWin.document.write("<font size=-1><a href='#' onClick='self.close()'>Close Me</a></font></center>")
ImgWin.document.write("</body>")
ImgWin.document.write("</html>")
ImgWin.document.close()
ImgWin.focus()
}
</script>
</head>
<body>
<center>
<br><br><br>
<a href="#" onClick="imgwin('image0');return false;"><img src="thumb0.gif" name="img0" border="0"></a>
<br>
<a href="#" onClick="imgwin('image1');return false"><img src="thumb1.gif" name="img1" border="0"></a>
<br>
<a href="#" onClick="imgwin('image2');return false"><img src="thumb2.gif" name="img2" border="0"></a>
<br>
</body>
</html>

babelfish
07-03-2003, 02:07 PM
will check it out l8rz - got a hectic schedule atm :(

Skyzyx
07-03-2003, 05:53 PM
Here's one that beetle wrote that's pretty cool:
http://www.codingforums.com/showthread.php?s=&threadid=9836

I'm doing some ongoing development to it, so I've reposted it here:
http://www.skyzyx.com/scripts/imagepop.php

scroots
07-03-2003, 08:17 PM
I built one that supports a text description under the thumbnail.
Place in the head section


<script language="javascript">
<!--
// script by matt newton (matt.newton@scoutmail.org.uk
//a is image location
//b is image text
var e
var l
e=screen.width
l=screen.height
function displayimage(a,b) {
if(e!=''){
var j=
j=e-10
PreView = window.open("", "Preview", " toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=1,resizable=0,copyhistory=0,width=j ,height=l");
}else{
PreView = window.open("", "Preview", " toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=1,resizable=0,copyhistory=0,width=6 00,height=400");
}
PreView.document.open();
PreView.moveTo(0,0);
PreView.document.write("<HTML><HEAD>");
PreView.document.write("<TITLE>VIEW IMAGE</TITLE>");
PreView.document.write("</HEAD><BODY BGCOLOR=FFFFFF TEXT=>");
PreView.document.write("<FORM>");
PreView.document.write("<IMG HSPACE=0 VSPACE=0 " + "SRC=" + a + ">");
PreView.document.write("<P><CENTER>"+ b +"</CENTER></P>");
PreView.document.write("<HR><CENTER><FORM><INPUT TYPE='button' VALUE='Close' " + "onClick='window.close()'></FORM></center>");
PreView.document.write("</CENTER>");
PreView.document.write("</BODY></HTML>");
PreView.document.close();
}
// done hiding -->
</SCRIPT>



and for each image use

<a href="#" onClick="mypopuppic.jpg','my image text')"><img src="Thumbs/mythumbnail.jpg"></a>

if you want no text to apper in the popup just change my image text to nothing so it reads:

<a href="#" onClick="mypopuppic.jpg','')"><img src="Thumbs/mythumbnail.jpg"></a>


scroots

beetle
07-03-2003, 08:50 PM
Scroots

Better to use "javascript://" for the href, rather than "#", becuase "#" in a link will scroll to the top of the page. Very annoying.

Even better to use

<a href="mypopuppic.jpg" onClick="this.href,'my image text');return false;"><img src="Thumbs/mythumbnail.jpg"></a>

scroots
07-03-2003, 11:14 PM
nice suggesation beetle, i will update my script.

Ps. i made a slight typo in my script it shoulds be
<a href="#" onClick="displayimage('pic.jpg','my image text')"><img border="0" src="pic.jpg" width="241" height="158"></a>

so i could use
<a href="javascript:displayimage('pic.jpg','my image text')"><img border="0" src="pic.jpg" width="241" height="158"></a>


scroots

babelfish
07-04-2003, 09:28 AM
thx guys - the script works perfectly :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum