Effetto zoom nelle immagini in stile Amazon e eBay.

Come installare l'effetto zoom per usarlo nelle immagini in modo da mostrarne i dettagli al passaggio del mouse nella falsariga di quello che avviene su Amazon, eBay e altri store online.

Avrete certamente acquistato qualcosa su Amazon o su eBay e se ancora non lo avete fatto vi sarà comunque capitato di consultare il prezzo di un prodotto per poi paragonarlo a quello presente nei normali negozi. A molti di questi oggetti in vendita è associato un bellissimo effetto zoom che è presente anche in molti altri store online e che nel momento in cui si passa sopra alla immagine con il cursore se ne possono visualizzare i dettagli in una immagine molto più grande in un rettangolo che appare a lato.

Utilizzando il plugin Easy Image Zoom che è distribuito gratuitamente con licenza MIT vediamo come installare questo effetto segnatamente su Blogger ma direi in qualsiasi pagina web visto che nella installazione non è presente nessun tag specifico di Blogger. 

Si va su Modello > Modifica HTML, si cerca la riga </head> e sopra si incolla questo codice

<script src="http://code.jquery.com/jquery-2.0.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function($) {
$.fn.easyZoom = function(options){
var defaults = {
id: 'easy_zoom',
parent: 'body',
append: true,
preload: 'Sto caricando...',
error: 'Problema nel caricamento della immagine.'
};
var obj;
var img = new Image();
var loaded = false;
var found = true;
var timeout;
var w1,w2,h1,h2,rw,rh;
var over = false;
var options = $.extend(defaults, options);
this.each(function(){
obj = this;
// works only for anchors
var tagName = this.tagName.toLowerCase();
if(tagName == 'a'){
var href = $(this).attr('href');
img.src = href + '?' + (new Date()).getTime() + ' =' + (new Date()).getTime();
$(img).error(function(){ found = false; })
img.onload = function(){
loaded = true;
img.onload=function(){};
};
$(this)
.css('cursor','crosshair')
.click(function(e){ e.preventDefault(); })
.mouseover(function(e){ start(e); })
.mouseout(function(){ hide(); })
.mousemove(function(e){ move(e); })
};
});
function start(e){
hide();
var zoom = $('<div id="'+ options.id +'">'+ options.preload +'</div>');
if(options.append) { zoom.appendTo(options.parent) } else { zoom.prependTo(options.parent) };
if(!found){
error();
} else {
if(loaded){
show(e);
} else {
loop(e);
};
};
};
function loop(e){
if(loaded){
show(e);
clearTimeout(timeout);
} else {
timeout = setTimeout(function(){loop(e)},200);
};
};
function show(e){
over = true;
$(img).css({'position':'absolute','top':'0','left':'0'});
$('#'+ options.id).html('').append(img);
w1 = $('img', obj).width();
h1 = $('img', obj).height();
w2 = $('#'+ options.id).width();
h2 = $('#'+ options.id).height();
w3 = $(img).width();
h3 = $(img).height();
w4 = $(img).width() - w2;
h4 = $(img).height() - h2;
rw = w4/w1;
rh = h4/h1;
move(e);
};
function hide(){
over = false;
$('#'+ options.id).remove();
};
function error(){
$('#'+ options.id).html(options.error);
};
function move(e){
if(over){
// target image movement
var p = $('img',obj).offset();
var pl = e.pageX - p.left;
var pt = e.pageY - p.top;
var xl = pl*rw;
var xt = pt*rh;
xl = (xl>w4) ? w4 : xl;
xt = (xt>h4) ? h4 : xt;
$('#'+ options.id + ' img').css({'left':xl*(-1),'top':xt*(-1)});
};
};
};
})(jQuery);</script>
<script type="text/javascript">
jQuery(function($){
$('a.zoom').easyZoom();
});
</script type="text/css">
<style>
#easy_zoom{
overflow:hidden;
position:fixed;
top:120px;
left:560px;
width:600px;
height:400px;
line-height:400px;
text-align:center;
color:#333;
border:5px solid #eee;
background:#fff;
-moz-box-shadow:0 0 10px #555;
-webkit-box-shadow:0 0 10px #555;
-ms-box-shadow:0 0 10px #555;
-0-box-shadow:0 0 10px #555;
box-shadow:0 0 10px #555;}
</style>

Si salva il modello. Le personalizzazioni possono riguardare il testo visualizzato durante il caricamento e i fogli di stile compresi tra i tag <style> e </style> .  Segnatamente si può intervenire sul posizionamento della immagine di zoom (top:120px; e left:560px;) che sarà fissa nel layout e nelle sue dimensioni (width:600px; e height:400px;). Per visualizzare una immagine con lo zoom occorrerà semplicemente postarla con la classe zoom mediante con questa sintassi

<a class="zoom" href="URL_IMMAGINE_GRANDE"><img alt="nome-immagine" src="URL_IMMAGINE_PICCOLA" height="400" title="titolo-immagine" width="200" /></a>

in cui incollare gli URL della immagine piccola da visualizzare nella pagina e di quella grande da utilizzare come zoom. È evidente che per questioni di qualità è opportuno che l'immagine grande sia di almeno 1000-1200 pixel di dimensioni e dovrà quindi essere caricata su un hosting che la supporti. Nel test ho usato Imgur che è un servizio molto duttile. Le dimensioni della foto (400 e 200) si riferiscono alla immagine piccola e possono essere scelte a piacere. 

Questo interessante effetto potrebbe essere utile in quei siti in cui ci sia del commercio online per mostrare più in dettaglio gli articoli ai potenziali acquirenti. Il codice oltre che in Blogger funzionerà su qualsiasi pagina web che supporti il javascript in generale e JQuery in particolare. Volendo si può anche installare questo effetto in un singolo post incollando il primo codice all'inizio in modalità HTML per poi incollare anche il secondo codice nel punto in cui visualizzare l'immagine. In fase di configurazione dell'effetto sono importanti le dimensioni e il posizionamento della immagine piccola e dello zoom. Il posizionamento della immagine è assoluto mentre quello dello zoom è relativo nel senso che rimarrà fisso allo scorrere della pagina. Si deve evitare agendo sui valori numerici presenti nei tag top:120px; left:560px; width:600px; height:400px; di avere lo zoom che che si visualizzi anche in piccola parte sopra alla immagine piccola.