Image Gallery 7

Clicking on a thumbnail opens a window showing the larger image, clicking on the same thumbnail will close the window













THE SCRIPT

<script type="text/javascript">
<!--
// Jeff
// www.huntingground.freeserve.co.uk

ig7Arr=new Array() // large images
ig7Arr[0]="pic01.jpg"
ig7Arr[1]="pic02.jpg"
ig7Arr[2]="pic03.jpg"
ig7Arr[3]="pic04.jpg"
ig7Arr[4]="pic05.jpg"
ig7Arr[5]="pic06.jpg"
ig7Arr[6]="pic07.jpg"
ig7Arr[7]="pic08.jpg"
ig7Arr[8]="pic09.jpg"

preloadImages=new Array()
for(var i=0;i<ig7Arr.length;i++){
preloadImages[i]=new Image()
preloadImages[i].src=ig7Arr[i]
}

alwaysCenter=1 // 0 = no 1 = yes
popLeft=0 // popup default left, use if not centering
popTop=0 // popup default top, use if not centering

IEoffsetWidth=20
IEoffsetHeight=25

i=0
lastNum=""
ig7Pop=null

function nextIG7Pic(num){
popWidth=preloadImages[num].width+IEoffsetWidth
popHeight=preloadImages[num].height+IEoffsetHeight

if(alwaysCenter==1){
popLeft = (screen.availWidth - popWidth) / 2
popTop = (screen.availHeight - popHeight) / 2
}

if(ig7Pop&&ig7Pop.closed){
ig7Pop=null
i=0
}

if(ig7Pop&&!ig7Pop.closed){
ig7Pop.close()
ig7Pop=null
i=0
if(num==lastNum){i++} // if same link clicked
}

i++
if (i==1){
if (i==1){
ig7Pop=window.open('','win1','left='+popLeft+',top='+popTop+',width='+popWidth+',height='+popHeight+',scrollbars=0,resizable=0')
ig7Pop.document.write("<html>\n<head>\n<title>The Bigger Picture</title>\n</head>\n<body style=\"background-color:black\">")
ig7Pop.document.write("<img src="+ig7Arr[num]+">")
ig7Pop.document.write("</body>\n</html>")
ig7Pop.focus()
ig7Pop.focus()
}
else{
i=0
}

lastNum=num
}

//-->
</script>

THE HTML

<img src="pic1_small.jpg"alt="" onclick="nextIG7Pic(0)"><br>
<img src="pic2_small.jpg"alt="" onclick="nextIG7Pic(1)"><br>
<img src="pic3_small.jpg"alt="" onclick="nextIG7Pic(2)"><br>
<img src="pic4_small.jpg"alt="" onclick="nextIG7Pic(3)"><br>
<img src="pic5_small.jpg"alt="" onclick="nextIG7Pic(4)"><br>
<img src="pic6_small.jpg"alt="" onclick="nextIG7Pic(5)"><br>
<img src="pic7_small.jpg"alt="" onclick="nextIG7Pic(6)"><br>
<img src="pic8_small.jpg"alt="" onclick="nextIG7Pic(7)"><br>
<img src="pic9_small.jpg"alt="" onclick="nextIG7Pic(8)"><br>

imggal7pop.htm

<img id="poppic" alt="" src="">