Oggi vediamo come realizzare una gallery semplicissima utilizzando jQuery, ad essa andremo poi ad integrare un simpatico script che permette di visualizzare un tooltip del tag “title” (quando si passa sulle miniature delle foto) in modo graficamente piacevole. Cercherò di illustrarvi ogni passaggio in modo chiaro affinchè tutti possiate comprendere. Ne va da sè che si tratta di una guida per principianti, quale anche io reputo di essere 🙂
Il risultato finale che otterremo lo trovate nella demo:
Integriamo un tooltip per la gallery
Per prima cosa occorre procurarsi il plugin di jQquery tooltip ed includerlo insieme a jQuery nella nostra pagina html prima della chiusura di </head>:
<script src="jquery.js" type="text/javascript"></script> <script src="jquery.tooltip.js" type="text/javascript"></script>
Il passo successivo sarà quello di preparare xhtml e css della nostra pagina. Essendo lo script che scriveremo completamente personalizzabile, non avremo alcuna limitazione di markup nella realizzazione della nostra pagina, per comodità consiglio comunque di creare un div che conterrà l’immagine grande separato dal div che invece avrà al suo interno la lista di thumbnails cliccabili.
Il plugin tooltip richiede semplicemente la stilizzazione del riquadro in cui comparirà il testo.
Nell’esempio realizzato il marku xhtml che trovate è il seguente:
<div class="big-img"> <img src="01.jpg" width="" height="" alt="immagine" /> </div> <div class="list"> <ul> <li><a href="01.jpg" title="immagine1"><img src="01-m.jpg" width="40" height="40" alt="immagine1" /></a></li> <li><a href="02.jpg" title="immagine2"><img src="02-m.jpg" width="40" height="40" alt="immagine2" /></a></li> </ul> </div>
con il foglio stile associato:
img {
border:0;
}
ul {
list-style:none;
margin:0;
padding:0;
border:0;
}
ul li {
display:inline;
}
#tooltip {
position: absolute;
z-index: 3000;
border: 1px solid #999;
background-color: #eee;
padding: 5px;
opacity: 0.85;
font-family:Verdana, Geneva, sans-serif;
font-size:10px;
}
#tooltip h3, #tooltip div { margin: 0; }Il passo successivo, che maggiormente ci interessa nel nostro articolo, è quello di scrivere le semplici istruzioni in jQuery per far funzionare correttamente la nostra gallery. L’unica accortezza che dovremo avere sarà di considerare che se utilizzeremo immagini di dimensioni diverse il nostro box contenitore inevitabilmente si espanderà e/o restringerà. Teniamolo dunque sempre in conto nel momento in cui realizziamo un progetto, non vorremmo vedere la nostra pagina disimpaginarsi di colpo per una dimenticanza simile! Ecco dunque la parte di script fondamentale da includere sempre prima del tag </head>
<script type="text/javascript">
$(document).ready(function() {
$('.list a').click(function(){
var link = $(this).attr('href');
$('.big-img img').fadeOut(function() {
$(this).attr('src', link ).fadeIn();
})
return false;
});
$('body a').tooltip({
track: true,
delay: 0,
showURL: false,
showBody: " - ",
fade: 250
});
});
</script>Analizziamo dunque passo passo il codice appena scritto per capire che cosa stiamo facendo
$(document).ready(function() {La funzione document.ready indica al browser che dovrà eseguire la funzione contenuta al suo interno nel momento in cui la pagina viene caricata. Senza questa dichiarazione il nostro script semplicemente non partirà!
$('.list a').click(function(){Significa letteralmente: quando clicchi (.click) su un link contenuto in una classe list (.list a) fai l’operazione che segue:
var link = $(this).attr('href');crea cioè una variabile link che sarà uguale all’src del link di prima su cui ho cliccato
$('.big-img img').fadeOut(function() {
$(this).attr('src', link ).fadeIn();
})a questo punto fai sparire con l’effetto fadeOut l’immagine presente nel box con classe .big-img, e all’elemento img contenuto in esso cambia l’attributo src con il valore della variabile link creata in precedenza. Dopodichè fai riapparire l’immagine con effetto fadeIn. La dichiarazione di fadeOut è indispensabile per poter usare il fadeIn dal momento che funziona come la funzione .show e necessita quindi che qualcosa non sia visibile per poter essere mostrato.
L’ultima parte di codice relativa al tooltip invece contiene solo dei parametri liberamente modificabili che vengono già forniti dal plugin. Non vi resta quindi che sperimentare il vostro risultato 🙂
