Image Gallery 5

You can scroll forwards or backwards through the images 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 as thumbnails. 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 by referencing both these IDs.

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 defaultstyle

.defaultstyle{
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 use the left and top positions within the imgholder div

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Image Gallery 5</TITLE>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<LINK href="../main/style.css" rel=stylesheet type="text/css">
<script type="text/javascript">
<!--
if (top.location.href.indexOf("mainfram.htm") == -1)
top.location.href="../main/mainfram.htm?../imagery/imggal5.htm"
setTimeout("parent.active('img_s')",4000)
// -->
</script>

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

images=[

['pic01.jpg','Image 1','This text box is dynamically created to show any text that goes with the image.'],
['pic02.jpg','Image 2','A default style can be set for this text box and its contents'],
['pic03.jpg','Image 3','You can also over-ride the default style and create individual text box styles','textstyle2'],
['pic04.jpg','Image 4','You can show the larger images in a different size to its default size','textstyle3'],
['pic05.jpg','Image 5','You can show just the image, see next image'],
['pic06.jpg','Image 6'],
['pic07.jpg','Image 7','Enjoy'],
['pic08.jpg','Image 8','Enjoy'],
['pic09.jpg','Image 9','Enjoy and have a nice day'],
['pic10.jpg','Image 10','Enjoy and have a nice day']  // no comma at the end of the last line
]

doFade=1 // fade background, 0 = no, 1 = yes
doPreviews=1 // use preview images, 0 = no, 1 = yes
imageSize=100 // % size the large image is shown at

centerImage=1 // 0 = no, 1 = yes

displayBorderWidth=8
displayBorderColor="#FFFFFF"

offsetX=0
offsetY=0

isHidden=true
current=null

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

function initPreviews(){
if(doPreviews==1){
newDiv=document.createElement("DIV")
newDiv.setAttribute("id","previewimages")
newImg1=document.createElement("IMG")
newImg1.setAttribute("id","previous")
newImg1.setAttribute("src","")
newImg1.onclick=function(){direction(0)}
newImg1.className="thumb_out"
newImg1.onmouseover=function(){doFade=0;this.className="thumb_over"}
newImg1.onmouseout=function(){this.className="thumb_out"}
newImg1.style.marginRight="100px"

newImg2=document.createElement("IMG")
newImg2.setAttribute("id","next")
newImg2.setAttribute("src","")
newImg2.onclick=function(){direction(1)}
newImg2.className="thumb_out"
newImg2.onmouseover=function(){doFade=0;this.className="thumb_over"}
newImg2.onmouseout=function(){this.className="thumb_out"}

newDiv.appendChild(newImg1)
newDiv.appendChild(newImg2)
document.body.appendChild(newDiv)
}

}

isPreviews=false

firstFade=1
function showImage(num){
nextPic=num
isHidden=false
current=num
//document.getElementById("imgcount").innerHTML=(num+1) +" of "+images.length

displayEl=document.getElementById("imgholder")
displayPic=document.images["pic"]
displayPic.onclick=function(){
displayEl.style.display="none"
doFade=1
firstFade=1
hide()
}

if(document.getElementById("previous")&&document.getElementById("previous").nodeName=="IMG"){
previewEl=document.getElementById("previewimages")
isPreviews=true
}

documentBody=(document.compatMode=="CSS1Compat"?document.documentElement:document.body)

if(isPreviews){
// preview buttons positioning, if captions are different heights buttons do not remain static ?????
//previewEl.style.top=((documentBody.clientHeight/2)-maxHeight/2)+maxHeight+captionEl.offsetHeight
previewEl.style.top=(documentBody.clientHeight + documentBody.scrollTop) - 60+"px"
previewEl.style.display="block"

startLeft=(num-1<0?images.length-1:num-1)
startRight=(num+1==images.length?0:num+1)
document.getElementById("previous").src=images[startLeft][0]
document.getElementById("next").src=images[startRight][0]
}

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

if(document.getElementById("displaytext")){
displayEl.removeChild(displayText)
}

displayEl.style.backgroundColor=displayBorderColor

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

displayPic.src=preload[num].src
displayPic.style.width=imageWidth+"px"
displayPic.style.height=imageHeight+"px"
displayPic.style.margin=displayBorderWidth+"px"

displayPic.alt=images[num][1]

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

displayEl.style.height=""
displayText=document.createElement("DIV")
displayText.setAttribute("id","displaytext")

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

displayText.innerHTML=images[num][2]
displayEl.appendChild(displayText)

if(images[num][3]){
document.getElementById("displaytext").className=images[num][3] // apply style
}
else{
document.getElementById("displaytext").className="defaultstyle"
}

}

if(centerImage==1){
centerLeft=(documentBody.clientWidth/2) - (displayEl.offsetWidth/2) + offsetX
centerTop=(documentBody.clientHeight/2)-(displayEl.offsetHeight/2) + documentBody.scrollTop + offsetY

displayEl.style.left=centerLeft+"px"
displayEl.style.top=centerTop+"px"
}

if(firstFade==1){
//doFade=1
}

if(doFade==1){
canvasEl=document.getElementById("canvas")
canvasEl.style.width=documentBody.clientWidth+"px"
canvasEl.style.height=(documentBody.scrollHeight<documentBody.clientHeight ? documentBody.clientHeight : documentBody.scrollHeight)+"px"
opac=0
canvasEl.style.display="block"
goOpac()
}

firstFade=0
}

function hide(){
isHidden=true
if(doFade==1){
goOpac()
}
if(isPreviews){
document.getElementById("previewimages").style.display="none"
}
displayEl.style.display="none"
}

step=10
moz=document.getElementById&&!document.all

function goOpac(){
opac+=step
if(canvasEl.filters){canvasEl.filters.alpha.opacity=opac}
else{canvasEl.style.opacity=(opac/100)-0.001}

timer=setTimeout("goOpac()",10)

if(opac>=80){
step=-step
clearTimeout(timer)
}

if(opac<0){
step=-step
clearTimeout(timer)
canvasEl.style.display="none"
}

}

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

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

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

showImage(nextPic)

}

// add onload="initPreviews()" to the opening body tag
 
// -->
</script>

<style type="text/css">

.thumbs img{
width:50px;
height:30px;
}

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

.thumb_out{border:2px outset #FFFFFF}

#previewimages{
position:absolute;
display:none;
width:99%;
text-align:center;
z-index:10
}

#previewimages img{
width:50px;
height:30px;
}

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

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

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

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

.borderout{border:1px outset white;cursor:pointer}
.borderover{border:1px inset white}

</style>

<!--[if IE]>

<style type="text/css">

#canvas{
filter:alpha(opacity=0)
}

.thumb_over{
cursor:hand;
}

.borderout{cursor:hand}

</style>

<! [endif]-->

</HEAD>
<BODY onload="initPreviews()">
<h1>Image Gallery 5</h1>
<DIV id="canvas" style="position:absolute;left:0;top:0;display:none;background-color:#000000;opacity:0;z-index:5"></DIV>
<div id="imgholder" style="position:absolute;left:0px;top:0px;display:none;z-index:6" title="Click image to close">
<img name="pic" id="pic" src="blank.gif" alt=" " style="position:relative">
</div>

</BODY>
</HTML>