Loading...


lunedì 10 maggio 2010

jQuery Multimedia Portfolio 2.0 beta - Tutorial

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! ;-)

Nessun commento:

Posta un commento

Credo nelle libertà collettive ed individuali, tutti dovremmo avere il diritto di dire/scrivere ciò che pensiamo, ma dato che questo è un servizio per la collettività (più che personale), prego chiunque intenda lasciare un commento, di utilizzare un linguaggio civile e non offensivo nei confronti di tutti. Questo blog è moderato dall'autore. Ogni commento offensivo nei confronti di persone, animali, cose, religioni, idee, e quant'altro, non sarà accettato. Ringrazio tutti coloro che contribuiscono a questo blog con i loro commenti. Grazie.

Posta un commento

Contattami

Tuo nome
Indirizzo email
Oggetto
Messaggio
Image Verification
Please enter the text from the image [ What's This? ]
Powered by www.emailmeform.com

www.

 

©2007-2011 by Ragnarøkkr's Blog - Creato da Ragnarøkkr a.k.a. Marco Trulla

Tutto il materiale - di qualsiasi natura esso sia - contenuto in questo blog e/o qualsiasi pagina ad esso relativa, archivi del blog inclusi, salvo dove espressamente indicato, è di esclusiva proprietà di Marco Trulla. È vietata la riproduzione, anche parziale, di tutto il contenuto del blog senza previa autorizzazione scritta del suo autore (cioè IO!). E' possibile riproporre liberamente solo brevi estratti dei post citando l'autore e inserendo link follow verso la fonte originale.

MyFreeCopyright.com Registered  Protected