Image Gallery 1

The function call showIG1Pic(number) includes an ordinal number that relates to the relevant array index number.

The display box for the text is dynamically created whenever there is text to be shown.

The border around the image can be changed with variable displayBorderWidth this border is also be applied to the text box when generated. The border colour is set at variable displayBorderColor.

You can create a default css style rule to apply to all the text displays, this style rule must be called ig1default

.ig1default{
color:#008000;
background-color:#ddeedd;
border:2px solid #bbccbb;
}

To set up the gallery you need to enter your image and any accompanying text into the array

You can also create additional style rules and apply them to one or more text displays, overriding the default style rule.
With the exception of the default style your custom style rule names can be any of your choosing.

If you are going to apply a custom style rule the relevant index requires 4 entries

The overall width of the display is determined by the width of the current image, the height is determined by the height of the current image plus any text that is shown.
The size that the larger image is shown at can be adjusted with variable imageSize this is a percent value set at 100 by default.
The value of imageSize will be applied to all the larger images widths and heights

With variable centerImage set to 1 the display is initially shown in the center of the window, if required you can use the variables offsetX and offsetY to offset the final position of the display, to manually position the display change the variable centerImage to zero and place the ig1div where you want in your page.

<HTML>
<HEAD>
<TITLE>Image Gallery 1</TITLE>

<script type="text/javascript">
<!--

//Jeff
//www.huntingground.freeserve.co.uk

ig1Arr=[

['bigpic1.jpg','Alt Text','This text box is dynamically created to show any text that goes with the image.'],
['bigpic2.jpg','Alt Text','A default style can be set for this text box and its contents','ig1style2'],
['bigpic3.jpg','Alt Text','3>br>You can over-ride the default style and create individual text box styles','ig1style3'],
['bigpic4.jpg','Alt Text','4','ig1style4'],
['bigpic5.jpg','Alt Text'],
['bigpic6.jpg','Alt Text','6']  // no comma at the end of the last index

]

centerImage=1 // 0 = no, 1 = yes
imageSize=100 // % size the large image is shown at

displayBorderWidth=8
displayBorderColor="#FFFFFF"

offsetX=0
offsetY=0

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

function showIG1Pic(num){

ig1Div=document.getElementById("ig1div")
ig1Pic=document.images["ig1pic"]
ig1Pic.onclick=function(){
ig1Div.style.display="none"
}

imageWidth=preload[num].width/100*imageSize
imageHeight=preload[num].height/100*imageSize

if(document.getElementById("ig1text")){
ig1Div.removeChild(ig1Txt)
}

ig1Div.style.backgroundColor=displayBorderColor

ig1Div.style.width=(displayBorderWidth==0?imageWidth:imageWidth+(displayBorderWidth*2))+"px"
ig1Div.style.height=(displayBorderWidth==0?imageHeight:imageHeight+(displayBorderWidth*2))+"px"
//ig1Div.style.backgroundImage="url("+preload[num].src+")"
ig1Div.style.display="block"

ig1Pic.src=preload[num].src
ig1Pic.style.width=imageWidth+"px"
ig1Pic.style.height=imageHeight+"px"
ig1Pic.style.margin=displayBorderWidth+"px"
ig1Pic.alt=ig1Arr[num][1]

if(ig1Arr[num][2]){ // create text box if required

ig1Div.style.height=""
ig1Txt=document.createElement("DIV")
ig1Txt.setAttribute("id","ig1text")

with(ig1Txt.style){
marginLeft=displayBorderWidth+"px"
marginRight=displayBorderWidth+"px"
marginBottom=displayBorderWidth+"px"
}

ig1Txt.innerHTML=ig1Arr[num][2]
ig1Div.appendChild(ig1Txt)

if(ig1Arr[num][3]){
document.getElementById("ig1text").className=ig1Arr[num][3] // apply style
}
else{
document.getElementById("ig1text").className="ig1default"
}

}

if(centerImage==1){
ig1Div.style.position="absolute"

if(document.compatMode=="CSS1Compat"){theBody=document.documentElement}
else{theBody=document.body}

centerLeft=(theBody.clientWidth/2) - (ig1Div.offsetWidth/2) + offsetX
centerTop=(theBody.clientHeight/2)-(ig1Div.offsetHeight/2) + theBody.scrollTop + offsetY
ig1Div.style.left=centerLeft+"px"
ig1Div.style.top=centerTop+"px"
}

}
 
// -->
</script>

<style>

.ig1default{
color:#008000;
background-color:#ddeedd;
border:2px solid #bbccbb;
}

.ig1style2{
color:#808000;
background-color:#eeeedd;
border:2px solid #ccccbb;
}

.ig1style3{
color:#800000;
background-color:#eedddd;
border:2px solid #ccbbbb;
}

.ig1style4{
color:#000000;
background:#ddddee;
border:1px solid #bbbbcc;
}

</style>

</HEAD>
<BODY>
<h1>Image Gallery 1</h1>


<img src="pic1.jpg" onclick="showIG1Pic(0)">
<img src="pic2.jpg" onclick="showIG1Pic(1)">
<img src="pic3.jpg" onclick="showIG1Pic(2)">
<img src="pic4.jpg" onclick="showIG1Pic(3)">
<img src="pic5.jpg" onclick="showIG1Pic(4)">
<img src="pic6.jpg" onclick="showIG1Pic(5)">

</BODY>
</HTML>

<div style="width:100%;text-align:center">

<div style="width:700px;height:430px;border:1px solid black;margin:auto">

<div class="thumbs" style="float:left;text-align:left">
<img src="pic1.jpg" onclick="showIG1Pic(0)">
<img src="pic2.jpg" onclick="showIG1Pic(1)">
<img src="pic3.jpg" onclick="showIG1Pic(2)"><br>
<img src="pic4.jpg" onclick="showIG1Pic(3)">
<img src="pic5.jpg" onclick="showIG1Pic(4)">
<img src="pic6.jpg" onclick="showIG1Pic(5)">
</div>

<div id="ig1div" style="display:none;float:left;margin-left:50px" title="Click to close">
<img name="ig1pic" id="ig1pic" src="blank.gif" alt="">
</div>

<br style="clear:both">
</div>

</div>