Itek Developer

Programmare è arte

Visualizzare video YouTube con jquery e fancybox

Il plug-in fancybox

Fancybox è un utilissimo plug-in basato sulla libreria  jquery  che permette di visualizzare in una dialog box immagini , testo , codice html e file swf.  Come avrete intuito,  in questo articolo vi mostrerò come usare il plug-in per visualizzare all’interno  di un’ applicazione web i video di yuotube. Seguiranno altri articoli dedicati ad esplorare tutte le potenzialità di fancybox ( creare foto slider , visualizzare il  risultat di una richiesta ajax ecc..). Per  scaricare il plug-in andate al sito http://fancybox.net/ . Il pacchetto di downlaod conterrà la cartella fancybox all’interno della quale troverete tutti i files .js , il file css e le immagini necessarie al funzionamento  del plug-in.

Inserire in plug-in nel nostro progetto

Vediamo il primo passo da fare per raggiungere lo scopo. Creiamo un’applicazione vuota ( per questo esempio io ho utilizzato un’applicazione ASP.NET con Visual Studio ma potete utilizzare tranquillamente anche un progetto PHP o Java).  Una volta creato il progetto copiamo al suo interno l’intera cartella fancybox. Successivamente creiamo una pagina aspx ( per chi usa ASP.NET ) o una pagina PHP ( per chi usa il PHP ).  Con usa serie di tag <script> includiamo nella pagina appena creata tutti i file .js  e con il tag <link> il file css della cartella fancybox. Infine includiamo con un ulteriore tag <script> la libreria jquery. Vediamo questa prima parte di codice :

  1 <html xmlns="http://www.w3.org/1999/xhtml">
  2 <head runat="server">
  3     <title>YouTube Slider</title>
  4     <link href="fancybox/jquery.fancybox-1.3.2.css" rel="stylesheet" type="text/css" />
  5     <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js"></script>
  6     <script src="fancybox/jquery.fancybox-1.3.2.js" type="text/javascript"></script>
  7     <script src="fancybox/jquery.fancybox-1.3.2.pack.js" type="text/javascript"></script>
  8     <script src="fancybox/jquery.mousewheel-3.0.4.pack.js" type="text/javascript"></script>
  9     <script src="fancybox/jquery.easing-1.3.pack.js" type="text/javascript"></script>
 10 </head>
 11 <body>

A questo punto abbiamo tutto il necessario per creare il nostro “YouTube  Slider”. Per capire come procedere occorre fare una premessa. Fancybox utilizza gli elementi anchor ( <a></a> ) come elementi base al quale applicare le funzionalità del plug-in stesso. Per capire meglio guardiamo la parte di codice relativa a quanto appena descritto :

  1 <div>
  2     <a href="http://www.youtube.com/watch?v=7FaKYHfwUkM" class="video">
  3         <img src="http://i4.ytimg.com/vi/7FaKYHfwUkM/default.jpg" height="80" width="80" alt="#"/>
  4     </a>
  5     <a href="http://www.youtube.com/watch?v=XhhDY0GeBI4" class="video">
  6         <img src="http://i1.ytimg.com/vi/XhhDY0GeBI4/default.jpg" height="80" width="80" alt="#"/>
  7     </a>
  8 </div>

Come potete vedere all’interno di un <div> abbiamo due elementi anchor ( <a></a> ) e all’interno di ognuno di essi un tag <img>.  Ogni elemento <a> rappresenta un video. Di fatti,  potete facilmente notare che l’attributo href fa riferimento propio al link di un video di youtube. Ogni immagine contenuta all’interno dell’anchor ( riga 3  – riga  6 )  è la miniatura relativa la video tesso. L’attributo src è l’indirizzo di tale immagine. In questo esempio , per semplicità , ho inserito soltanto due video. Va da se che potete inserire tutti quelli che volete. Per rendere la vostra applicazione il più flessibile possibile potreste ,  per esempio ,  creare un file xml contenente i link dei video che volete visualizzare. Oppure potete usare le Google API per inserirli dinamicamente  ( per esempio i video più cliccati della giornata ecc …) . Continuiamo per ora con il nostro semplice esempio. In seguito pubblicherò altri articoli con  esempi più  completi.

Adesso passiamo alla parte più interessante del codice. Andiamo ad applicare le funzioni del plug-in fancybox  ai nostri elementi anchor. A tale scopo creiamo un blocco javascript in fondo alla nostra pagina :

  1 <script type="text/javascript">
  2         $("a.video").click(function () {
  3             $.fancybox({
  4                 'padding': 0,
  5                 'autoScale': false,
  6                 'transitionIn': 'none',
  7                 'transitionOut': 'none',
  8                 'title': this.title,
  9                 'width': 680,
 10                 'height': 495,
 11                 'href': this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
 12                 'type': 'swf',
 13                 'swf': { 'allowfullscreen': 'true'}
 14             });
 15             return false;
 16
 17         });
 18 </script>

Alla riga 2 usiamo il selettore jquery per recuperare tutti gli elementi anchor che hanno l’attributo class = video ( notare che ogni elemento <a> ha l’attributo class=”video” in modo tale da differenziarli da altri possibili elementi <a> che non fanno riferimento ad un video. Ovviamente potete usare un qualsiasi nome come parametro per l’attributo class. Io ho usato “video” per rendere più comprensibile il codice). Ogni volta che si clicca su un elemento <a> applichiamo la funzione $.fancybox all’elemento cliccato. All’interno della funzione trovate una serie di parametri per adattare alle vostre esigenze la il modo in cui i vari video verranno visualizzati.
Di seguito potete vedere il codice completo della pagina aspx :

  1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="YoutubeSlider.Default" %>
  2
  3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4
  5 <html xmlns="http://www.w3.org/1999/xhtml">
  6 <head runat="server">
  7     <title>YouTube Slider</title>
  8     <link href="fancybox/jquery.fancybox-1.3.2.css" rel="stylesheet" type="text/css" />
  9     <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js"></script>
 10     <script src="fancybox/jquery.fancybox-1.3.2.js" type="text/javascript"></script>
 11     <script src="fancybox/jquery.fancybox-1.3.2.pack.js" type="text/javascript"></script>
 12     <script src="fancybox/jquery.mousewheel-3.0.4.pack.js" type="text/javascript"></script>
 13     <script src="fancybox/jquery.easing-1.3.pack.js" type="text/javascript"></script>
 14 </head>
 15 <body>
 16     <form id="form1" runat="server">
 17     <h2 style="color:#45d; border-bottom:1px solid #ddd"><i>YouTube Slider</i></h2>
 18     <div>
 19         <a href="http://www.youtube.com/watch?v=7FaKYHfwUkM" class="video">
 20             <img src="http://i4.ytimg.com/vi/7FaKYHfwUkM/default.jpg" height="80" width="80" alt="#"/>
 21         </a>
 22         <a href="http://www.youtube.com/watch?v=XhhDY0GeBI4" class="video">
 23             <img src="http://i1.ytimg.com/vi/XhhDY0GeBI4/default.jpg" height="80" width="80" alt="#"/>
 24         </a>
 25     </div>
 26     </form>
 27     <script type="text/javascript">
 28         $("a.video").click(function () {
 29             $.fancybox({
 30                 'padding': 0,
 31                 'autoScale': false,
 32                 'transitionIn': 'none',
 33                 'transitionOut': 'none',
 34                 'title': this.title,
 35                 'width': 680,
 36                 'height': 495,
 37                 'href': this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
 38                 'type': 'swf',
 39                 'swf': { 'allowfullscreen': 'true'}
 40             });
 41             return false;
 42
 43         });
 44     </script>
 45 </body>
 46 </html>

Video dell’applicazione in esecuzione

Download del codice completo ( ASP.NET Framework 3.5 )

Nota : Se scaricate il codice potete evitare di fare il download del  plug-in fancybox in quanto è già incluso nel progetto.

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

%d blogger cliccano Mi Piace per questo: