Фотогалерея с показом большого фото c анимационным эффектом (постепенное увеличение фото над окном)

Фотогалерея с показом большого фото

Главная Контакты Софт Термины Неисправности Поисковики Шаблоны

Просмотр скрипта

<script language="javascript">
var imageArr=["a01.jpg","a02.jpg","a03.jpg","a04.jpg","s4.jpg","a06.jpg","s2.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)}}
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:115px;height:150px;margin-bottom:20px; padding:10;}
.g8mousedown{border:2px inset white}
.g8mouseup{border:2px outset white}
</style>
</HEAD> <BODY bgcolor="#A1FEF9"><br><center><font color="#B50B02" size="4">Фотогалерея с показом большого фото</font></center>
<BODY onload="initIG8()">
<div id="thumbs">
<img name="ig8tn" src="a01.jpg"> <img name="ig8tn" src="a02.jpg"> <img name="ig8tn" src="a03.jpg">
 <img name="ig8tn" src="a04.jpg"> <img name="ig8tn" src="s4.jpg"> <img name="ig8tn" src="a06.jpg">
 <img name="ig8tn" src="s2.jpg">
</div>
<div id="g8box" style="position:absolute; left:50%; top:50%; 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>
</div>

Пример создания сайта
Размещение сайта в Интернете
Раскрутка сайта в Интернете
Заработок в Интернете
Visual Basic 6.0 с примерами
VBScript
Руководство по C++
JavaScript
Анимация в формате GIF
Вставка видео SWF в сайт.
Пиктограмма сайта (favicon)

Эффекты просмотра фото