Ragnarøkkr's Blog

Recentemente, ho avuto modo di poter utilizzare l'interessante Multimedia Portfolio nella sua nuova versione 2 beta, un plug-in per la famosa libreria jQuery, che ci permette di arricchire le pagine dei nostri siti, con un'accattivante quanto semplice - sia nell'utilizzo che nella preparazione del codice - galleria di immagini, ma non solo....

Multimedia Portfolio, è un plug-in che ci permette di aggiungere quel tocco in più alle nostre gallerie di immagini, dandoci la possibilità di mostrare anche video in formato FLV e direttamente da YouTube, e file audio MP3.

Il suo utilizzo è abbastanza semplice, anche se necessita di alcuni altri plug-in per jQuery, per poter funzionare correttamente. Il codice necessario al suo utilizzo è il seguente (con le opportune sostituzioni in caso di directory o versioni di libreria differenti):

<link rel="stylesheet" href="css/jquery.fancybox-1.3.0.css" type="text/css" media="screen" />

<link rel="stylesheet" href="css/multimedia-portfolio.css" type="text/css" media="screen" /> 



<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>

<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>

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

<script type="text/javascript" src="js/jquery.swfobject.1-0-9.min.js"></script>

<script type="text/javascript" src="js/jquery.multimedia-portfolio-2.0.js"></script>

<script type="text/javascript" src="js/jquery.fancybox-1.3.0.pack.js"></script>

e prevede l'utilizzo, oltre alla libreria jQuery (ovviamente ;-)), anche della libreria jQuery User Interface e dei plug-in per la gestione di: rotella del mouse (Mouse Wheel), filmati Flash (SWFObject), visualizzazione delle immagini (Fancy Box) ed ovviamente il plug-in questione (Multimedia Portfolio). Inoltre, è richiesto l'utilizzo di un paio di fogli di stile (i nomi dei file sono autoesplicativi) per l'aspetto della fancy box e del contenitore della galleria immagini, ed un paio di file SWF per la gestione dei player relativi a video e audio MP3.

Questo plug-in, funziona appoggiandosi ad una semplice lista non ordinata di elementi, che intendiamo andare a visualizzare nella nostra galleria, quindi prepariamo una lista di elementi:

<ul class="multimedia-portfolio">

<!-- Immagine -->

<li>

<a href="link-immagine" title="titolo-immagine">

<img src="link-miniatura" width="larg-miniatura" height="alt-miniatura" alt=""  />

</a>

</li> 

<!-- Filmato FLV -->

<li>

<a href="link-video" title="titolo-video">

<img src="link-miniatura" width="larg-miniatura" height="alt-miniatura" alt="" />

</a>

</li>

<!-- Audio MP3 -->

<li>

<a href="link-audio" title="titolo-audio" >

<img src="link-miniatura" width="larg-miniatura" height="alt-miniatura" alt="" />

</a>

</li>

<!-- Video da Youtube -->

<li>

<a href="http://www.youtube.com/watch?v=id-del-video" title="titolo-video">titolo-video</a>

</li>

<li>...</li>

...

</ul>

Come si può vedere, è sufficiente definire una lista non ordinata (<ul>) degli elementi che si desidera mettere a disposizione degli utenti, ed impostarne la classe a multimedia-portfolio. Fatto ciò, non ci resta che andare ad aggiungere una linea di codice JavaScript alla nostra pagina web, e cioè il classico:

<script type="text/javascript">

$(document).ready(function(){

$("ul.multimedia-portfolio").multimedia_portfolio({width: 500, baseDir: '.'});

});

</script>

Questo frammento di codice verrà solitamente posizionato alla fine della sezione <HEAD> della pagina web. Qui, dobbiamo prestare attenzione ai valori passati alla funzione multimedia_portfolio(). Il parametro width andrà a specificare la larghezza complessiva del contenitore delle immagini, mentre baseDir indicherà la directory nella quale cercare i file SWF (player_flv_maxy.swf e player_mp3_maxi.swf) precedentemente menzionati.

Et voilà! Il gioco è fatto.... beh, non proprio... dobbiamo ricordarci di effettuare alcune modifiche ai fogli di stile precedentemente importati, se la struttura delle directory del vostro sito fosse differente da quella prevista dal plug-in. Quindi, dobbiamo prima assicurarci che nel file multimedia-portfolio.css, i seguenti elementi abbiano impostato correttamente l'attributo background-image, in modo che punti alla giusta directory:

.portfolio-bg-left, .portfolio-bg-right { ... }

.portfolio-bg-bottom-left, .portfolio-bg-bottom-right { ... }

.portfolio-container .portfolio-object-border { ... }

.portfolio-container .masque-left, .portfolio-container .masque-right { ... }

.ui-slider-handle { ... }

Quindi dobbiamo controllare che nel foglio di stile jquery.fancybox-1.3.0.css, i seguenti elementi abbiano l'attributo background-image impostato sulla directory corretta:

#fancybox-loading div { ... }

#fancybox-close { ... }

#fancybox-title-over { ... }

#fancybox-title-left { ... }

#fancybox-title-main { ... }

#fancybox-title-right { ... }

#fancybox-left, #fancybox-right { ... }

#fancybox-left-ico { ... }

#fancybox-right-ico { ... }

#fancy-bg-n { ... }

#fancy-bg-ne { ... }

#fancy-bg-e { ... }

#fancy-bg-se { ... }

#fancy-bg-s { ... }

#fancy-bg-sw { ... }

#fancy-bg-w { ... }

#fancy-bg-nw { ... }

e, dato che Internet Explorer (croce e delizia di tutti i webdesigner) non poteva non renderci la vita difficile, assicuriamoci che l'attributo src del filtro progid:DXImageTransform.Microsoft.AlphaImageLoader, presente della sezione in fondo al file, dedicata ad Internet Explorer, punti anch'esso alla directory corretta.

Terminati questi passaggi, obbligatori, ma piuttosto semplici, avremo finalmente la nostra bella galleria multimediale funzionante.

Come al solito, buona programmazione e buon divertimento a tutti! ;-)