데모를 확인하세요
아래는 본 예제의 자바스크립트 소스입니다.
<html>
<head>
<title>해피CGI</title>
<script language="javascript1.2">
var magnification=3 ; /* magnification ratio is 3X enlargement */
var magviewersize=.5 ; /* magnification viewer is 50% of the image width */
</script>
<script language="javascript1.2">
var quot="'";
var Magnifico=new Array();
var magnify=false;
var magStartX=0;
var magStartY=0;
function initMagnifier(){
for (im=0; im<document.images.length; im++){
var magthis=false;
if(document.images[im].parentNode.className.indexOf("magnify_this")>=0){magthis=true};
if(document.images[im].parentNode.href) {
if(document.images[im].parentNode.href.indexOf("initMagnifier")>=0){magthis=true} }
if( document.images[im].id.indexOf("Magnifier")>=0 || document.images[im].id.indexOf("Magtile")>=0 ){magthis=false};
if(magthis==true){ nextImage=document.images[im];
var thisImageCode=nextImage.parentNode.innerHTML.substr(0,nextImage.parentNode.innerHTML.indexOf(">"))+ ' id="bgbaseimg'+im+'" galleryimg="false" oncontextmenu="return false;" '+ ' onmouseover ="setMagnifier('+im+');" '+ ' onmouseout ="hideMagnifier('+im+'); return false" >';
if (nextImage.style.cssFloat){
var alignment=nextImage.style.cssFloat}
else if (nextImage.align) {
var alignment=nextImage.align
}
else {var alignment='none'} nextImage.parentNode.innerHTML= '<div id="placeholder'+im+'" style="position:relative; left:0px; top:0px; float:'+alignment+';'+ ' width:'+nextImage.offsetWidth+'px; height:'+nextImage.offsetHeight+'px;"'+ ' onclick="return false">'+ '<div id="imgholder'+im+'" style="position:absolute; left:0px; top:0px; border:0px solid blue; overflow:hidden">'+ thisImageCode+ '<div id=Magnifier'+im+' style="position:absolute; left:0px; top:0px; '+ ' width:'+(nextImage.offsetWidth*magviewersize)+'px; height:'+(nextImage.offsetHeight*magviewersize)+'px; '+ ' border:1px solid gray; visibility:hidden; overflow:hidden; '+ ' cursor:move; background-color:gray; " title="Move magnifier to see details"'+ ' ondrag="return false" '+ ' onmouseover ="setMagnifier('+im+'); " '+ ' onmousedown="showMagnifier('+im+',event.clientX,event.clientY); return false" '+ ' onmousemove="if (magnify==true) {moveMagnifier('+im+',event.clientX,event.clientY)}" '+ ' onmouseup ="magnify=false; return false" '+ '><img id="Magtile'+im+'" src="'+nextImage.src+'" style="position:absolute; '+ ' left:0px; top:0px; width:'+nextImage.offsetWidth*magnification+'px; border:0px;" '+ ' onmouseover="this.galleryimg='+quot+'no'+quot+'" oncontextmenu="return false;">'+ '</div></div></div>';
Magnifico[im]=document.getElementById('Magnifier'+im); document.getElementById('bgbaseimg'+im).style.cssFloat='none'; Magnifico[im].style.left=((document.getElementById('imgholder'+im).offsetWidth/2)-(Magnifico[im].offsetWidth/2))+'px'; Magnifico[im].style.top=((document.getElementById('imgholder'+im).offsetHeight/2)-(Magnifico[im].offsetHeight/2))+'px';
setMagtile(im);
}
}
}
function setMagnifier(idm){
Magnifico[idm].style.visibility='visible';
}
function setMagtile(idm){
MagImg=document.getElementById('Magtile'+idm);
xx=(MagImg.offsetWidth-Magnifico[idm].offsetWidth)/ (document.getElementById('imgholder'+idm).offsetWidth-Magnifico[idm].offsetWidth); yy=(MagImg.offsetHeight-Magnifico[idm].offsetHeight)/(document.getElementById('imgholder'+idm).offsetHeight-Magnifico[idm].offsetHeight);
MagImg.style.left=(0-(parseInt(Magnifico[idm].style.left))*xx)+'px' ;
MagImg.style.top=(0-(parseInt(Magnifico[idm].style.top))*yy)+'px' ;
}
function showMagnifier(idm,X,Y){
magnify=true;
magStartX=X; magStartY=Y;
}
function moveMagnifier(idm,X,Y){
Magnifico[idm].style.left=(parseInt(Magnifico[idm].style.left)+X-magStartX)+'px';
Magnifico[idm].style.top =(parseInt(Magnifico[idm].style.top) +Y-magStartY)+'px';
magStartX=X;
magStartY=Y;
if (Magnifico[idm].offsetLeft<=0 ){
magStartX=magStartX-Magnifico[idm].offsetLeft;
Magnifico[idm].style.left='0px' }
if (Magnifico[idm].offsetTop<=0 ) {magStartY=magStartY-Magnifico[idm].offsetTop;
Magnifico[idm].style.top='0px' }
var rtlimit=document.getElementById('imgholder'+idm).offsetWidth-Magnifico[idm].offsetWidth;
var btlimit=document.getElementById('imgholder'+idm).offsetHeight-Magnifico[idm].offsetHeight;
if (Magnifico[idm].offsetLeft>=rtlimit ) {magStartX=magStartX-(Magnifico[idm].offsetLeft-rtlimit);
Magnifico[idm].style.left=rtlimit+'px' }
if (Magnifico[idm].offsetTop>=btlimit ) {magStartY=magStartY-(Magnifico[idm].offsetTop-btlimit);
Magnifico[idm].style.top=btlimit+'px' } setMagtile(idm);
}
function hideMagnifier(idm){
Magnifico[idm].style.visibility="hidden";
magnify=false;
}
</script>
</head>
<body>
이미지 위에 마우스 커서를 올려보세요.<p>
<div style="font-size:1px; display:none;">zipzoom</div>
<a href="javascript:initMagnifier()" class="magnify_this"><img src="http://demo.happycgi.com/jini/pick1.jpg" border="0"></a><p>
<script language="javascript" defer>initMagnifier()</script>
</body>
</html>
|
