Archivi Blog

How to magnify an image

Ecco un semplice script (in standard javascript) per creare un effetto “lente da ingrandimento” sulle vostre immagini.

Quello che vi occorre prima di iniziare è:

  • un’immagine icona che vi servirà per dire che l’immagine ha l’effetto “lente da ingrandimento”
  • un’immagine pixel (1×1) che sarà la vostra lente d’ingrandimento (le dimensioni della lenta sono impostatili nella funzione javascript)
  • un’immagine piccola (quella che verrà mostrata nella pagina)
  • un’immagine grande (quella ad “alta definizione”)

Come primo passo, inserite nei vostri fogli di stile i seguenti valori (alternativa inseriteli come tag style dentro il tag head)

#imagePane {
display: block;
float: left;
margin-bottom: 12px;
margin-top: 10px;
position: relative;
width: 494px; // this parameter depends by image dimensions
}
#imageArea {
height: 370px; // this parameter depends by image dimensions
left: 0;
position: relative;
top: 0;
width: 494px; // this parameter depends by image dimensions
}
.imageAreaClass {
display: block;
height: 370px; // this parameter depends by image dimensions
width: 494px; // this parameter depends by image dimensions
}
#zoomImagePane {
border: 1px none black;
display: none;
height: 150px; // this parameter depends by image dimensions
overflow: hidden;
width: 150px; // this parameter depends by image dimensions
}
#bigImage {
height: 768px; // this parameter depends by image dimensions
position: absolute;
width: 1024px; // this parameter depends by image dimensions
}
#zoom {
left: 0;
position: absolute;
top: 0;
}
#zoomIcon {
bottom: 17px;
display: block;
float: right;
position: absolute;
right: 13px;
z-index: 10;
}

Come secondo passo, inserite le funzioni javascript nella vostra libreria js (alternativa inseriteli come tag script dentro il tag head)

var zoom_obj =null;
var ev = null;
var zoomImagePane =null;
var magnifierImage = null;
var zoomOffsetHeight=370;
var zoomOffsetWidth=494;
var magnifierWidth=150;
var magnifierHeight=150;
function zoomInit(zoom_object,evt,zoomDiv_id,zoomWidth,zoomHeight,zoomWidth){
zoom_object.style.opacity = 0;
zoom_object.style.filter = ‘alpha(opacity=0)’;
zoom_obj = zoom_object;
zoomImagePane = document.getElementById(zoomDiv_id);
magnifierImage = zoomImagePane.getElementsByTagName(“img”)[0];
zoomOffsetHeight = zoom_obj.offsetHeight;
zoomOffsetWidth=zoom_obj.offsetWidth;
magnifierHeight=zoomHeight;
magnifierWidth=zoomWidth;
if(window.addEventListener){ // Mozilla, Netscape, Firefox
zoom_obj.onmousemove=zoom;
} else { // IE
zoom_obj.attachEvent(‘onmousemove’, zoom);
}
}

function zoom(e){
ev = fixE(e);
if(zoomImagePane){
zoomImagePane.style.position =”absolute”;
zoomImagePane.style.display =”block”;
var lastLeft = (ev.layerX – zoomImagePane.offsetWidth*0.5);
var lastTop =(ev.layerY – zoomImagePane.offsetHeight*0.5);
var extraLeft=0;
var extraTop=0;
if(parseFloat(ev.layerX)<= magnifierWidth*0.5){
zoomImagePane.style.left =”0px”;
zoomImagePane.style.width = (ev.layerX+ magnifierWidth*0.5) + “px”;
extraLeft= magnifierWidth*0.5 – ev.layerX;
}else if(parseFloat(ev.layerX) >= (zoomOffsetWidth-magnifierWidth*0.5)){
zoomImagePane.style.left = ( ev.layerX – magnifierWidth*0.5 ) +”px”;
zoomImagePane.style.width = ( zoomOffsetWidth – ev.layerX + magnifierWidth*0.5 ) +”px”;
extraLeft=-(magnifierWidth*0.5 – zoomOffsetWidth + ev.layerX);
}else{
zoomImagePane.style.left=lastLeft +”px”;
zoomImagePane.style.width=magnifierWidth+”px”;
extraLeft=0;
}

if(parseFloat(ev.layerY)<=magnifierHeight*0.5){
zoomImagePane.style.top =”0px”;
zoomImagePane.style.height = (ev.layerY+magnifierHeight*0.5) + “px”;
extraTop=magnifierHeight*0.5-ev.layerY;
}else if(parseFloat(ev.layerY)>=(zoomOffsetHeight-magnifierHeight*0.5)){
zoomImagePane.style.top = ( ev.layerY – magnifierHeight*0.5 ) +”px”;
zoomImagePane.style.height = ( zoomOffsetHeight – ev.layerY + magnifierHeight*0.5 ) +”px”;
extraTop=-(magnifierHeight*0.5 – zoomOffsetHeight + ev.layerY );
}else{
zoomImagePane.style.top =lastTop +”px”;
zoomImagePane.style.height =magnifierHeight+”px”;
extraTop=0;
}

if(magnifierImage){
var ratioH = zoomOffsetHeight/magnifierImage.offsetHeight;
var ratioW = zoomOffsetWidth/magnifierImage.offsetWidth;
var lastLeftImg = ( -ev.layerX / ratioW + (zoomImagePane.offsetWidth – extraLeft)*0.5 );
var lastTopImg = ( -ev.layerY / ratioH + (zoomImagePane.offsetHeight – extraTop)*0.5 );
magnifierImage.style.left =lastLeftImg +”px”;
magnifierImage.style.top = lastTopImg+”px”;
}
}
}

function zoomEnd(){
if(zoomImagePane){
zoomImagePane.style.display =”none”;
}
}

function fixE(e){
if (typeof e == ‘undefined’) e = window.event;
if (typeof e.layerX == ‘undefined’) e.layerX = e.offsetX;
if (typeof e.layerY == ‘undefined’) e.layerY = e.offsetY;
return e;
}

Infine inserite il codice html dentro il corpo della vostra pagina (in neretto le impostazioni da configurare)

<div id=”imagePane”>
<div id=”imageArea”>
<!– magnifier icon –>
<img id=”zoomIcon” src=”path_of_magnifier_image” alt=”this is the magnifier image” />
<!– small image –>
<img class=”imageAreaClass” src=”path_of_small_image” alt=”this is the small image” id=”smallImage”/>
<div id=”zoomImagePane”>
<!– big image –>
<img id=”bigImage” src=”path_of_big_image” alt=”this is the big image”/>
</div>
<!– this is the image used as zoomed area –>
<img id=”zoom” src=”path_of_pixel_image” class=”imageAreaClass”
onmouseover=”zoomInit(this,event,’zoomImagePane’,’bigImage’,150,150)” onmouseout=”zoomEnd()” />
</div>
</div>

Potete verificare la funzionalità dello script su

http://www.zupersite.com/sample/zoom.htm

Where is waldo?

Use my magnifier to identify where is Waldo

Annunci