Con questo tutorial vorrei condividere insieme a voi una video gallery molto semplice ma allo stesso tempo di grande impatto sfruttando il motore di YouTube e il plugin FancyBox di jQuery.
Per realizzare la videogallery è sufficiente incorporare all’interno della nostra pagina.html la libreria jQuery, il plugin jQuery FancyBox con relativo foglio di stile .css + immagini ed il gioco è fatto.
Vediamo nel dettaglio come costruire la video gallery:
Per prima cosa occorre includere all’interno del tag <head></head> questi file:
- jquery-1.6.2.min.js
- jquery.fancybox-1.3.4.pack.js
- jquery.fancybox-1.3.4.css
Sempre all’interno del tag <head></head> occorre creare una funzione JavaScript che al click sul relativo link scatena l’apertura del pannello FancyBox come riportato sotto.
Copiate e incollate questo codice all’interno del tag <head></head> del vostro file.html.
jQuery(document).ready(function() {
$(".video").click(function() {
$.fancybox({
'padding': 0,
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none',
'title': this.title,
'width': 640,
'height': 385,
'href': this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type': 'swf',
'swf': {
'wmode': 'transparent',
'allowfullscreen': 'true'
}
});
return false;
});
});
Soffermiamoci un attimo su alcuni particolari:
Riga n.2
$(".video").click(function(){
La classe (“.video”) corrisponde alla classe che assegneremo al link il quale scatenerà l’apertura del pannello FancyBox con il video YouTube.
Riga n.8
'title': this.title,
Attraverso questo parametro dichiariamo di leggere il parametro “title” contenuto all’interno del link che andremo a costruire e verrà mostrato all’apertura del pannello FancyBox.
Riga n.9 e 10
'width': 640, 'height': 385,
Queste due righe determinano le dimensioni in larghezza e altezza del pannello FancyBox.
(Ricordatevi di non esagerare nelle dimensioni in quanto l’attuale risoluzione standard dei monitor si aggira intorno ai 1024px x 768px).
È arrivato il momento di mettere in piedi il tutto
Infine, come ultimo passaggio occorre inserire all’interno del nostro tag <body></body> la nostra video gallery contenente uno o più link (nell’esempio che andrete a vedere ne saranno inclusi 4 formattati in una lista) che apriranno i rispettivi pannelli FancyBox
<a title="MTV Bumper - Motion Graphics" href="http://www.youtube.com/v/x3BVS1d6MWI?fs=1&autoplay=1"> <img src="construction/thumb/1.png" alt="" /> </a>
Vediamo come viene costruito il link.
- attributo title=”" (mostrerà il titolo che andremo ad inserire, il quale verrà mostrato all’apertura del nostro pannello FancyBox)
- autoplay=1 (Inpostare questo parametro su 1 se vogliamo che il video parta in automatico all’apertura del pannello FancyBox, evitando così un ulteriore click).
- x3BVS1d6MWI (Questo parametro rappresenta l’id del video che siamo interessati a mostrare).
Per recuperare l’id di un video YouTube vedere l’immagine sottostante.
L’immagine che ho deciso di inserire all’interno del link non è altro che una miniatura creata manualmente da me a puro scopo stilistico, se non vi interessa potete tranquillamente ometterla e inserire un testo all’interno del link come: Visualizza il video.
Inserire tanti link quanti sono i video che volete aggiungere alla videogallery all’interno della vostra pagina.html variando solamente il titolo e l’id del video come mostrato sopra.
Infine potete stilare la vosta pagina.html a vostro piacimento creando un foglio di stile.
Date un occhiata alla demo oppure scaricate il tutorial per modificarlo o condividerlo a vostro piacimento e ricordate di lasciare un commento per qualsiasi necessità.
Ciao, grazie e ottima come guida!
Ti chiedo una cosa, tu sai come inserire un flusso streaming invece di una sorgente da youtube?
Grazie