Oggi vorrei parlarvi di Flip! un plugin per jQuery che fa ruotare o “flippare”  contenuti ed elementi.

L’installazione è semplice, di seguito un mini-tutorial su installazione ed utilizzo.

Installazione

Aggiungete le librerie jQuery e jQuery UI nell’head della pagina :

<script type=”text/javascript” src=”js/jquery-1.3.2.min.js“></script>
<script type=”text/javascript” src=”js/jquery-ui-1.7.2.custom.min.js“></script>

Ora aggiungete nell’head anche il file javascript del plugin :

<script type=”text/javascript” src=”js/jquery.flip.js“></script>

ed anche il file css del plugin :

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

Come si usa?
Per avviarlo basta inserire il codice javascript :

$("#mydiv").flip({
    direction:'tb'
});

Opzioni del plugin

Le opzioni che si possono inserire sul plugin sono:

- la direzione dell’animazione :

• direction :  ‘tb’ ; top-bottom, cioè da sopra a sotto
• direction : ‘bt’ ; bottom-top, cioè da sotto a sopra
• direction : ‘lr’ ; left-right, cioè da sinistra a destra
• direction : ‘rl’ ; right-left, cioè da destra a sinistra

- il contenuto da visualizzare dopo l’animazione :

• content : ‘contenuto’

- il colore da visualizzare dopo l’animazione :

• color : ‘#ff0000′

- la velocità dell’animazione in millisecondi :

• speed : 1000

- i gestori degli eventi dell’animazione :

• onBefore : codice ; quello che succede prima dell’animazione
• onAnimation : codice ; quello che succede durante l’animazione
• onEnd : codice ; quello che succede quando l’animazione è terminata

Oltre alla funzione di base flip() esiste la funzione revertFlip(), che esegue l’animazione in direzione opposta alla sua esecuzione.

Il plugin è stato realizzato da Luca Manno, web developer di Ex Machina in quel di Lugano (Svizzera).

Oggi vorrei presentarvi questo plugin, jQuery Magnifier.

Questo plugin permette lo zoom dell’immagine con un semplice effetto lente.

Di seguito una mini-guida all’installazione e all’uso.

Installazione

Aggiungete la libreria jQuery nell’head della pagina :

<script type=”text/javascript” src=”js/jquery-1.3.2.min.js“></script>

Ora aggiungete nell’head anche il file javascript del plugin :

<script type=”text/javascript” src=”js/jquery.magnifier.0.2.js“></script>

ed anche il file css del plugin :

<link rel=”stylesheet” type=”text/css” href=”css/jquery.magnifier.css” media=”screen”>

Come utilizzarlo

Ora abbiamo bisogno di due immagini uguali, una più grande ed una più piccola sulla quale fare lo zoom :

<a href=”img/large.jpg” rel=”magnify”>
<img src=”img/small.jpg alt=”My small image” width=”500″ height=”335″>
</a>

nel link all’immagine più grande bisogna inserire il tag rel=”magnify” per far funzionare lo script.

Ora bisogna inserire il codice javascript per far funzionare lo zoom con la lente :

jQuery(function($) {
$(‘a[rel*=magnify]‘).magnify();
});

Se si vogliono aggiungere delle opzioni, per adattare lo zoom come vogliamo noi basta inserire le opzioni nella funzion magnify(), così :

jQuery(function($){
$(‘a[rel*=magnify]‘).magnify({
lensWidth: 160, // width of the lens
lensHeight: 160, // height of the lens
link: true // clicking in the lens goes to the large image
delay: 500 // time to wait before the lens is shown
});
});

Le opzioni lensWidth e lensHeight indicano rispettivamente larghezza ed altezza dello zoom, l’opzione link : true invece inserisce il link all’immagine a quella più grande.

L’ultima opzione, il delay vuole il numero di millisecondi prima di visualizzare la lente.

Potete scaricare questo plugin qui.

Oggi vorrei parlarvi di jQZoom Evolution, un plugin jquery che permette lo zoom di un immagine più grande attraverso una sorta di “lente” su un immagine di anteprima.

Qui troverete alcuni esempi del funzionamento di jqzoom, e se continuate a leggere vi spiegherò come utilizzare il plugin.

Installazione

Il plugin necessita per prima cosa di jQuery , quindi scaricate la libreria ed inserite il collegamento all’interno dell’head della pagina html.

<script type=’text/javascript’ src=’js/jquery-1.2.6.js’></script>

Ora scaricate dalla pagina del progetto i file necessari per far funzionare il plugin ed aggiungete nell’head della pagina il riferimento alla pagina javascript.

<script type=’text/javascript’ src=’js/jquery.jqzoom-1.0.1.js’></script>

All’interno del pacchetto zip che scaricherete troverete anche il file css per lo stile del plugin, aggiungetelo sempre nell’head della pagina.

<link rel=”stylesheet” type=”text/css” href=”css/jqzoom.css” />

Come utilizzarlo

jQZoom necessita di due immagini, una più grande ed una più piccola. Quest’ultima, al passaggio della lente visualizzerà lo zoom dell’immagine più grande, quindi per il corretto funzionamento è consigliabile usare due immagini con le medesime proporzioni ( altezza – larghezza).

Di seguito il codice html per le immagini :

<a href=”images/BIGIMAGE.JPG” title=”MYTITLE”>
<img src=”images/SMALLIMAGE.JPG” title=”IMAGE TITLE” >
</a>

SMALLIMAGE rappresenta l’immagine che vogliamo zoomare mentre BIGIMAGE è l’immagine sulla quale sarà effettuato lo zoom vero e proprio.

Adesso, come è consuetudine per jQuery, dichiariamo all’interno del caricamento del DOM la funzione jqzoom() sulla classe di prima (MYCLASS), così :

$(document).ready(function(){
$(‘.MYCLASS).jqzoom();
});

Se si vuole si possono inserire alcune opzioni all’interno della funzione per adattare il plugin alle proprie esigenze, vediamo un esempio :

$(document).ready(function(){
var options = {
zoomWidth: 300,
zoomHeight: 250,
xOffset: 10,
yOffset: 0,
position: “right” //and MORE OPTIONS
};
$(‘.MYCLASS).jqzoom(options);
});

Le opzioni sono molte, di seguito un elenco e una descrizione di cosa attuano :

• zoomType : ['standard','reverse'] ; questa è la variabile che decide se lo zoom è di tipo standard o reverse.
• zoomWidth : valore ; questo valore indica la larghezza del box con lo zoom
• zoomHeight : valore ; questo valore indica l’altezza del box con lo zoom
• xOffset : valore ; questo valore indica la posizione iniziale x della lente
• yOffset : valore ; questo valore indica la posizione iniziale y della lente
• position : ['right','left','top','bottom'] ; indica la posizione del box con lo zoom
• lens : ['true','false'] ; indica se si vedrà la lente oppure no
• imageOpacity : valore decimale ; indica l’opacità che assumerà l’immagine con lo zoomType settato a reverse
• title : ['true','false'] ; indica se si vedrà il titolo soprà il box con lo zoom
• showEffect : ['show','fadeIn'] ; indica con quale effetto si visualizzerà il box con lo zoom
• hideEffect : ['hide','fadeOut'] ; indica con quale effetto si nasconderà il box con lo zoom
• fadeInSpeed : ['fast','slow','medium'] ; indica la velocità di apparizione del box se showEffect è settato su fadeIn
• fadeOutSpeed : ['fast','slow','medium'] ; indica la velocità di scomparsa del box se hideEffect è settato su fadeOut
• showPreload : ['true','false'] ; indica se si vedrà il preload del plugin oppure no
• preloadText : ‘valore’ ; indica il testo da visualizzare durante il preloading
• preloadPosition : ['center','bycss'] ; indica la posizione che occupa il preload, se al centro o se settato nel css

Ulteriori modifiche di stile (colori,font,ecc.) avvengono nel file jqzoom.css.

Il plugin potete scaricarlo qui.

Un ringraziamento va all’autore Ing. Marco Renzi, che ha creato questa perla di plugin.