Grazie a jQuery e la sua estensione jQuery UI è possibile realizzare il medesimo effetto in maniera semplice. In particolare andremo ad utilizzare il plugin "draggable" di jQuery UI.

Demo

L’idea di base è quella di prevedere un DIV contenente l’immagine a bassa risoluzione. Al click su questa immagine, questa viene ingrandita fino alle dimensioni dell’immagine a grande risoluzione e successivamente scambiata con quest’ultima in modo da simulare uno zoom. Tramite la funzionalità "draggable" renderemo trascinabile questa immagine, in modo da poter visualizzare tutte le parti dell’ingrandimento. Il nostro riquadro originale che contiene la foto sarà la "finestra" attraverso cui si vedrà l’immagine ad alta risoluzione sottostante. Sarà inoltre necessario impostare posizionamenti e limiti di trascinamento per garantire che l’immagine non esca dal riquadro.
Ho realizzato una piccola animazione che rappresenta l’idea:

Il riquadro rosso è l’area originale dell’immagine piccola (non rappresentata). L’immagine grande (la foto che vedete nell’animazione) potrà essere trascinata in tutte le direzioni e soltanto la parte all’interno del riquadro rosso sarà visibile, dando l’impressione di un’immagine zoomata su cui effettuiamo il panning. Il riquadro grigio invece rappresenta i limiti entro i quali l’immagine può essere trascinata senza uscire dal riquadro rosso. Vedremo dopo come realizzare tutto ciò.

Ma procediamo con ordine. Per prima cosa realizziamo l’html necessario. Come abbiamo detto realizziamo un DIV contenente l’immagine piccola. Per garantire l’accessibilità anche a chi non ha javascript abilitato, l’inseriamo all’interno di un link che punta all’immagine grande e che ci servirà per identificare il path all’immagine ad alta risoluzione:

<div class="image-zoom">
<a href="img1-big.jpg">
<img src="img1-small.jpg" alt="img1" />
</a>
</div>

Ora che l’html è pronto possiamo procedere con gli opportuni stili css:

.image-zoom { overflow:hidden; width:300px; height:300px; position:relative }
.image-zoom img { position:absolute; }

Come potete vedere ho impostato l’overflow hidden per confinare l’immagine all’interno del riquadro quando viene zoomata (come se fosse una finestra) e le dimensioni coincidenti con la dimensione dell’immagine contenuta. Ho poi aggiunto il posizionamento relative al contenitore e absolute all’immagine, in modo da poterla muovere liberamente nel nostro div.

Ora che abbiamo tutto pronto possiamo procedere all’aggiunta del javascript necessario, il tutto grazie a jQuery e jQuery UI. Andiamo quindi a realizzare la struttura base per realizzare un plugin in jQuery:

(function($){
$.fn.zoom = function(params) {
   var defaults = {
      duration: 200,
      small_width:300,
      small_height:300,
      big_width:1000,
      big_height:1000
   };
   var options = $.extend(defaults, params);
   return this.each(function() {
      //istruzioni del plugin...
   });
}
})(jQuery)

La prima riga e l’ultima riga servono soltanto a garantirci di poter utilizzare la scorciatoia "$" al posto di "jQuery", mentre tramite $.fn.zoom = function(params) { ... } andiamo a realizzare il plugin vero e proprio. La variabile params è l’insieme di opzioni che possiamo impostare all’inizializzazione del plugin, mentre defaults sono i valori di default che il plugin andrà ad utilizzare. Infine uniamo il tutto tramite il metodo $.extend nell’oggetto options, il quale che conterrà i valori di default eventualmente sovrascritti dai parametri passati in params. I parametri di default sono in particolare la durata delle animazioni di zoom-in e zoom-out e le dimensioni dell’immagine a bassa e alta risoluzione (per semplicità ipotizziamo di avere immagini di dimensioni fisse).
Le istruzioni del plugin invece andranno inserite all’interno del ciclo return this.each(function() {...});. Tramite each infatti possiamo inizializzare la funzionalità del plugin a più elementi contemporaneamente.

Il motivo per cui ho deciso di realizzare un plugin anziché semplici istruzioni è che permette di avere un codice riutilizzabile facilmente, permette di scrivere codice molto più ordinato e di estenderne le funzionalità senza dover mettere mano a tutto il flusso di lavoro.

Ma vediamo in dettaglio come sarà strutturato il plugin. In generale prevediamo quattro parti: una prima parte dove andremo a preparare tutte le variabili che ci servono, una seconda parte dove manipolare css e html per preparare le funzionalità del plugin, una terza parte dove andremo a gestire gli eventi dell’utente, richiamando gli opportuni metodi, ed infine un’ultima parte dove andremo ad implementare le varie funzionalità (zoom in, zoom out, drag etc.).

Prima parte

//caching...
var $container = $(this);
var $link = $container.find('a');
var $image = $link.find('img');

//reading some parameters...
var small_path = $image.attr('src');
var big_path   = $link.attr('href');

//status variables...
var dragging = false;
var zoomed   = false;

//calculate correct positioning...
var a_width  = (options.big_width  - options.small_width)  * 2 + options.small_width;
var a_height = (options.big_height - options.small_height) * 2 + options.small_height;

var a_top  = options.big_height - options.small_height;
var a_left = options.big_width  - options.small_width;

La prima sezione serve per fare il "caching" degli elementi utilizzati in modo da semplificarne e velocizzarne l’utilizzo nel resto del plugin. Salviamo poi i path delle immagini a bassa e alta risoluzione che ci serviranno nelle operazioni di zoom-in e zoom-out. Le variabili dragging e zoomed, che impostiamo all’inizio a false, servono per salvare lo stato corrente delle immagini, in particolare se le stiamo trascinando e se sono zoomate o rimpicciolite. Nell’ultima sezione infine calcoliamo i posizionamenti e le larghezze che ci serviranno quando andremo a manipolare il css dell’html.

Seconda parte

$link.css({
    display:'block',
    position:'absolute',
    width: a_width   + 'px',
    height: a_height + 'px',
    top:  '-' + a_top  + 'px',
    left: '-' + a_left + 'px'
});

/* Removing default link behaviour... */
$link.removeAttr('href');

$image.css({
    display:'block',
    position:'absolute',
    width:  options.small_width + 'px',
    height: options.small_height + 'px',
    top: a_top + 'px',
    left: a_left + 'px'
});

Nella seconda parte andiamo a cambiare i css di link e immagine per predisporre la funzionalità di zoom. In particolare il link diventerà il blocco che conterrà lo spostamento dell’immagine grande (il rettangolo grigio nell’animazione). A questo andremo poi a togliere l’attributo href, in modo da eliminare il comportamento standard del link che interferirebbe con il nostro plugin. L’immagine infine viene riposizionata all’interno del tag a in modo da trovarsi in corrispondenza della finestra originale (il rettangolo rosso). Infatti mentre il link è spostato a sinistra e in alto tramite margini negativi, l’immagine viene spostata degli stessi valori (a_top, a_left) ma verso destra e in basso, in modo da trovarsi nel medesimo punto rispetto alla finestra originale. In questo modo avremo già pronti i posizionamenti assoluti per l’animazione.

Terza parte

$image.mouseup(function() {
    if (!dragging) {
        if (zoomed) {
	        zoomOut();
        } else {
    	    zoomIn();
        }
    }
});

L’unico evento che ci interessa gestire è il rilascio del pulsante del mouse. Utilizzando infatti l’evento "mouseup" anziché l’evento "click" possiamo controllare lo stato prima di decidere che operazione compiere. Al rilascio del mouse controllo se sto effettuando il "dragging". Se non sto trascinando, e quindi è un semplice click, effettuo lo zoom-in o lo zoom-out in base allo stato "zoomed", richiamando i due metodi zoomOut() e zoomIn().

Quarta parte

Nella quarta parte andremo ad implementare i metodi zoomOut() e zoomIn() richiamati precedentemente, oltre a quelli che si renderanno necessari successivamente:

function zoomOut() {
    $image.animate({
        width:options.small_width + 'px',
        height:options.small_height + 'px',
        top:  a_top  + 'px',
        left: a_left + 'px'
    }, options.duration, swapWithSmall);
	zoomed = false;
}

function zoomIn() {
    $image.animate({
        width:options.big_width + 'px',
        height:options.big_height + 'px',
        top:  a_top / 2  + 'px',
        left: a_left / 2 + 'px'
    }, options.duration, swapWithBig);
    zoomed = true;
}



Come vedete ogni metodo va ad animare dimensioni e posizionamenti css secondo i valori calcolati nella prima parte. Alla fine dell’animazione vengono richiamati i due metodi per scambiare l’immagine, rispettivamente "swapWithBig" e swapWithSmall":

function swapWithBig() {
	$image.attr('src', big_path);
	$image.draggable({
		containment: 'parent',
		start: handleStartDrag,
		stop: handleStopDrag
	});
}

function swapWithSmall() {
	$image.attr('src', small_path);
	$image.draggable('disable');
}

function handleStartDrag() {
	dragging = true;
}

function handleStopDrag() {
	dragging = false;
}

Questi non fanno altro che cambiare l’attributo src e ad abilitare (nel caso dello zoom-in) o disabilitare (nel caso dello zoom-out) la funzionalità "draggable" di jQuery UI. Come vedete a draggable vengono impostati alcuni parametri:

containment: serve ad impostare i limiti di trascinamento. Nel nostro caso è impostato a parent, e cioè al tag html che contiene l’elemento e quindi il tag a che abbiamo appositamente posizionato e dimensionato proprio per questo scopo.
start: è la funzione che viene eseguita quando inizia il trascinamento. Nel nostro caso è la funzione handleStartDrag che non fa altro che aggiornare la variabile di stato corrispondente (dragging).
stop: è la funzione che viene eseguita alla fine del trascinamento e richiama la funzione handleStopDrag, che aggiorna la variabile dragging.

Il plugin ora è completo, non ci resta che richiamarlo nella nostra pagina tramite la sintassi solita di jQuery:

$(document).ready(function() {
	$('.image-zoom').zoom();
});

Alcuni metodi possono sembrare superflui, ma ho preferito spezzettare il plugin in più funzioni esplicite, ciascuna con funzionalità ben definite, piuttosto che annidare funzioni su funzioni come jQuery a volte induce a fare. Questo semplifica la lettura del codice e soprattutto le successive manipolazioni e revisioni.

Ecco il codice completo del plugin, mentre qui potete vederlo in azione:

(function($) {
$.fn.zoom = function(params) {
	/*
	Zoom jQuery Plugin
	Copyright: (C) 3009 - Francesco Paggin
	Parameters:
		(int) duration: the duration of the zooming animaton
		(int) small_width, small_height: the dimensions of the small thumbnails
		(int) big_width, big_height: the dimensions of the zoomed images
	*/
	var defaults = {
		duration: 200,
		small_width:300,
		small_height:300,
		big_width:1000,
		big_height:1000
	};
	var options = $.extend(defaults, params);

	return this.each(function() {
		//caching...
		var $container = $(this);
		var $link = $container.find('a');
		var $image = $link.find('img');

		//reading some parameters...
		var small_path = $image.attr('src');
		var big_path   = $link.attr('href');

		//status variables...
		var dragging = false;
		var zoomed   = false;

		//calculate correct positioning...
		var a_width  = (options.big_width  - options.small_width)  * 2 + options.small_width;
		var a_height = (options.big_height - options.small_height) * 2 + options.small_height;

		var a_top  = options.big_height - options.small_height;
		var a_left = options.big_width  - options.small_width;

		/*
			INITIALIZATION...
		*/
		$link.css({
			display:'block',
			position:'absolute',
			width: a_width   + 'px',
			height: a_height + 'px',
			top:  '-' + a_top  + 'px',
			left: '-' + a_left + 'px'
		});

		/* Removing default link behaviour... */
		$link.removeAttr('href');

		$image.css({
			display:'block',
			position:'absolute',
			width:  options.small_width + 'px',
			height: options.small_height + 'px',
			top: a_top + 'px',
			left: a_left + 'px'
		});

		/*
			HANDLE EVENTS...
		*/
		$image.mouseup(function() {
			if (!dragging) {
				if (zoomed) {
					zoomOut();
				} else {
					zoomIn();
				}
			}
		});

		/*
			METHODS...
		*/
		function zoomOut() {
			$image.animate({
				width:options.small_width + 'px',
				height:options.small_height + 'px',
				top:  a_top  + 'px',
				left: a_left + 'px'
			}, options.duration, swapWithSmall);
			zoomed = false;
		}

		function zoomIn() {
			$image.animate({
				width:options.big_width + 'px',
				height:options.big_height + 'px',
				top:  a_top / 2  + 'px',
				left: a_left / 2 + 'px'
			}, options.duration, swapWithBig);
			zoomed = true;
		}

		function swapWithBig() {
			$image.attr('src', big_path);
			$image.draggable({
				containment: 'parent',
				start: handleStartDrag,
				stop: handleStopDrag
			});
		}

		function swapWithSmall() {
			$image.attr('src', small_path);
			$image.draggable('disable');
		}

		function handleStartDrag() {
			dragging = true;
		}

		function handleStopDrag() {
			dragging = false;
		}
	});
}
})(jQuery)

Quello di cui avevo bisogno era un plugin per simulare il comportamento della pseudo-classe “focus” in modo da renderla compatibile con tutti i browser. Nella fattispecie quando ci si posiziona su un campo di input, a questo viene aggiunta una classe in modo da cambiarne lo stile. In questo modo si evidenzia all’utente il campo in cui sta operando favorendo l’accessibilità e l’usabilità.

Ma veniamo al sodo. Il comando base che useremo per estendere jQuery è il metodo $.fn.nomePlugin = function() {}. Possiamo passare alla funzione i parametri per la configurazione, nel caso il nostro plugin ne abbia bisogno. La prassi è di utilizzare come parametro un singolo oggetto contenente i vari parametri, in modo da rendere il codice più leggibile ed espandibile. Nel nostro caso è sufficiente un unico parametro che sarà il nome della classe che verrà aggiunta agli elementi durante il focus. Cominciamo quindi a scrivere:

$.fn.pseudoFocus = function(params) {
    defaults = {classe: 'hasFocus'};
    options = $.extend(defaults, params);
}

Come vedete utilizzo il parametro params per i valori passati dall’utente e defaults per le impostazioni di default appunto. Tramite il comando $.extend(defaults, params) jQuery “estende” i valori di default con i nuovi valori passati al plugin. In pratica vengono modificati solo i parametri diversi da quelli di default, lasciando gli altri inalterati.

Ora che abbiamo tutte le informazioni passiamo alla funzionalità vera e propria del plugin:

$.fn.pseudoFocus = function(params) {
	//valori di default
    defaults = {classe: 'hasFocus'};
    options = $.extend(defaults, params);

    return this.each(function() {
    	var element = $(this); //opero sull'elemento che qui è individuato da "this"
    	//qui va il nostro codice...
    });

}

Come evidenziato da return this.each(function() {...}) il corpo del plugin deve ritornare un ciclo. Questo perché jQuery opera su tutti gli elementi individuati dal selettore usato, quindi nel caso in cui ce ne siano più d’uno dovremo eseguire il plugin su ciascuno di essi. All’interno del nostro ciclo quindi il singolo elemento sarà individuato da $(this). Per comodità assegnamo l’elemento ad una variabile che ho chiamato element.

Il nostro plugin, come accennato prima, deve aggiungere agli elementi la classe desiderata durante l’evento focus e rimuoverla durante l’evento blur. Aggiungiamo quindi questi metodi:

$.fn.pseudoFocus = function(params) {
	//valori di default
    defaults = {classe: 'hasFocus'};
    options = $.extend(defaults, params);

    return this.each(function() {
    	var element = $(this); //opero sull'elemento che qui è individuato da "this"
    	//qui va il nostro codice...
    	element.focus(function() {
    		element.addClass(options.classe);
    	});
    	element.blur(function() {
    		element.removeClass(options.classe);
    	});
    });
}

Come vedete all’interno dei due metodi appena citati viene aggiunta o tolta la classe grazie a element.addClass(options.classe) e element.removeClass(options.classe), i metodi di jQuery per manipolare le classi. Come vedete ho utilizzato il nostro oggetto options che contiene la classe desiderata (sia essa quella di default o quella fornita in fase di inizializzazione del plugin).

Ci rimane però un ultimo step. Come vedete abbiamo sempre utilizzato l’abbreviazione $ al posto di jQuery. Questo potrebbe generare conflitti con altre librerie che utilizzano lo stesso metodo (prototype e motools, tanto per citarne due…). Per fortuna possiamo sfruttare la sintassi di javascript per aggiungere una “schermatura” (in inglese “closure”) in modo da poter utilizzare liberamente il dollaro all’interno del plugin senza però interferire con ciò che viene usato all’esterno. Per farlo basta utilizzare la forma (function($) {…})(jQuery). Questa non fa altro che definire la funzione anonima function($) {...} ed utilizzarla subito passando come parametro jQuery. In questo modo $ diventa una variabile interna alla funzione e quindi il nostro plugin può utilizzarla liberamente.

Il plugin finito è quindi:

(function($) {
    $.fn.pseudoFocus = function(params) {
	    //valori di default
        defaults = {classe: 'hasFocus'};
        options = $.extend(defaults, params);

        return this.each(function() {
    	    var element = $(this); //opero sull'elemento che qui è individuato da "this"
            //qui va il nostro codice...
            element.focus(function() {
                element.addClass(options.classe);
            });
            element.blur(function() {
                element.removeClass(options.classe);
            });
        });
    }
})(jQuery)

Salviamo il file come jquery.pseudoFocus.js nella stessa cartella di jQuery. Per utilizzarlo dobbiamo richiamarlo nella pagina subito dopo il tag “script” che richiama jQuery. Dovremo poi eseguirlo dopo il caricamento del DOM tramite la sintassi $(document).ready(...):

<script type="text/javascript" src="jquery.js">
<script type="text/javascript" src="jquery.pseudoFocus.js">

$(document).ready(function() {
    $('input[type=text], input[type=password], textarea').pseudoFocus({classe: 'miaClasse'});
});

Come vedete vengono prelevati gli input di tipo text, password e le textarea (ma avrei potuto utilizzare un qualsiasi elemento) e viene loro assegnato l’effetto focus tramite la classe “miaClasse”. Basterà realizzare un css adeguato e il gioco sarà fatto.

Come considerazione finale c’è da dire che la pseudo-classe focus è supportata da molti browser moderni e quindi l’esecuzione del plugin non è sempre necessaria. Ci basterebbe infatti utilizzare “:focus” nel css al posto di .miaClasse ed avremmo il medesimo effetto.

Non ho voluto dilungarmi su questo ma focalizzarmi su come stendere un semplice plugin. Nell’utilizzo reale avremmo potuto controllare la versione del browser tramite $.browser e decidere di conseguenza se applicare o meno la classe.