Modificare sorgente in Jqzoom

Jqzoom è uno dei tanti plugin basati su jQuery che permette di vedere le immagini ingrandite con una lente di ingrandimento.

L'uso di base è semplice, ma quando si tenta di usarlo con altri plugin si incappa spesso in problemi.

Un esempio è questo articolo.

Spiegavo come cambiare immagine cliccando sulle miniature a fianco.

Se sull'immagine ingrandita si usa Jqzoom si può notare che l'immagine cambia, ma la lente di ingrandimento punta sempre all'immagine di default.

E' possibile cambiare questo comportamento in maniera abbastanza semplice.

Partendo dall'esempio dell'articolo linkato

  $(document).ready(function(){  
    $('.jqzoom').jqzoom();  
  });

$(document).ready(function() { $('.img_thumb').click(function() { $('#img_grande').attr('src', this.src); }); });

<div class="art_img"><a href="foto_FRONTE.jpg" class="jqzoom"><img id="img_grande" src="/site/immagini/foto_FRONTE.jpg" alt="" width="180" /></a></div> // GRANDE
<img src="foto_FRONTE.jpg" alt="" width="50" class="img_thumb" /> // MINIATURE
<img src="foto_LATO.jpg" alt="" width="50" class="img_thumb" />
<img src="foto_RETRO.jpg" alt="" width="50" class="img_thumb" />

Dobbiamo apportare semplici modifiche.

Prima di tutto, come notate, il div GRANDE è pronto per jqzoom, e in più ho anche aggiunto il rispettivo jQuery.

A questo punto dobbiamo modificare la parte jQuery per il click sulle miniature in questo modo:

$(document).ready(function() {
   $('.img_thumb').click(function() {
     $('#img_grande').attr('src', this.src);
     $(".zoomWindow").remove();
     $(".zoomPup").remove();
     $(".jqzoom").remove();
     $('.art_img').append('<a href="' + this.src + '" class="jqzoom"><img id="img_grande" src="' + this.src + '" width="180"/></a>');
     $('.jqzoom').jqzoom();
  });
});

Prima si cambia la sorgente come prima.

Poi si ruomovo alcuni componenti creati da Jqzoom.

Infine si ricrea il codice usato da Jqzoom facendone l'append a impostando le sorgenti giuste (quella dell'immagine piccola cliccata).

In questo modo avremo sempre la lente puntata al'immagine giusta.