Библиотека Javascript SE@RCHER

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML><HEAD>
<TITLE>Открытие большого фото на затемненном фоне окна</TITLE>
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251">
<SCRIPT type=text/javascript>  
images=[ 
['http://www.03www.su/pic/001.jpg','Image 1','Описание к фото 1.'], 
['http://www.03www.su/pic/002.jpg','Image 2','Описание к фото 2'], 
['http://www.03www.su/pic/003.jpg','Image 3','Описание к фото 3'] 
] 
doFade=1 
doPreviews=1  
imageSize=100  
centerImage=1  
displayBorderWidth=8 
displayBorderColor="#FFFFFF" 
offsetX=0 
offsetY=0 
isHidden=true 
current=null 
preload=new Array() 
for(var i=0;i<images.length;i++){ 
preload[i]=new Image() 
preload[i].src=images[i][0] 
} 
function initPreviews(){ 
if(doPreviews==1){ 
newDiv=document.createElement("DIV") 
newDiv.setAttribute("id","previewimages") 
document.body.appendChild(newDiv) 
}} 
isPreviews=false 
firstFade=1 
function showImage(num){ 
nextPic=num 
isHidden=false 
current=num 
displayEl=document.getElementById("imgholder") 
displayPic=document.images["pic"] 
displayPic.onclick=function(){ 
displayEl.style.display="none" 
doFade=1 
firstFade=1 
hide() 
} 
if(document.getElementById("previous")&&document.getElementById("previous").nodeName=="IMG"){ 
previewEl=document.getElementById("previewimages") 
isPreviews=true 
} 
documentBody=(document.compatMode=="CSS1Compat"?document.documentElement:document.body) 
if(isPreviews){ 
previewEl.style.top=(documentBody.clientHeight + documentBody.scrollTop) - 0+"px" 
previewEl.style.display="block" 
} 
imageWidth=preload[num].width/120*imageSize 
imageHeight=preload[num].height/120*imageSize 
if(document.getElementById("displaytext")){ 
displayEl.removeChild(displayText) 
} 
displayEl.style.backgroundColor=displayBorderColor 
displayEl.style.width=(displayBorderWidth==0?imageWidth:imageWidth+(displayBorderWidth*2))+"px" 
displayEl.style.height=(displayBorderWidth==0?imageHeight:imageHeight+(displayBorderWidth*2))+"px" 
displayEl.style.display="block" 
displayPic.src=preload[num].src 
displayPic.style.width=imageWidth+"px" 
displayPic.style.height=imageHeight+"px" 
displayPic.style.margin=displayBorderWidth+"px" 
displayPic.alt=images[num][1] 
if(images[num][2]){  
displayEl.style.height="" 
displayText=document.createElement("DIV") 
displayText.setAttribute("id","displaytext") 
with(displayText.style){ 
marginLeft=displayBorderWidth+"px" 
marginRight=displayBorderWidth+"px" 
marginBottom=displayBorderWidth+"px" 
} 
displayText.innerHTML=images[num][2] 
displayEl.appendChild(displayText) 
if(images[num][3]){ 
document.getElementById("displaytext").className=images[num][3] 
} 
else{ 
document.getElementById("displaytext").className="defaultstyle" 
}} 
if(centerImage==1){ 
centerLeft=(documentBody.clientWidth/2) - (displayEl.offsetWidth/2) + offsetX 
centerTop=(documentBody.clientHeight/2)-(displayEl.offsetHeight/2) + documentBody.scrollTop + offsetY 
displayEl.style.left=centerLeft+"px" 
displayEl.style.top=centerTop+"px" 
} 
if(firstFade==1){ 
} 
if(doFade==1){ 
canvasEl=document.getElementById("canvas") 
canvasEl.style.width=documentBody.clientWidth+"px" 
canvasEl.style.height=(documentBody.scrollHeight<documentBody.clientHeight?documentBody.clientHeight:documentBody.scrollHeight)+"px" 
opac=0 
canvasEl.style.display="block" 
goOpac() 
} 
firstFade=0 
} 
function hide(){ 
isHidden=true 
if(doFade==1){ 
goOpac() 
} 
if(isPreviews){ 
document.getElementById("previewimages").style.display="none" 
} 
displayEl.style.display="none" 
} 
step=10 
moz=document.getElementById&&!document.all 
function goOpac(){ 
opac+=step 
if(canvasEl.filters){canvasEl.filters.alpha.opacity=opac} 
else{canvasEl.style.opacity=(opac/100)-0.001} 
timer=setTimeout("goOpac()",10) 
if(opac>=80){ 
step=-step 
clearTimeout(timer) 
} 
if(opac<0){ 
step=-step 
clearTimeout(timer) 
canvasEl.style.display="none" 
}} 
</script>  
<STYLE type=text/css>.thumbs IMG { 
  WIDTH: 50px; HEIGHT: 70px 
} 
.thumb_over { 
  BORDER-RIGHT: #ffffff 2px inset; BORDER-TOP: #ffffff 2px inset; BORDER-LEFT: #ffffff 2px inset; CURSOR: pointer; BORDER-BOTTOM: #ffffff 2px inset 
} 
.thumb_out { 
  BORDER-RIGHT: #ffffff 2px outset; BORDER-TOP: #ffffff 2px outset; BORDER-LEFT: #ffffff 2px outset; BORDER-BOTTOM: #ffffff 2px outset 
} 
   
   
#canvas { 
  FILTER: alpha(opacity=0) 
} 
.thumb_over { 
  CURSOR: hand 
} 
.borderout { 
  CURSOR: hand 
} 
</style>
</head>
<BODY onload=initPreviews()>  
<DIV id=canvas style="DISPLAY: none; Z-INDEX: 5; LEFT: 0px; POSITION: absolute; TOP: 0px; BACKGROUND-COLOR: #000000; opacity: 0"></DIV>  
<DIV id=imgholder title="Click image to close"  
style="DISPLAY: none; Z-INDEX: 6; LEFT: 0px; POSITION: absolute; TOP: 50px"><IMG id=pic style="POSITION: relative" alt=" " src="blank.gif"  
name=pic> </DIV>  
<DIV class=thumbs>  
<IMG class=thumb_out onmouseover="this.className='thumb_over'" onclick=showImage(0) onmouseout="this.className='thumb_out'" alt="" src="http://www.03www.su/pic/001.jpg">  
  <IMG class=thumb_out onmouseover="this.className='thumb_over'" onclick=showImage(1) onmouseout="this.className='thumb_out'" alt="" src="http://www.03www.su/pic/002.jpg">  
<pre>

</pre> 
<IMG class=thumb_out onmouseover="this.className='thumb_over'" onclick=showImage(2) onmouseout="this.className='thumb_out'" alt="" src="http://www.03www.su/pic/003.jpg">  
</DIV> 
</body>  
</html>