|
|
|
The first click of a thumbnail brings the display into view to the size of the larger image
Subsequent clicks will resize the display to fit the next image
A fade effect is applied to the images, fading the current image out and the next image in.
Clicking the larger image shrinks the display out of view
If you put the g8box div in a table cell you should make the size of this td cell at least the height and width of the largest image and the variable isCentered must be set to zero.
The display can be centered in the browser window by setting variable isCentered to 1
The g8box div code can then be placed anywhere in the page.
Auto Mode
You can use the script without thumbnails and sequencially display all your images by setting variable autoRun to 1
If you are not showing thumbnails set variable isThumbs to zero
If you use auto run with thumbnails once a thumbnail is clicked auto run is cancelled.
All thumbnails used with this gallery must be given the same name ig8tn
<img name="ig8tn" src="pic01sm.jpg">
The script needs this name to dynamically add the onclick event and assign css class names g8mousedown and g8mouseup
You can resize the larger image by setting variable imageSize to the size you want.
imageSize = 50 will show the larger images at 50 percentage of their default size.
<HTML>
<HEAD>
<TITLE>Image Gallery 8</TITLE>
<script type="text/javascript">
<!--
// Jeff
//www.huntingground.freeserve.co.uk
var imageArr = [
"pic01.jpg","pic02.jpg","pic03.jpg","pic04.jpg","pic05.jpg","pic06.jpg","pic07.jpg","pic08.jpg","pic09.jpg",
"pic10.jpg","pic11.jpg","pic12.jpg","pic13.jpg","pic14.jpg","pic15.jpg","pic16.jpg","pic17.jpg","pic18.jpg"
]
imageSize=100 // size larger image is shown at in %
isCentered=0 // set to 1 only if centering in browser window
isThumbs=1 // 0 = no 1 = yes, if you are not showing thumbnails set to zero
/*
You can use the script without thumbnails and sequencially display all your images by setting variable autoRun to 1
If you use auto run with thumbnails once a thumbnail is clicked auto run is cancelled.
*/
autoRun=1 // 0 = no 1 = yes
autoRunTime = 3 // seconds
var preload=[]
for(var i=0;i<imageArr.length;i++){
preload[i]=new Image()
preload[i].src=imageArr[i]
}
function initIG8(){
opac=0
aniTimer=""
running=0
fadeStep=2
stepNum=50
lastNum=null
faderTimer=""
autoCount=0
autoTimer=""
/*
All thumbnails used with this gallery must be given the same name ig8tn
The script needs this name to dynamically add the following onclick event and class names
*/
if(isThumbs==1){
g8Thumbs=document.getElementsByName("ig8tn")
for(var i=0;i<g8Thumbs.length;i++){
g8Thumbs[i].i=i
g8Thumbs[i].onclick=function(){clearTimeout(autoTimer);nextG8Pic(this.i)}
g8Thumbs[i].onmousedown=function(){this.className="g8mousedown"}
g8Thumbs[i].onmouseup=function(){this.className="g8mouseup"}
g8Thumbs[i].className="g8mouseup"
}
}
g8Box=document.getElementById("g8box")
g8Img=document.getElementById("g8img")
if(g8Box.parentNode.nodeName=="TD"){
moz=document.getElementById&&!document.all
tdCell=g8Box.parentNode
tdLeftPos = tdCell.offsetLeft
tdTopPos = tdCell.offsetTop
parentEl = tdCell.offsetParent
while (parentEl != null){
if(parentEl.tagName == "TD"){
if(!moz){
tdLeftPos += parentEl.clientLeft
tdTopPos += parentEl.clientTop
}
else{
if(parentEl.tagName == "TABLE"){
nParBorder = parseInt(parentEl.border)
if(nParBorder > 0){
nLeftPos += nParBorder
}
}
}
}
tdLeftPos += parentEl.offsetLeft
tdTopPos += parentEl.offsetTop
parentEl = parentEl.offsetParent
}
tdCenterX=g8Box.parentNode.offsetWidth/2
tdCenterY=g8Box.parentNode.offsetHeight/2
}
else{
tdCenterX=0
tdCenterY=0
}
border=0
if(document.defaultView && document.defaultView.getComputedStyle){
border=parseInt(document.defaultView.getComputedStyle(g8Box, '').getPropertyValue("border-left-width"))
}
documentBody=(document.compatMode=="CSS1Compat"?document.documentElement:document.body)
if(isCentered==0){
defaultLeft=tdLeftPos+tdCenterX-border
defaultTop=tdTopPos+tdCenterY-border
}
else{
defaultLeft=documentBody.clientWidth/2
defaultTop=documentBody.clientHeight/2
}
g8Box.style.left=defaultLeft+"px"
g8Box.style.top=defaultTop+"px"
if(autoRun==1){
autoRunner()
}
}
function nextG8Pic(num){
if(lastNum==num||running==1){return}
closing=false
running=1
autoCount=num
currentLeft=g8Box.offsetLeft
currentTop=g8Box.offsetTop
currentWidth=g8Box.offsetWidth-(border*2)
currentHeight=g8Box.offsetHeight-(border*2)
if(num==-1){
newWidth=wStep
newHeight=hStep
wDirection="in"
hDirection="in"
closing=true
}
else{
nextPicWidth=preload[num].width // images full width
nextPicHeight=preload[num].height // images full height
newWidth=nextPicWidth/100*imageSize // images displayed width
newHeight=nextPicHeight/100*imageSize // images displayed height
}
if(newWidth>currentWidth){
wStep=(newWidth-currentWidth)/stepNum}
else{wStep=(currentWidth-newWidth)/stepNum}
if(newHeight>currentHeight){
hStep=(newHeight-currentHeight)/stepNum}
else{hStep=(currentHeight-newHeight)/stepNum}
g8Box.style.visibility="visible"
wDone=false
hDone=false
lastNum=num
fading="out"
if(newWidth==currentWidth&&newHeight==currentHeight){
fadeG8Pic()
setTimeout("g8Img.src=preload["+num+"].src;fadeInG8()",1000)
return
}
fadeG8Pic()
animateG8(num)
}
function animateG8(num){
if(newWidth>currentWidth){
currentWidth+=wStep
currentLeft-=wStep/2
wDirection="out"
}
else{
currentWidth-=wStep
currentLeft+=wStep/2
wDirection="in"
}
if(newHeight>currentHeight){
currentHeight+=hStep
currentTop-=hStep/2
hDirection="out"
}
else{
currentHeight-=hStep
currentTop+=hStep/2
hDirection="in"
}
aniTimer=setTimeout("animateG8("+num+")",10)
if(wDirection=="out"&¤tWidth>=newWidth-wStep/2){wDone=true}
if(wDirection=="in"&¤tWidth<=newWidth+wStep/2){wDone=true}
if(hDirection=="out"&¤tHeight>=newHeight-hStep/2){hDone=true}
if(hDirection=="in"&¤tHeight<=newHeight+hStep/2){hDone=true}
if(wDone&&hDone){
clearTimeout(aniTimer)
if(closing){
g8Box.style.visibility="hidden"
currentWidth=1
currentHeight=1
currentLeft=defaultLeft
currentTop=defaultTop
running=0
}
else{
fading="in"
fadeG8Pic()
if(num!=-1){g8Img.src=preload[num].src}
currentWidth=newWidth
currentHeight=newHeight
currentLeft=defaultLeft-(newWidth/2)
currentTop=defaultTop-(newHeight/2)
}
}
g8Box.style.left=currentLeft+"px"
g8Box.style.top=currentTop+"px"
g8Box.style.width=currentWidth+"px"
g8Box.style.height=currentHeight+"px"
}
function fadeG8Pic(){
clearTimeout(faderTimer)
faderTimer=setTimeout("fadeG8Pic()",5)
if(fading=="out"){
opac-= fadeStep
if(opac<5){
opac=5
clearTimeout(faderTimer)
}
}
else{
opac+= fadeStep
if(opac>100){
clearTimeout(faderTimer)
opac=100
running=0
}
}
if(g8Img.filters){g8Img.filters.alpha.Opacity=opac}
else{g8Img.style.opacity=(opac/100)-0.001}
}
function autoRunner(){
nextG8Pic(autoCount)
if(autoCount<imageArr.length-1){autoCount++}
else{autoCount=0}
autoTimer=setTimeout("autoRunner()",autoRunTime*1000)
}
// add onload="initIG8()" to the opening BODY tag
// -->
</script>
<style type="text/css">
#thumbs img{
width:40px;
height:30px;
margin-bottom:20px
}
.g8mousedown{border:2px inset white}
.g8mouseup{border:2px outset white}
#g8img{
width:100%;
height:100%;
opacity:0
}
</style>
<!--[if IE]>
<style type="text/css">
#g8img{filter:alpha(opacity=0)}
</style>
<! [endif]-->
</HEAD>
<BODY onload="initIG8()">
<h1>Image Gallery 8</h1>
<table border="0" style="width:100%;border:4px ridge #00C000">
<tr>
<td align="center" style="width:160px;border-right:2px dashed #00A000">
<div id="thumbs">
<img name="ig8tn" src="pic01sm.jpg" alt=""> <img name="ig8tn" src="pic02sm.jpg" alt=""> <img name="ig8tn" src="pic03sm.jpg" alt=""><BR></div> </td> <td style="height:480px"><div id="g8box" style="position:absolute;width:1px;height:1px;font-size:1px;background-color:#000000; z-index:5;border:4px ridge #008000;visibility:hidden" onclick="nextG8Pic(-1)"><img id="g8img" src="" alt=""></div>
</td> </tr> </table> </BODY> </HTML>