Image Gallery 4

View Galleries

All the thumbnails are dynamically generated.
The initial display of thumbnails show the number of galleries depicted by the first thumbnail from that gallery.
On selecting an image the current thumbnails are replaced with the thumbnails for the selected gallery.
While in a gallery if a thumbnail is selected its larger version is displayed.
To return to the gallery selection click the View Galleries link

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

Example:

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

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

If you are only showing an image the relevant index requires 2 entries

["thumb.jpg","bigpic.jpg"]

If you are showing an image and text the relevant index requires 3 entries

["thumb.jpg","bigpic.jpg","Image text"]

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

["thumb.jpg","bigpic.jpg","Image text","yourstylerulename"]

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

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

<script type="text/javascript">

// ["thumb","bigpic","alt text"]

gallery0=[
['pic01sm.jpg','pic01.jpg''Alt Text','Each galleries thumbnails are dynamically generated'],
['pic02sm.jpg','pic02.jpg''Alt Text','This text box is also dynamically created to show any text that goes with the image'],
['pic03sm.jpg','pic03.jpg''Alt Text','A default style can be set for this text box and its contents'],
['pic04sm.jpg','pic04.jpg''Alt Text','You can also over-ride the default style and create individual text box styles','textstyle2'],
['pic05sm.jpg','pic05.jpg''Alt Text','The larger image is shown in a centered div'],
['pic06sm.jpg','pic06.jpg''Alt Text','You can show the larger images in a different size to its default size','textstyle3'],
['pic07sm.jpg','pic07.jpg''Alt Text','You can show just an image, see next image'],
['pic08sm.jpg','pic08.jpg','Alt Text'],
['pic09sm.jpg','pic09.jpg''Alt Text','The thumbnails, the larger image, the text, and your style type are all coded into an array'],
['pic10sm.jpg','pic10.jpg','Image 10','Alt Text'],
['pic11sm.jpg','pic11.jpg','Image 11','Alt Text'],
['pic12sm.jpg','pic12.jpg','Image 12','Alt Text']
]

gallery1=[
['gallery1thumb1.jpg','gallery1bigpic1.jpg','Alt Text'],
['gallery1thumb2.jpg','gallery1bigpic2.jpg','Alt Text'],
['gallery1thumb3.jpg','gallery1bigpic3.jpg','Alt Text'],
['gallery1thumb4.jpg','gallery1bigpic4.jpg','Alt Text']
]

gallery2=[
['gallery2thumb1.jpg','gallery2bigpic1.jpg','Alt Text'],
['gallery2thumb2.jpg','gallery2bigpic2.jpg','Alt Text'],
['gallery2thumb3.jpg','gallery2bigpic3.jpg','Alt Text'],
['gallery2thumb4.jpg','gallery2bigpic4.jpg','Alt Text']
]


gallery3=[
['gallery3thumb1.jpg','gallery3bigpic1.jpg','Alt Text'],
['gallery3thumb2.jpg','gallery3bigpic2.jpg','Alt Text'],
['gallery3thumb3.jpg','gallery3bigpic3.jpg','Alt Text'],
['gallery3thumb4.jpg','gallery3bigpic4.jpg','Alt Text']
]



galleryListRows=3 // gallery list
galleryRows=3 // galleries

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

displayBorderWidth=8
displayBorderColor="#FFFFFF"

offsetX=0
offsetY=0

function showGalleryList(n){ // create list of galleries by showing the first thumbnail in each gallery
thumbHolder=document.getElementById("thumbholder")
thumbHolder.innerHTML=""

count=0
while(window["gallery"+count]){
newImage=document.createElement("IMG")
newImage.setAttribute("id","thumb"+count)
newImage.setAttribute("src",window["gallery"+count][0][0])
newImage.setAttribute("alt","View Gallery "+(count+1))
newImage.setAttribute("title","View Gallery "+(count+1))
newImage.setAttribute((document.getElementById&&!document.all?"class":"className"),"borderout")

newImage.style.width="45px"
newImage.style.height="60px"
newImage.style.marginRight="5px"
newImage.style.marginBottom="5px"

newImage.indexNum=count
newImage.onclick=function(){
showSelectedGallery(this.indexNum)
}

newImage.onmouseover=function(){
this.className='borderover'
}

newImage.onmouseout=function(){
this.className='borderout'
}

if(count!=0&&count%galleryListRows==0){
newBreak=document.createElement("BR")
document.getElementById("thumbholder").appendChild(newBreak)
}

document.getElementById("thumbholder").appendChild(newImage)

count++
}
document.getElementById("header").innerHTML="Galleries"
document.getElementById("viewgalleries").innerHTML=" "
}

function showSelectedGallery(n){ // create selected gallery thumbnails

document.getElementById("header").innerHTML="Gallery "+(n+1)
document.getElementById("viewgalleries").innerHTML="Back To Galleries"

thumbHolder=document.getElementById("thumbholder")
thumbHolder.innerHTML=""

count=0
while(window["gallery"+n][count]){
newImage=document.createElement("IMG")
newImage.setAttribute("id","thumb"+count)
newImage.setAttribute("src",window["gallery"+n][count][0])
newImage.setAttribute((document.getElementById&&!document.all?"class":"className"),"borderout")

newImage.style.width="45px"
newImage.style.height="60px"
newImage.style.marginRight="5px"
newImage.style.marginBottom="5px"

newImage.indexNum=count
newImage.onclick=function(){
showPic(n,this.indexNum)
}

newImage.onmouseover=function(){
this.className='borderover'
}

newImage.onmouseout=function(){
this.className='borderout'
}

if(count!=0&&count%galleryRows==0){
newBreak=document.createElement("BR")
document.getElementById("thumbholder").appendChild(newBreak)
}

document.getElementById("thumbholder").appendChild(newImage)

count++
}

preload=new Array()
for(var i=0;i<window["gallery"+n].length;i++){
preload[i]=new Image()
preload[i].src=window["gallery"+n][i][1]
}

}

function showPic(arrNum,indexNum){ // display larger image and text

displayEl=document.getElementById("imgholder")
displayPic=document.getElementById("mypic")
displayPic.onclick=function(){
displayEl.style.display="none"
}

imageWidth=preload[indexNum].width/100*imageSize
imageHeight=preload[indexNum].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.display="block"

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

displayPic.alt=window["gallery"+arrNum][indexNum][2] // show alt text

if(window["gallery"+arrNum][indexNum][3]){ // 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=window["gallery"+arrNum][indexNum][3]
displayEl.appendChild(displayText)

if(window["gallery"+arrNum][indexNum][4]){
document.getElementById("displaytext").className=window["gallery"+arrNum][indexNum][4] // apply style
}
else{
document.getElementById("displaytext").className="defaultstyle"
}

}

if(centerImage==1){
documentBody=(document.compatMode=="CSS1Compat"?document.documentElement:document.body)

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"
}

}

</script>
<style type="text/css">

.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}
.borderover{border:1px inset white;cursor:hand;cursor:pointer}


</style>

</HEAD>
<BODY onload="showGalleryList(0)">
<h1><span>Image Gallery 4</span></h1>

<div style="width:200px;border:2px solid #647369;background-color:#a6b0a6">
<div id="header" style="font-size:30px;text-align:center">Galleries</div>
<div id="viewgalleries" style="text-align:center;;cursor:hand;cursor:pointer" onclick="showGalleryList(0)">View Galleries</div>
<div id="thumbholder" style="height:300px;text-align:center;overflow:auto;padding-top:5px;border-top:2px solid #647369"></div>
</div>

<div id="imgholder" style="position:absolute;left:0px;top:0px;display:none" title="Click to close">
<img name="mypic" id="mypic" src="blank.gif" alt="" style="position:relative"></div> 

<P>
All the thumbnails are dynamically generated.<br>
The initial display of thumbnails show the number of galleries depicted by the first thumbnail from that gallery.<br>
On selecting an image the current thumbnails are replaced with the thumbnails for the selected gallery.<br>
While in a gallery if a thumbnail is selected its larger version is displayed.<br>
To return to the gallery selection click the View Galleries link</P>
</BODY>
</HTML>