Image Gallery 1c



This simple image gallery shows thumbnails and its larger self when clicked. Text can also be shown below the larger image


The thumbnails are nested within a div that has a fixed height and the overflow set to auto.
This allows the thumbnails to be scrolled instead of having to scroll the whole page.
The tag for the larger image and the div for the text are nested within another div.
This gives the overall effect that you see here.
If you take a look at Image Gallery 1c Fade you will see that the thumbs can be shown on the right of the page
The custom coloured scrollbar is only available in IE 
<HTML>
<HEAD>
<TITLE>Image Gallery 1c</TITLE>

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

//Jeff
//www.huntingground.freeserve.co.uk
ig1cArr=[

['pic01.jpg','Image 1','This area shows any text that goes with the image.'],
['pic02.jpg','Image 2','A default style can be set for this text box and its contents','textstyle2'],
['pic03.jpg','Image 3','You can also over-ride the default style and create individual text box styles','textstyle3'],
['pic04.jpg','Image 4','You can show just the image by leaving the appropriate array index empty','textstyle4'],
['pic05.jpg','Image 5',''],
['pic06.jpg','Image 6','The thumbnails are nested within a div that has a fixed height and the overflow set to auto'],
['pic07.jpg','Image 7','The larger image and any text are coded into the relevant array index'],
['pic08.jpg','Image 8','Enjoy and have a nice day'],
['pic09.jpg','Image 9',''],
['pic10.jpg','Image 10','']  // no comma at the end of the last line

]

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

function showIG1cPic(num){
document.images["pic"].src=ig1cArr[num][0]
document.images["pic"].alt=ig1cArr[num][1]
document.getElementById("imgtxt").innerHTML=ig1cArr[num][2]
document.getElementById("imgtxt").style.width=preload[num].width+"px"

if(ig1cArr[num][3]){
document.getElementById("imgtxt").className=ig1cArr[num][3]
}
else if(ig1cArr[num][2]==""){
document.getElementById("imgtxt").className=""
}
else{
document.getElementById("imgtxt").className="defaultstyle"
}

}
 
// -->
</script>

<style type="text/css">

#imgholder{
width:99%;
text-align:center;
}

#imgtxt{
text-align:left;
margin:auto
}

.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:#000080;background:#ddddee;border:2px solid #bbbbcc;}

</style>

<!--[if IE]>

<style type="text/css">
#thumbs{
scrollbar-base-color:#eeeedd;
scrollbar-face-color:#eeeedd;
scrollbar-track-color:#eeeedd;
scrollbar-arrow-color:#ccbbbb;
scrollbar-3d-light-color:#ccccbb;
scrollbar-highlight-color:#ccccbb;
scrollbar-shadow-color:#ccccbb;
scrollbar-dark-shadow-color:#bbccbb;
}
</style>

<! [endif]-->

</HEAD>
<BODY>
<h1><span>Image Gallery 1c</span></h1>
<center>
<table border="0" width="90%">
<tr>
<td width="250" valign="top">
<div id="thumbs" style="height:400px;overflow:auto">

<center>
<img src="pic01sm.jpg" onclick="showIG1cPic(0)">
<img src="pic02sm.jpg" onclick="showIG1cPic(1)">
<img src="pic03sm.jpg" onclick="showIG1cPic(2)">
<img src="pic04sm.jpg" onclick="showIG1cPic(3)"><BR>
<img src="pic05sm.jpg" onclick="showIG1cPic(4)">
<img src="pic06sm.jpg" onclick="showIG1cPic(5)">
<img src="pic07sm.jpg" onclick="showIG1cPic(6)">
<img src="pic08sm.jpg" onclick="showIG1cPic(7)"><BR>

<div class="textstyle2" style="width:210px;text-align:justify;padding:5px;margin-bottom:14px">
This simple image gallery shows thumbnails and its larger self when clicked.
Text can also be shown below the larger image
</div>

<img src="pic09sm.jpg" onclick="showIG1cPic(8)">
<img src="pic10sm.jpg" onclick="showIG1cPic(9)">

</center>

</div>
</td>
<td valign="top">

<div id="imgholder">
<img name="pic" id="pic" src="blank.gif" alt="">
<div id="imgtxt"></div>
</div>

</td>
</tr>
</table>
</center>

</BODY>
</HTML>