Tag Archives: offset

offset con jQuery

Durante la fase iniziale dello sviluppo di un widget jQuery un bel pò più articolato, mi sono ritrovato al punto in cui offset().left e top, ed il loro utilizzo erano chiari; ho quindi deciso di condividere con voi questi ‘effettini’ trasformandoli in un piccolo plugin con funzionalità di Zoom e Pan (ingrandimento e scroll in base alla X e Y del puntatore del mouse).

miniZoomPan

Si chiama miniZoomPan e funziona così: si prepara il markup composto da una DIV con un ID e dentro ci si mette un’immagine; la classica immagine in un post, per esempio.

1
2
3
<div id="zoom01">
	<img src="leaf_s.jpg" />
</div>

Si instanzia il plugin (scaricabile qui) in questo modo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(function() {
	$("#zoom01").miniZoomPan({
	sW: 200, //small image width and height
	sH: 250,
	lW: 370, //large image width and height
	lH: 462
	// other options
	/*
	frameColor: "#cecece",
	frameWidth: 1,
	loaderContent: "loading..." // text or image tag eg.: "<img src='spinner.gif' />"
	*/
	})
});

Fatto. Come potete notare sW e sH sono le dimensioni dell’immagine piccola, mentre lW e lH sono quelle dell’ingrandimento. Obbligatoriamente le vs. immagini dovranno avere la parte finale del nome file modificato ad hoc (mycat_s.jpg per la piccola, mycat_l.jpg per la grande).
A questo punto quando vi posizionate sull’immagine, ne viene caricata una di dimensioni maggiori (grande quanto volete) che scrollerà in base alla posizione del mouse. Un preload customizzabile con testo o con una gif informa l’utente del caricamento in corso.

Qui trovate la pagina d’esempio, dove con un minimo di pazienza potrete recuperare il CSS e lo script che comunque per comodità potete prelevare rispettivamente qui e qui. Si tratta di piccolo plugin senza pretese, che però può servire su un online store per visualizzare al volo l’ingrandimento di una maglietta o di un oggetto senza dover cambiare pagina o usare finestre modali.

miniZoomPan plugin. Enjoy.