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.