Random Image - Fixed 2

This example shows 4 thumbnails chosen at random, when a thumbnail is clicked its larger self is opened in a new window sized to the image

The thumbnail and its larger self are coded into the array.
To adjust the number of images shown simply add or remove image tags from the thumbs div, the script dynamically adds the id and the onclick event to the image tags.

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

myImages = [
 // "thumbnail","bigpic"
["pic01sm.jpg","pic01.jpg"],
["pic02sm.jpg","pic02.jpg"],
["pic03sm.jpg","pic03.jpg"],
["pic04sm.jpg","pic04.jpg"],
["pic05sm.jpg","pic05.jpg"],
["pic06sm.jpg","pic06.jpg"],
["pic07sm.jpg","pic07.jpg"],
["pic08sm.jpg","pic08.jpg"],
["pic09sm.jpg","pic09.jpg"],
["pic10sm.jpg","pic10.jpg"] // no comma at the end of last index
]

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

IEoffsetWidth=20
IEoffsetHeight=25

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

function initRandomImage(){

imgElements=document.getElementById("thumbs").getElementsByTagName("IMG")

for(var j=0;j<imgElements.length;j++){
imgElements[j].id="pic"+j

imgElements[j].j=j
imgElements[j].onclick=function(){
openWin(this.j)
}

}

total=myImages.length
numbersRange=new Array()
selectedNum=new Array()

for(n=0;n<=total;n++){
numbersRange[n]=n
}

for(p=0;p<imgElements.length;p++){
rndnum=Math.floor(Math.random()*(total))
selectedNum[p]=numbersRange.splice(rndnum,1)
total--
}

for(var i=0;i<selectedNum.length;i++){
document.images["pic"+i].src=myImages[selectedNum[i]][0]
}

}

newWin=null

function openWin(num){

if(newWin&&newWin.open&&!newWin.closed){
newWin.close()
}

popWidth=preloadImages[selectedNum[num]].width+IEoffsetWidth
popHeight=preloadImages[selectedNum[num]].height+IEoffsetHeight

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

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

}

// add onload="initRandomImage()" to the opening BODY tag

// -->
</script>

<style type="text/css">

#thumbs img{
width:100px;
height:75px;
margin-top:5px;
}

</style>


<div id="thumbs" style="text-align:center">

<img src="spacer.gif" alt="">
<img src="spacer.gif" alt="">
<img src="spacer.gif" alt="">
<img src="spacer.gif" alt="">

</div>