fantastico effetto magnifier per prototype




pMagnifier è uno semplice script opensource per effettuare uno zoom delle immagini "con il famoso effetto magnifier", è basato sulla fantastica libreria prototype javascript framework.
pMagnifier è semplice da utilizzare e da personalizzare, può essere utilizzato su più immagini contemporaneamente, ed è stato testato sui principali browser tra cui (Safari, Chrome, IE6, IE7, Firefox).



Effetto base
La configurazione più semplice dello script


zoomed.jpg


Effetto con lente
Visualizza la lente durante lo zoom nell'anteprima dell'immagine



zoomed.jpg


Effetto con lente reverse
Visualizza la lente durante lo zoom nell'anteprima dell'immagine oscurando l'anteprima



zoomed.jpg


Effetto con drag&drop
Visualizza la lente durante lo zoom e consente il trascimento



zoomed.jpg


1. Installazione

Aggiungi l'ultima versione di prototype, poi di seguito lo script pmagnifier(l'ordine è importante) tra i tag HEAD della tua pagina. Utilizza il codice come segue:

<script type='text/javascript' src='prototype.js'></script>
<script type='text/javascript' src='pmagnifier.js'></script>



Aggiungi il foglio di stile pmagnifier.css sempre nell'header

<link rel="stylesheet" type="text/css" href="pmagnifier.css" />



2. Come utilizzarlo

Usare pmagnifier è semplicissimo, la struttura da utilizzare è la seguente:

<div id="magnifier" class="pmagnifier_item">
	<img class="pmagnifier_small" src="small.jpg" alt="large.jpg"/>
</div>


L'immagine dovrà essere inserita in un div con un identificativo univico, al suo interno sarà presente il tag image con l'anteprima e nell'attributo alt l'indirizzo dell'immagine grande.
E' importante che l'immagine interna al div abbia come classe pmagnifier_small.

ATTENZIONE: attenzione, affinchè lo script funzioni, l'immagini piccola deve essere una scala di quella grande.



3. Caricare il plugin

Ora non resta che caricare il plugin sempre dall'header della pagina, per inizializzare lo script la sintassi è la seguente:


//Per un singolo oggetto
new Pmagnifier(item, options);
//Per un insieme di oggetti in un div
Pmagnifier.all($$(".pmagnifier_item") [, options] );



Il codice seguente inizializza lo script con le opzioni standard, puoi passare maggiori opzioni allo script per la personalizzazione.


document.observe("dom:loaded", function(){
	new Pmagnifier($("maginfier"), {
		zoomWidth: 200,				
		zoomHeight: 200,			
		xOffset:10,					
		yOffset:0,				
		position:"right",			
		preload:true,				
		preloading:"Loading...",	
		showlens : false,			
		reverse: false,	
		draggable : false
	});
});





4. Caricamento multiplo plugin


Il codice seguente inizializza lo script per tutte le immagini in un contenitore.


<div>
	<div class="pmagnifier_img" id=""><img src="1_small.jpg" class="pmagnifier_small" alt="1.jpg"></div>
	<div class="pmagnifier_img" id=""><img src="2_small.jpg" class="pmagnifier_small" alt="2.jpg"></div>
	<div class="pmagnifier_img" id=""><img src="3_small.jpg" class="pmagnifier_small" alt="3.jpg"></div>
	<div class="pmagnifier_img" id=""><img src="4_small.jpg" class="pmagnifier_small" alt="4.jpg"></div>
</div>

Questa è la sua parte javascript:

document.observe("dom:loaded", function(){
	Pmagnifier.all($$(".pmagnifier_img"), {
		zoomWidth: 200,				
		zoomHeight: 200,			
		xOffset:10,					
		yOffset:0,				
		position:"right",			
		preload:true,				
		preloading:"Loading...",	
		showlens : false,			
		reverse: false,	
		draggable : false
	});
});





5. Opzioni di configurazione



 




6. Supporto

Lo script è realizzato dalla Brokenice Interactive, per informazioni o supporto visitare il sito www.brokenice.it.