<HTML>
<HEAD>
<TITLE>Image Gallery 1c Fade</TITLE>
<script type="text/javascript">
<!--
//Jeff
//www.huntingground.freeserve.co.uk
ig1cfArr=[
['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
]
dualFade=1 // 0 = fades in, 1 = fades out then in
preload=new Array()
for(var i=0;i<ig1cfArr.length;i++){
preload[i]=new Image()
preload[i].src=ig1cfArr[i][0]
}
fadeStep = 2
fadeSpeed=10
minFadeValue=0
lastN=null
fading=0
function nextIG1cfPic(num){
displayEl=document.getElementById("imgholder")
if(displayEl.filters&&!window.opera){
startOpac=displayEl.filters.alpha.opacity
}
else{
startOpac=displayEl.opacity
}
if(lastN==num||fading==1){return}
if(dualFade==0||startOpac==0){fadeValue=0}
else{fadeValue=100}
picNum=num
lastN=num
fadeIG1cfPic()
}
function fadeIG1cfPic(){
fading=1
fadeValue -= fadeStep
fadeTimer=setTimeout("fadeIG1cfPic()",fadeSpeed)
if(displayEl.filters&&!window.opera){displayEl.filters.alpha.opacity=fadeValue;}
else{displayEl.style.opacity=(fadeValue/100)-0.1}
if(fadeValue<minFadeValue){ // for fade out first
fadeValue=minFadeValue
fadeStep= -fadeStep
showIG1cfPic(picNum)
}
if(fadeValue>=100){ // fade in
fadeValue=100
fadeStep= -fadeStep
fading=0
clearTimeout(fadeTimer)
}
}
function showIG1cfPic(num){
document.images["pic"].style.visibility="visible"
document.images["pic"].src=ig1cfArr[num][0]
document.images["pic"].alt=ig1cfArr[num][1]
document.getElementById("imgtxt").innerHTML=ig1cfArr[num][2]
document.getElementById("imgtxt").style.width=preload[num].width+"px"
if(ig1cfArr[num][3]){
document.getElementById("imgtxt").className=ig1cfArr[num][3]
}
else if(ig1cfArr[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:#000000;background:#ddddee;border:1px solid #bbbbcc;}
</style>
<!--[if IE]>
<style type="text/css">
#thumbs{
scrollbar-base-color:white;
scrollbar-face-color:white;
scrollbar-track-color:white;
scrollbar-arrow-color:#616d94;
scrollbar-3d-light-color:#616d94;
scrollbar-highlight-color:#616d94;
scrollbar-shadow-color:#616d94;
scrollbar-dark-shadow-color:#616d94;
filter:chroma(color=#FFFFFF)
}
</style>
<! [endif]-->
</HEAD>
<BODY>
<h1><span>Image Gallery 2b Fade</span></h1>
<center>
<table border="0" width="90%">
<tr>
<td valign="top">
<div id="imgholder" style="filter:alpha(opacity=0);opacity:0.9">
<img name="pic" id="pic" src="blank.gif" alt="" style="visibility:hidden">
<div id="imgtxt"></div>
</div>
</td>
<td width="250" valign="top">
<div id="thumbs" style="height:400px;overflow:auto">
<center>
<img src="pic01sm.jpg" onclick="nextIG1cfPic(0)">
<img src="pic02sm.jpg" onclick="nextIG1cfPic(1)">
<img src="pic03sm.jpg" onclick="nextIG1cfPic(2)">
<img src="pic04sm.jpg" onclick="nextIG1cfPic(3)"><BR>
<img src="pic05sm.jpg" onclick="nextIG1cfPic(4)">
<img src="pic06sm.jpg" onclick="nextIG1cfPic(5)">
<img src="pic07sm.jpg" onclick="nextIG1cfPic(6)">
<img src="pic08sm.jpg" onclick="nextIG1cfPic(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="nextIG1cfPic(8)">
<img src="pic10sm.jpg" onclick="nextIG1cfPic(9)">
<img src="pic11sm.jpg" onclick="nextIG1cfPic(10)">
</center>
</div>
</td>
</tr>
</table>
</center>
</BODY>
</HTML>
