<HTML>
<HEAD>
<TITLE>Фотогалерея с показом большого фото c анимац. эффектом </TITLE>
<script language="javascript">
//www.huntingground.freeserve.co.uk
var imageArr = [
"/ime/001.jpg","/ime/002.jpg","/ime/003.jpg","/ime/004.jpg","/ime/005.jpg","/ime/006.jpg","/ime/007.jpg","/ime/008.jpg","/ime/009.jpg",
"/ime/010.jpg","/ime/011.jpg","/ime/012.jpg"
]
imageSize=100
isCentered=0
isThumbs=1
autoRun=0
autoRunTime=3
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
fadeOutTimer=""
fadeInTimer=""
autoCount=0
autoTimer=""
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"){tdCenterX=g8Box.parentNode.offsetWidth/2}
else{tdCenterX=0}
border=0
if(document.defaultView&&document.defaultView.getComputedStyle){border=parseInt(document.defaultView.getComputedStyle(g8Box,'').getPropertyValue("border-left-width"))}
if(isCentered==0){defaultLeft=g8Box.offsetLeft+tdCenterX-border
defaultTop=g8Box.offsetTop-border}
else{defaultLeft=document.body.clientWidth/2
defaultTop=document.body.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{newWidth=preload[num].width/100*imageSize
newHeight=preload[num].height/100*imageSize}
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
if(newWidth==currentWidth&&newHeight==currentHeight){fadeOutG8()
setTimeout("g8Img.src=preload["+num+"].src;fadeInG8()",1000)
return}
fadeOutG8()
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{fadeInG8()
if(num!=-1){g8Img.src=preload[num].src}
currentWidth=newWidth
currentHeight=newHeight
currentLeft=defaultLeft-(newWidth/2)
currentTop=defaultTop-(newHeight/2)+200}}/////позиция большого фото от верха
g8Box.style.left=currentLeft+"px"
g8Box.style.top=currentTop+"px"
g8Box.style.width=currentWidth+"px"
g8Box.style.height=currentHeight+"px"}
function fadeOutG8(){opac-=fadeStep
fadeOutTimer=setTimeout("fadeOutG8()",5)
if(opac<10){clearTimeout(fadeOutTimer)}
if("filters"in document.body&&"alpha"in document.body.filters){g8Img.filters.alpha.Opacity=opac}
else{g8Img.style.opacity=(opac/100)-0.001}}
function fadeInG8(){opac+=fadeStep
fadeInTimer=setTimeout("fadeInG8()",5)
if(opac>100){clearTimeout(fadeInTimer)
opac=100
running=0}
if("filters"in document.body&&"alpha"in document.body.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)}
</script>
<style>
#thumbs img{
width:40px;
height:50px;
margin-bottom:20px
}
.g8mousedown{border:2px inset white}
.g8mouseup{border:2px outset white}
</style>
</head>
<BODY onload="initIG8()">
<table border="0" width="100%">
<tr>
<td width="160" align="center">
<div id="thumbs">
<img name="ig8tn" src="/ime/001.jpg"> <img name="ig8tn" src="/ime/002.jpg"> <img name="ig8tn" src="/ime/003.jpg"><br>
<img name="ig8tn" src="/ime/004.jpg"> <img name="ig8tn" src="/ime/005.jpg"> <img name="ig8tn" src="/ime/006.jpg"><br>
<img name="ig8tn" src="/ime/007.jpg"> <img name="ig8tn" src="/ime/008.jpg"> <img name="ig8tn" src="/ime/009.jpg"><br>
<img name="ig8tn" src="/ime/010.jpg"> <img name="ig8tn" src="/ime/011.jpg"> <img name="ig8tn" src="/ime/012.jpg">
</div>
</td>
<td height="480">
<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" style="width:100%; height:100%; filter:alpha(opacity=0);opacity:0"></div>
</td>
</tr>
</table>
</BODY>
</HTML>
0
