Mr. Webmaster Blog Menu
  • Home
  • Cerca
  • Argomenti del Blog
    • A
    • Apple
    • B
    • Browser
    • C
    • CMS
    • D
    • Database
    • E
    • Eventi & WorkShop
    • F
    • Freelance
    • G
    • Grafica
    • H
    • Hosting
    • I
    • IoT
    • L
    • Linux
    • M
    • Makers
    • Mobile
    • Mr. Webmaster
    • O
    • Online Apps
    • Open Source
    • P
    • Programmazione
    • R
    • Reti
    • S
    • Scripting
    • Senza Rete
    • Sicurezza
    • Social Network
    • Software e App
    • W
    • Web Design
    • Web e Diritto
    • Web e Lavoro
    • Web Marketing
    • Web Server
    • Web Writing
    • Windows
  • Network
  • Corsi on-line
Mr.Webmaster Blog→Scripting→jQuery Lightbox per i video di YouTube
  • 03
    MAG
    2010

jQuery Lightbox per i video di YouTube

Scritto da Massimiliano Bossi | Scripting

Googleggiando mi sono imbattuto in un bel plug-in per jQuery clone del più celebre Lightbox. Il plug-in in questione si chiama PrettyPhoto ed è, appunto, una evoluzione del classico lightbox per le immagini.
Con PrettyPhoto, infatti, è possibile ricreare l’effetto di lightbox anche per contenuti diversi dalle immagini come, ad esempio, i video di YouTube (ma non solo: possono essere “lightboxati” anche iframe, filmati flash, video di Vimeo o QuickTime, ecc.).

Per prima cosa è necessario scaricare il plug-in dal sito dell’autore.
Dopodichè è sufficiente copiare all’interno della cartella del nostro sito il file .js, il foglio di stile e le immagini.
Fatto questo basterà includere, all’interno del header della nostra pagina web il seguente codice:

<link rel="stylesheet" type="text/css" href="css/prettyPhoto.css" media="screen" />
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>

Per aprire un video di YouTube nella finestra lightbox sarà sufficiente aggiungere rel="prettyPhoto" al semplice link alla pagina del video, in questo modo:

<a href="http://www.youtube.com/watch?v=Iau0e_Sm6QQ" rel="prettyPhoto">guarda il video</a>

Di seguito uno screenshot:

L’esempio completo può essere scaricato da questa pagina.

  • Javascript
  • jQuery
  • lightbox
  • prettyphoto
  • quicktime
  • video
  • vimeo
  • youtube

Naviga tra i post del Blog

← Notifiche con jQuery e PHP
→ Disastri con Photoshop

Commenti

I commenti sono sottoposti alle linee guida di moderazione e prima di essere visibili devono essere approvati da un moderatore.
  • Facebook
  • Twitter
  • Google+
  • YouTube
  • Feed RSS
Post correlati
  • jQuery: 5 plugin per YouTube 21/07/2010
  • Lightbox: 8 plugin per jQuery 20/06/2010
  • JW Box: un lightbox per JW Player 07/07/2010
  • Slimbox 2: Lightbox con jQuery in 4 Kb di codice 23/07/2010
  • Una photogallery con lightbox 19/03/2010
I post più letti del mese
  • Loading in attesa del caricamento della paginaLoading in attesa del caricamento della pagina22/03/2010
  • Scusi, mi sa dire il timestamp?Scusi, mi sa dire il timestamp?01/04/2010
  • Esecuzione di codice PHP da JavaScriptEsecuzione di codice PHP da JavaScript06/10/2015
  • Temporizzare il redirect con PHPTemporizzare il redirect con PHP15/06/2010
  • Redirect con jQueryRedirect con jQuery09/07/2010
Mr. Webmaster
  • RSS
  • Contattaci
  • Torna su
IKIweb
© 2003 - 2019 Mr. Webmaster
Mr. Webmaster ® è un marchio registrato.
E' vietata ogni forma di riproduzione.
IKIweb Internet Media S.r.l. - P.IVA 02848390122

Parliamo di noi: chi siamo / cronologia
Contatti: pubblicità / contattaci / segnala abusi
Note Legali: condizioni d'uso / privacy / cookie