In questo articolo applicheremo degli accattivanti effetti rollover sulle miniature di una galleria utilizzando Pixastic, una libreria Javascript che permette la manipolazione e il rendering dinamico delle immagini sfruttando l'elemento HTML Canvas.
Per ragioni di comodità, gli esempi allegati sono realizzati con jQuery (esempio) e Prototype + Scriptaculous (esempio), lasciando la scelta del framework alle proprie preferenze personali: la struttura HTML utilizzata e il risultato raggiunto sono infatti per tutto identici.
Pixastic: Javascript Image Processing
Sul sito ufficiale della libreria, rilasciata con licenza MIT e sviluppata da Jacob Seidelin, è disponibile una ricca documentazione sulle modalità di implementazione e sugli effetti disponibili. C'è anche un interessante Photo Editor Online realizzato con Pixastic, proprio a sottolinerare le grandi potenzialità offerte.
Abbiamo detto che Pixastic basa il suo funzionamento sul nuovo elemento <canvas>, che è parte delle specifiche (WhatWG Web applications 1.0) di HTML5. Naturalmente, non tutti i browser implementano questo elemento: le recenti versioni di Mozilla Firefox, Opera e Safari hanno un buon supporto, purtroppo altrettanto non si può dire di Internet Explorer. Pixastic però estende la compabilità di alcuni effetti applicati con <canvas> anche al browser Microsoft, simulandoli grazie ai "soliti" filtri proprietari... Proprio in ragione della compatibilità cross-browser ci interesseremo solo delle soluzioni maggiormente compatibili: Blurfast, Desaturate, Invert, Lighten, Flip Horizontally e Flip Vertically. I nomi degli effetti sono di per sè già esplicativi. Per chi volesse esplorare le altre possibilità offerte da Pixastic, ogni filtro applicabile è ampiente descritto nelle modalità di utilizzo: qui l'elenco completo degli effetti disponibili (in tutto ben 27!). Sembra proprio di avere a disposizione in Javascript l'equivalente delle GD libraries di PHP!
Prima di procedere all'analisi dei nostri esempi finali, vediamo come funziona Pixastic e proviamo subito qualche riga di codice. Per far questo andiamo sulla pagina di download per prelevare i file necessari: è possibile scaricare l'archivio completo o selezionare a piacimento gli effetti da aggiungere. Una volta fatto questo includiamo i file Javascript nel tag <head></head> della nostra pagina, più o meno così:
<script type="text/javascript" src="pixastic.core.js"></script>
<script type="text/javascript" src="desaturate.js"></script>
Ora abbiamo a disposizione un oggetto globale Pixastic; questo oggetto dispone del metodo Pixastic.process() che possiamo applicare alle immagini del nostro documento. Come primo argomento la funzione attende un elemento immagine valido. Il secondo parametro è l'effetto da applicare, mentre il terzo può essere facoltativo; si tratta di un hash di opzioni che cambiano a seconda dell'effetto.
Pixastic.process accetta in realtà anche un quarto argomento, per invocare una eventuale funzione di callback. Per completezza Pixastic può processare gli effetti sulle immagini anche automaticamente, in base a una speciale sintassi delle classi CSS applicate ai tag <img>; basta attivare manualmente il parsing delle classi nel nostro codice Javascript (Pixastic.parseOnLoad = true). Per informazioni più specifiche potete consultare la documentazione ufficiale. Alcune precisazioni: Pixastic funziona solo con immagini che risiedono sullo stesso server della pagina. Inoltre, prima di invocare Pixastic.process su un'immagine, è bene assicurarsi che ne sia avvenuto il completo caricamento:
var img = document.getElementById('example');
if (img.complete) {
Pixastic.process(img, "lighten", {amount:0.5});
}
Direi che siamo a posto, possiamo prendere confidenza con gli esempi della pagina che ho preparato, e magari fare un po' di test con gli effetti e i vari parametri disponibili per ognuno, prima di affrontare qualcosa di più concreto, riutilizzabile nel nostro sito o nei nostri lavori.
Immagini rollover: funzionamento, markup HTML e regole CSS
Lo script che ci apprestiamo a realizzare applica un semplice rollover sulle immagini cliccabili di una gallery, e non influisce sul funzionamento di altri script o di un eventuale lightbox, ormai un "classico" per implementare l'ingrandimento delle miniature. Nell'HTML è' necessario solo definire gli opportuni attributi identificativi (id o classi) sugli elementi interessati (cioè l'elemento genitore dell'immagine, nel nostro caso un link). Solitamente, un rollover Javascript sostituisce un'immagine con un'altra in seguito agli eventi del mouse, attraverso i gestori onmouseover e onmouseout. Nel nostro caso non avremo bisogno di immagini aggiuntive, l'elemento sostitutivo sarà infatti generato da Pixastic e inserito attraverso il DOM in uno span sovrapposto all'immagine grazie ai CSS.
Analizziamo le regole CSS necessarie e uno snapshot dell'HTML del nostro esempio che utilizza una lista non ordinata per contenere le immagini:
ul.gallery { margin:0; padding:0; list-style-type:none; }
ul.gallery li { float:left; display:inline; margin:10px; padding:0; width:150px; height:100px; }
ul.gallery a { border:0; width:150px; height:100px; display:block; position:relative;}
ul.gallery img { border:none;}
ul.gallery span { position:absolute; width:150px; height:100px; top:0; left:0; overflow:hidden; cursor:pointer; }
<ul class="gallery">
<li><a href="#" title="image"><img src="images/firefox.jpg" alt="image" />
<!-- html inserito con Javascript -->
<span style="opacity: 0;">
<canvas id="" class="" width="150" height="100" />
</span>
<!-- fine html inserito con javascript -->
</a></li>
<!-- continuano le altre immagini... -->
</ul>
Immagini rollover: il codice Javascript.
Affrontiamo in parallelo il codice veramente simile dei due esempi, uno realizzato con Prototype (1.6.0.3), Scriptaculous (1.8.2) Effect, l'altro con JQuery (1.3.2). Per ogni framework dobbiamo includere il relativo adapter (poche righe di Javascript), che ci consentirà di accedere con maggiore comodità ai metodi di Pixastic: nel caso di JQuery l'adapter è prelevabile direttamente dal sito ufficiale della libreria: non mancano anche esempi sull' utilizzo.
// JQuery <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/pixastic.jquery.plugin.js"></script>
<script type="text/javascript" src="pixastic/pixastic.core.js"></script>
<script type="text/javascript" src="pixastic/desaturate.js"></script>
// Prototype <script type="text/javascript" src="js/prototype-1.6.0.3.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/pixastic.prototype.plugin.js"></script>
<script type="text/javascript" src="pixastic/pixastic.core.js"></script>
<script type="text/javascript" src="pixastic/desaturate.js"></script>
Il nostro script è costituito da una semplice funzione che accetta due parametri: initRollover(selector,pixeffect): selector è l'identificativo CSS degli elementi genitori delle immagini su cui vogliamo applicare il rollover; pixeffect è il nome dell'effetto di Pixastic che si vuole implementare. Se vogliamo utilizzare più effetti nella stessa pagina, invocando una seconda volta la funzione su una diversa classe di elementi, dovremo ricordarci di includere anche il relativo file Javascript. Una volta caricato l'albero DOM del documento, possiamo dunque richiamare initRollover:
// JQuery
$(document).ready( function() {
initRollover('ul.gallery a', 'desaturate');
});
// Prototype
document.observe ('dom:loaded', function() {
initRollover('ul.gallery a', 'desaturate');
});
Vediamone il funzionamento più in dettaglio: per prima cosa lo script attraversa il documento alla ricerca dei collegamenti contenenti le immagini (richiamati nella nostra funzione domready) e ci restituisce un array di elementi su cui possiamo iterare diverse operazioni che vederemo in seguito:
// JQuery
function initRollover(selector, pixeffect) {
$(selector).each(function() {
var elem = $(this);
// il resto del codice...
});
}
// Prototype
function initRollover(selector, pixeffect) {
$$(selector).each(function(elem) {
// il resto del codice...
});
}
Grazie al precedente ciclo each per ognuno dei collegamenti trovati viene generato un elemento canvas a partire dalla thumb originale; lo script inserisce poi dinamicamente (e allo stesso tempo nasconde) il nuovo elemento, utilizzando uno <span> contenitore. In questo modo, le immagini di rollover generate vengono anche precaricate:
// JQuery
var newimg = new Image();
newimg.onload = function() {
// metodo facilitato dall'adapter
$(newimg).pixastic(pixeffect, {amount:0.5});
}
var span = $(document.createElement("span")).append(newimg).css('opacity',0);
newimg.src = elem.find('img').attr('src');
elem.append(span);
// Prototype
var newimg = new Image();
newimg.onload = function() {
// metodi facilitati dall'adapter
$(newimg).pixastic(pixeffect, {amount:0.5});
//Element.pixastic(newimg, "desaturate"));
}
var span = new Element('span').setOpacity(0);
span.insert(newimg);
newimg.src = elem.down('img').src;
elem.insert(span);
È quasi tutto, il resto del codice provvede solo a mostrare o nascondere lo span con le immagini sostitutive in seguito agli eventi del mouse. Per rendere più gradevole il passaggio da un'immagine all'altra vengono utilizzati rispettivamente gli effetti animate di JQuery e Appear / Fade di Scriptaculous (si poteva utilizzare anche Morph) che agiscono sul valore CSS opacity dello span. In entrambi i casi viene fermato un eventuale precedente effetto prima di innescarne uno nuovo:
// JQuery
elem.hover(function () {
span.stop().animate({
opacity: 1
}, 250);
}, function () {
span.stop().animate({
opacity: 0
}, 250);
});
// Prototype
elem.observe('mouseover', function(e) {
span.currentEffect && span.currentEffect.cancel();
span.currentEffect = new Effect.Appear(span, { duration: 0.3 });
});
elem.observe('mouseout', function(e) {
span.currentEffect && span.currentEffect.cancel();
span.currentEffect = new Effect.Fade(span, { duration: 0.3 });
});
Dopo la teoria, ecco il risultato del nostro lavoro in pratica: con jQuery (vedi) e con Prototype + Scriptaculous (vedi).
È veramente tutto. I file di esempio, disponibili per il download, si prestano ad ampie possibilità di personalizzazione e impiego.
