Image Gallery 6

Open the thumbnails larger image in a popup window, you can also scroll forwards or backwards through the rest of the images within the popup window.

Scrolling through the images in the popup window can be done by using links, buttons, or the image method.

If using links or buttons simply include onclick="direction(0)" to go back and onclick="direction(1)" to go forwards within the respective tags.

The image method automatically shows the previous and next images.
These image tags also contain the relevant onclick event but must also include the correct ID, previous and next

The script automatically checks to see if the image method is being used and will reference both these IDs.

Setting variable autoResize to 0 (zero) opens the popup window at the default sizes as set with variables popWidth and popHeight.
Setting variable autoResize to 1 resizes the popup window to accomodate the current images size.

When using autoResize the script takes the current images size as the basis for the window size.
In addition to the size of the image extra space has to be allowed for the next and previous buttons or images, these additional dimensions are set at variables widthOffset and heightOffset and can be changed to suit your layout.

You can choose to have the popup always centered by setting variable alwaysCenter to 1

<HTML>

<HEAD>
<TITLE>Image Gallery 6</TITLE>

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

images = new Array()
images[0]="pic01.jpg"
images[1]="pic02.jpg"
images[2]="pic03.jpg"
images[3]="pic04.jpg"
images[4]="pic05.jpg"
images[5]="pic06.jpg"
images[6]="pic07.jpg"
images[7]="pic08.jpg"
images[8]="pic09.jpg"
images[9]="pic10.jpg"
images[10]="pic11.jpg"
images[11]="pic12.jpg"

alwaysCenter=1 // 0 = no 1 = yes
autoResize=0 // 0 = no 1 = yes // resize window to fit image

popPage="imggal6_pop.htm"
popWidth = 500 // default
popHeight = 400 // default
popPosX = (screen.availWidth - popWidth) / 2
popPosY = 100 // (screen.availHeight - popHeight) / 2
moz=document.getElementById&&!document.all
widthOffset=(!moz?100:100)
heightOffset=(!moz?150:150)

imgTotal=images.length

runNum=3 //imgTotal // when to run your function

loaded=0
aIndex=0
isError=0

preloaded=new Array()

function preloadImage(){
preloaded[aIndex]=new Image()
preloaded[aIndex].onerror=noImage
preloaded[aIndex].src=images[aIndex]
if(isError==0){chkLoading()}
}

function chkLoading(){
if(preloaded[aIndex].complete==true){nextImage()}
else{setTimeout("chkLoading()",100)}
}

function nextImage(){
aIndex++
if(aIndex!=images.length){
setTimeout("preloadImage()",100)
document.getElementById("el1").innerHTML="Loading Images " + (images.length-aIndex)
}
else{
document.getElementById("el1").innerHTML="Images Loaded"
setTimeout("document.getElementById(\"el1\").style.visibility=\"hidden\"",2000)
}
if(aIndex==runNum){
loaded=1
}
}

function noImage(){
isError=1
aIndex++
setTimeout("isError=0;preloadImage()",100)
}

function picWin(n){
if(aIndex<n){
return
}
popWin = window.open(popPage+"?"+n,'pop','width='+popWidth+',height='+popHeight+',left='+popPosX
+',top='+popPosY+',scrollbars=no,resizable=no')
popWin.focus()
}

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

//-->
</script> 

<style>

img{
width:50px;
height:50px;
}

</style>

</HEAD>
<BODY bgcolor="#8E8462" onload="preloadImage()">

<div id="el1" style="display:none">Loading Image</div>

</BODY>
</HTML>

imggal6_pop.htm
If you change the name of this page it must also be change in the script above.

<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
<script type="text/javascript">
<!--
// Realise by Jeff
// www.huntingground.freeserve.co.uk

if (location.search.length > 0){
data = unescape(location.search.substring(1))
nextPic=Number(data) // change from string
}
else{
nextPic=0
}

function init(){
previewEl=document.getElementById("previewimages")

documentBody=(document.compatMode=="CSS1Compat"?document.documentElement:document.body)
previewEl.style.top=(documentBody.clientHeight + documentBody.scrollTop) - 60+"px"
getPic()
}

function getPic(){

if(opener.aIndex<nextPic){
document.getElementById("el1").style.display="block"
document.getElementById("showpic").style.display="none"
setTimeout("getPic()",100)
return
}

currentPic=new Image()
currentPic.src=opener.images[nextPic]

picWidth=currentPic.width
picHeight=currentPic.height

if(opener.autoResize==1){
window.resizeTo(picWidth+opener.widthOffset,picHeight+opener.heightOffset)
}

posX = (screen.availWidth - documentBody.offsetWidth) / 2
posY = (screen.availHeight - documentBody.offsetHeight) / 2

if(opener.alwaysCenter==1){
window.moveTo(posX,100)
}

if(document.getElementById("previous")&&document.getElementById("previous").nodeName=="IMG"){
nextLeft=(nextPic-1<0?opener.images.length-1:nextPic-1)
document.getElementById("previous").src=opener.images[nextLeft]
nextRight=(nextPic+1==opener.images.length?0:nextPic+1)
document.getElementById("next").src=opener.images[nextRight]
}

document.getElementById("showpic").src=opener.images[nextPic]

document.getElementById("showpic").style.marginTop=((documentBody.clientHeight-60)-picHeight)/2+"px"
document.getElementById("showpic").style.marginLeft=(documentBody.clientWidth-picWidth)/2+"px"

document.getElementById("el1").style.display="none"
document.getElementById("showpic").style.display="block"
}

function direction(dir){
if(dir==1){
nextPic++
}
else{
nextPic--
}

if(nextPic == opener.images.length){
nextPic=0
}

if(nextPic < 0){
nextPic = opener.images.length-1
}

getPic()
}

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

//-->
</script>

<style type="text/css">
body{
margin:0
}

.thumb_over{
border:2px inset #FFFFFF;
cursor:pointer;
}

.thumb_out{
border:2px outset #FFFFFF;
}
</style>

<!--[if IE]>
<style type="text/css">

.thumb_over{
cursor:hand;
}

</style>
<! [endif]-->

</HEAD>
<BODY style="background-color:#000000" onload="init()">

<div id="el1" style="display:none">Loading Image</div>

<P><img id="showpic" src="" alt="" style="display:none"></P>

</BODY>
</HTML>