PDA

Click to See Complete Forum and Search --> : multiple image link popups- simple

SkittleBean
11-23-2003, 05:15 AM
i'm trying to create image-linked popups (thumbnails linking to popups of whole images).

i'm using this code:

<script language="javascript" type="text/javascript">
//<!--
function popup()
{ window.open ("YourURLgoesHere.html","popup"," width=400,height=400,loca
tion=0,menubar=0,resizabl
e=0,scrollbars=0,status=0
,titlebar=1,toolbar=0") }
-->
</script>

with this code:

<a href="javascript:popup()"><img src="blah.gif" border=0 width="40" height="40" alt="your image description here"></a>

from the site. i get the links on my different thumbnails to work, except they all link to the image in the first code. I don't know how to integrate or modify the first code so that each thumbnail will link to the appropriate popup image (which are all different sizes so I want the windows to be different sizes as well).

I'm sure there's a simple solution to all of this, I just don't know it! Thanks
Mr J
11-23-2003, 05:37 AM
Try this one, change the images in the array and image tags to your own.

<SCRIPT type=text/javascript>
<!--
function init(){

myimg=new Array("bigpic01.jpg","bigpic02.jpg","bigpic03.jpg","bigpic03.jpg","bigpic05.jpg","bigpic04.jpg")

newImg=new Array() // create a new array

for(i=0;i<myimg.length;i++){
newImg[i] = new Image() // create a new image object for each image
newImg[i].src =myimg[i] // assign src to new image object
}

Width=screen.availWidth // for centering window
Height=screen.availHeight // for centering window
}

picWin=null
close_win=""
function showme(n){
if(picWin){picWin.close()} // if window exists close it
clearTimeout(close_win)

posx= (Width-newImg[n].width)/2 // for centering window
posy= (Height-newImg[n].height)/2 // for centering window

var winProps = "left= "+posx+", top = "+posy+", width="+(newImg[n].width)+", height="+(newImg[n].height)+", scrollbars=no, toolbar=no, directories=no, menu bar=no, resizable=yes, status=no"
picWin=window.open("","picWin",winProps)
picWin.document.write("<HTML><HEAD><TITLE></TITLE></HEAD>")
picWin.document.write("<BODY bgcolor='black' topmargin=0 leftmargin=0>")
picWin.document.write("<center><img src='"+newImg[n].src+"'></center>")
picWin.document.write("</BODY></HTML>")
close_win=setTimeout("picWin.close()",3000) // close window in 3 seconds

}

// place onload="init()" in the opening BODY tag

// -->
</SCRIPT>

<body onload="init()">

<img src="smallpic01.jpg" width="50" height="50" onclick="showme(0)">
<img src="smallpic02.jpg" width="50" height="50" onclick="showme(1)">
<img src="smallpic03.jpg" width="50" height="50" onclick="showme(2)">
<img src="smallpic03.jpg" width="50" height="50" onclick="showme(3)">
<img src="smallpic05.jpg" width="50" height="50" onclick="showme(4)">
<img src="smallpic04.jpg" width="50" height="50" onclick="showme(5)">
SkittleBean
11-23-2003, 06:08 AM
wow, thanks a lot.

what if I don't want the windows to close automatically? I tried taking that part out, but the windows keep "loading" like they're still trying to close or something.

and how would I change the size of the window that pops up? can't figure out what part does that (i'm new at java, can you tell?) :rolleyes:
Mr J
11-23-2003, 11:09 AM
Oops, sorry about the window closing I use that in my examples only.

I have commented this out in the script and given you the ability to choose the size of the window, see bold text.

See how you go

<SCRIPT type=text/javascript>
<!--
function init(){

myimg=new Array("bigpic01.jpg","bigpic02.jpg","bigpic03.jpg","bigpic03.jpg","bigpic05.jpg","bigpic04.jpg")

newImg=new Array() // create a new array

for(i=0;i<myimg.length;i++){
newImg[i] = new Image() // create a new image object for each image
newImg[i].src =myimg[i] // assign src to new image object
}

Width=screen.availWidth // for centering window
Height=screen.availHeight // for centering window
}

picWin=null
close_win=""
function showme(n){
if(picWin){picWin.close()} // if window exists close it
clearTimeout(close_win)

posx= (Width-newImg[n].width)/2 // for centering window
posy= (Height-newImg[n].height)/2 // for centering window

var winProps = "left= "+posx+", top = "+posy+", width=400, height=400, scrollbars=no, toolbar=no, directories=no, menu bar=no, resizable=yes, status=no"
picWin=window.open("","picWin",winProps)
picWin.document.write("<HTML><HEAD><TITLE></TITLE></HEAD>")
picWin.document.write("<BODY bgcolor='black' topmargin=0 leftmargin=0>")
picWin.document.write("<center><img src='"+newImg[n].src+"'></center>")
picWin.document.write("</BODY></HTML>")
//close_win=setTimeout("picWin.close()",3000) // close window in 3 seconds

}

// place onload="init()" in the opening BODY tag

// -->
</SCRIPT>
SkittleBean
11-23-2003, 04:58 PM
alright, I'll try this. thanks!