immagine avatar

Ciao come puoi notare ho dato una bella rinfrescatina al mio blog!
Attendo un tuo feedback, per suggerimenti e ulteriori proposte di miglioramento, ma anche, sperando che non ci siano, segnalazioni di errori o malfunzionamenti del blog. Buona lettura!

jQuery Multimedia portfolio: galleria di file multimediali

di MaiNick | 20 Lug 2008 | jQuery | 3 Commenti

jQuery Multimedia Portfolio

Oggi vi presento un plugin di jQuery realizzato da OpenStudio che permette di realizzare gallerie di file multimediali miste con immagini, video (formato flv) e audio (formato mp3).

Chiaramente ispirato dal famoso effetto “coverflow” di iTunes, jQuery Multimedia Portfolio è un semplice effetto che permette di realizzare gallerie che l’utente può scrollare usando una scrollbar presente sotto alle anteprime.

Il plugin automaticamente riconosce il tipo di file multimediale. Quando l’utente fa click su un’immagine utilizza un’altro script Thickbox che permette di vedere l’immagine in una finestra modale come il plugin Lightbox presentato in un’altro articolo. Mentre facendo click su un video o audio lo riproduce con il player adatto.

Per utilizzarlo in una documento html inserire all’interno dei tag <head> i collegamenti al foglio di stile del plugin e ai file JavaScript:

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.dimensions.js" type="text/javascript"></script>
<script src="js/ui.mouse.js" type="text/javascript"></script>
<script src="js/ui.slider.js" type="text/javascript"></script>
<script src="js/jquery.multimedia-portfolio.js" type="text/javascript"></script>

Nel <body> del documento è sufficiente aggiungere una semplice lista html di media:

<ul class="multimedia-portfolio">
	<li>
        <a href="link-to-document"><img title="doc-title" src="doc-thumbnail" alt="" /></a></li>
	<li>...</li>
...</ul>

Nell’elemento della lista è possibile inserire un’immagine:

<ul class="multimedia-portfolio">
	<li>
        <a href="documents/image1.jpg"><img title="voiture dans un champ" src="thumbnails/image1.jpg" alt="" /></a></li>
</ul>

un video in formato flv e audio in formato mp3:

<ul class="multimedia-portfolio">
	<li>
        <a href="http://pulp2.podemus.net/Audio/pulp_tence_131007.mp3"><img title="Enquête sur le changement climatique - M-P Lefebvre" src="thumbnails/pulp.jpg" alt="" /></a></li>
</ul>

Questo è un esempio completo è preso dal codice della demo dell’autore:

<ul class="multimedia-portfolio">
	<li><a class="thickbox" href="documents/image1.jpg"><img title="voiture dans un champ" src="thumbnails/image1.jpg" alt="voiture dans un champ" /></a></li>
	<li><a class="thickbox" href="documents/image2.jpg"><img title="moutons" src="thumbnails/image2.jpg" alt="moutons" /></a></li>
	<li><a class="thickbox" href="documents/image3.jpg"><img title="ballade en forêt" src="thumbnails/image3.jpg" alt="ballade en forêt" /></a></li>
	<li><a class="thickbox" href="documents/image5.jpg"><img title="arbre mort" src="thumbnails/image5.jpg" alt="arbre mort" /></a></li>
	<li><a class="thickbox" href="documents/image6.jpg"><img title="bottes de paille" src="thumbnails/image6.jpg" alt="bottes de paille" /></a></li>
	<li><a href="documents/tbilissoba.flv"><img title="Tbilisoba" src="thumbnails/tbilisoba.jpg" alt="Tbilisoba" width="320" height="240" /></a></li>
	<li><a class="thickbox" href="documents/image7.jpg"><img title="couleurs d'automne" src="thumbnails/image7.jpg" alt="couleurs d'automne" /></a></li>
	<li><a href="http://pulp2.podemus.net/Audio/pulp_tence_131007.mp3"><img title="Enquête sur le changement climatique - M-P Lefebvre" src="thumbnails/pulp.jpg" alt="Enquête sur le changement climatique - M-P Lefebvre" /></a></li>
	<li><a class="thickbox" href="documents/image8.jpg"><img title="couleurs d'automne encore" src="thumbnails/image8.jpg" alt="couleurs d'automne encore" /></a></li>
	<li><a class="thickbox" href="documents/image4.jpg"><img title="dans les arbres" src="thumbnails/image4.jpg" alt="dans les arbres" /></a></li>
</ul>
Tags: , , ,

3 Commenti

  1. Francesco Gavello ha detto:

    E’ molto bella l’interazione che ha con i diversi media contenuti: non è sicuramente un lavoro banale da implementare 🙂

Trackbacks

  1. upnews.it ha detto:

    jQuery Multimedia portfolio: galleria di file multimediali…

    Chiaramente ispirato dal famoso effetto “coverflow” di iTunes, jQuery Multimedia Portfolio è un semplice effetto che permette di realizzare gallerie di file multimediali miste con immagini, video (formato flv) e audio (formato mp3) che l’utente …

  2. diggita.it ha detto:

    jQuery Multimedia portfolio: galleria di file multimediali…

    Chiaramente ispirato dal famoso effetto “coverflow” di iTunes, jQuery Multimedia Portfolio è un semplice effetto che permette di realizzare gallerie di file multimediali miste con immagini, video (formato flv) e audio (formato mp3) che l’utente …

Lascia un Commento

^ Torna su