Volendo creare nel proprio sito web una pagina galleria, con all’interno i propri video e le proprie foto, ospitate su servizi esterni come Youtube o Picasa Web i due plugin che andiamo a conoscere sono l’ideale.
Il pregio di utilizzare questi script è di avere già tutto pronto quello che serve, cadendo però nell’errore di dover visualizzare tutti come viene proposto dallo script stesso, senza troppe possibilità (a meno di modificare manualmente il codice) il risultato
Picasa Webalbum Integrator
Con una semplice chiamata Jquery, avendo a disposizione uno username di Picasa Web, possiamo integrare velocemente tutte le foto caricare, tramite il feed disponibile, in una galleria gestita dinamicamente senza il reload della pagina.
La versione provata è la 1.4.1 alla quale sono state aggiute alcune funzioni come lo slideshow delle foto tramite Fancybox o la possibilità di effettuare il download della foto che si sta visualizzando.
Prima di qualsiasi cosa è necessario collegare il file JS che contiene la funzione ed il file CSS che ne gestisce la grafica (tra l’altro facilmente modificabile) <link href="css/pwi.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery.pwi.js" type="text/javascript"></script>
Quindi chiamiamo la funzione PWI e assegnamo gli eventuali attributi.
$(document).ready(function() {
$("#container").pwi({
username: 'jquery.pwi',
mode: 'albums',
albums: ["Album1","Album2"],
thumbCss: { margin: '5px' },
onclickThumb: ""
});
});
Ulteriori attributi possono essere settati per andare a modificare la dimensione delle miniature, la visualizzazione della data, del numero di foto, del titolo dell’album ecc.
Sono disponibili sul sito web di google-code insieme al file da scaricare
SimpleTube
Simpletube permette di inserire singoli video, playlist o risultati di ricerca sempre tramite il feed di Youtube.
L’utilizzo di simpletube è estremamente semplice, ma oltre al file principale è necessario anche appoggiarsi ad un altro plugin di JQuery che gestisce gli SWF: swfobject.
Quindi il collegamento dei due file sarà <script src="js/jquery.simpletube.js" type="text/javascript"> <script src="js/jquery.swfobject.js" type="text/javascript"></script></script>
La gestione del css per ordinare graficamente i risultati non è complicata e prevede l’appoggio a 5 classi che vengono create nel risultato: videoholder: il contenitore esterno del flashplaryer; videooutput: il contenitore interno del flashplayer; videothumbnails: il contenitore di tutte le miniature,ogniuna di esse rinchiuse in DIV; thumbdescription: il contenitore SPAN della descrizione del video; currentvideo: assegnato al DIV che contiene il video attualmente in visione.
La chiamata alla funzione è relativamente semplice ed anche per questa esistono differenti attributi
$(document).ready(function() {
$('#videoholder').simpletube({
displaytype: 'playlist',
feedid: '7A970084B73399A8',
activeclass: 'selectedclip',
});
});
Il file da scaricare per avere questo plugin è disponibile sul sito ufficiale del plugin stesso oltre che sul sito di Jquery.
Anche tutti gli attributi ed una loro spiegazione sono disponibili sul sito del progetto.