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

Pubblicato il settembre 4, 2013, in HTML con tag , , , , , , , , , , , , , . Aggiungi il permalink ai segnalibri. Lascia un commento.

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

%d blogger hanno fatto clic su Mi Piace per questo: