Video Lightbox è un plugin di WordPress per creare gallerie di video con effetto Lightbox.

Video Lightbox Plugin serve per creare un effetto Lightbox ai video ma, come vedremo può anche essere usato per immagini, oggetti in flash e anche delle pagine web. Occorre scaricare il plugin che sarà in formato ZIP e caricare tutta la cartella su wp-content/plugins. Se si ha un sito su Tophost non occorre neppure scompattare il file perché il File manager è in grado di caricarlo direttamente.

Quando si è proceduto, si va in Bacheca > Plugin e vedremo la nuova presenza di WP Video Lightbox.Dovremo semplicemente cliccare su Attiva. L’autore del plugin ha messo in rete una documentazione e le istruzioni in un file PDF. Si possono ottenere effetti per i video caricati su Youtube e su Vimeo. Prima di procedere guardate la demo della galleria di video che ho realizzato.

Quando cliccate su una miniatura si aprirà una finestra popup direttamente nella pagina. Se il video è lungo bisognerà attendere un paio di secondi

effetto-lightbox

Vediamo nello specifico come si possa creare una galleria di video di Youtube. Bisogna pubblicarla in una pagina, andare nell’editor e incollare il seguente codice

<a title=”Benigni- Quanto ti ho amato” rel=”wp-video-lightbox” href=”http://www.youtube.com/
watch?v=8fWnMfUS–k”><img src=”http://lh6.ggpht.com/_nT13UtBmmiU/THZmswZEkpI/AAAAAAA
AOGQ/7aMdFQ4EYHo/canzone.png” alt=”Benigni-quanto-ti-ho-amato” width=”140″ /></a>

  1. Nell’attributo title si mette il titolo del video e in alt la descrizione
  2. rel=”wp-video-lightbox” deve essere sempre presente ed è l’attributo che consente l’effetto Lightbox
  3. Dopo href=” deve essere incollato l’indirizzo del video preso da Youtube. Si può prendere anche dalla barra degli indirizzi
  4. In img src=” dovremo incollare l’URL della miniatura del video che dovremo aver caricato su un nostro spazio. Le miniature della galleria di demo le ho caricate su Picasa e le ho realizzate facendo degli screenshot ai video
  5. In width=” dovremo inserire la larghezza in pixel che vogliamo dare alle nostre miniature. Dipende anche da quante ne vogliamo mettere per pagina
  6. Da notare che una miniatura di questo tipo può anche essere messa in qualsiasi articolo del bloginserendo il codice precedente
  7. E’ anche possibile metterla in homepage incollando il codice nel widget Testo

widget-testo

In questo caso, chi cliccherà sulla miniatura, aprirà il video corrispondente in una finestra popup

videolightbox-homepage

Si potrà far partire il video cliccando sul pulsante di Play e si potrà chiudere in qualsiasi momento andando su Close. Per applicare l’effetto Lightbox ai video caricati su Vimeo occorre invece inserire in un articolo, in una pagina o in Homepage questo codice

<a href=”http://vimeo.com/13422697?width=640&amp;height=480″ rel=”wp-video-lightbox” title=”Titolo del video”><img src=”URL della miniatura” alt=”Titolo video” width=”60″ /></a>

dove le parti evidenziate di rosso devono essere personalizzate e riguardano: l’URL del video, le dimensioni del player in larghezza e altezza, il titolo del video, l’URL dell’immagine scelta come miniatura e la larghezza della stessa.

Volendo si può inserire lo stesso effetto ad una immagine

<a href=”URL immagine a tutto schermo” rel=”wp-video-lightbox” title=”Descrizione”><img src=”URL della miniatura” width=”60″ height=”60″ alt=”Titolo” /></a>

L’ultima miniatura della demo porta proprio all’apertura di un’immagine e è dovuta all’inserimento di questo codice

<a href=”http://lh4.ggpht.com/_nT13UtBmmiU/THZ-lgi7MtI/AAAAAAAAOIA/yPD3len3Bz8/benigni-locandina.jpg” rel=”wp-video-lightbox” title=”Benigni-Locandina”><img src=”http://lh5.ggpht.com/_nT13UtBmmiU/THZ-l4AT9PI/AAAAAAAAOIE/bORTNd68Z9k/benigni-locandina-miniatura.jpg” width=”100″ height=”60″ alt=”Benigni Orfei” /></a>

Si possono anche inserire oggetti in flash in formato SWF con queste caratteristiche, ecco il codice

<a href=”http://www.adobe.com/products/flashplayer/include/marquee/design.swf&?width=792&amp;height=294″ rel=”wp-videolightbox[flash]” title=”Flash 10 demo”><img src=”http://example.com/images/thumbnails/flash-logo.jpg” alt=”Flash 10 demo” width=”60″ /></a>

Per realizzare quest’effetto in un semplice link ecco che codice incollare

<a href=”#inline-1″ rel=”wp-video-lightbox” ><img src=”http://example.com/wpcontent/themes/NMFE/images/thumbnails/ logo.jpg” alt=””width=”50″ /></a><div id=”inline-1″ style=”display:none;”>
<p>Questo contenuto sarà aperto con Lightbox.</p>
</div>

Dove al posto del cancelletto (#) dovrà essere incollato l’URL del collegamento e al posto dell’URL in rossoquello della miniatura.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *