«

»

Ott 12 2013

Stampa Articolo

Effetto Lightbox con jQuery e Prettyphoto per le immagini di WordPress

pretty-photoQuando clicchiamo sulle foto delle immagini nei post o nelle pagine di WordPress è gradevole visualizzarle ingrandite tramite la funzione Lightbox piuttosto che aprirla in una pagina bianca del tutto staccata dalla grafica del blog.

Nel caso che questa funzione non sia inclusa di default nel tema grafico in uso, si può inserirla in modo semplice e sicuro: la nostra breve guida vi guiderà passo per passo nell'operazione di installazione di prettyphoto.

Lo script PrettyPhoto, clone di lightbox jQuery, supporta non solo le immagini ma anche i video (flash, YouTube, iframe e ajax) ed inoltre è compatibile con tutti i principali browser, compreso IE6.

 

prettyphoto-cartelle

  • Installazione di PrettyPhoto

La procedura da seguire consiste nello scaricare il pacchetto da questa pagina - scegliere la versione compressa - e dopo averlo scompattato di caricare nella directory del tuo tema le cartelle /css/  /images/ e /js/ con tutti i file contenuti al loro interno.

Completata la fase di caricamento di queste tre cartelle e dei file in esse contenuti, si deve inserire in un paio di file del tema in uso il codice necessario per richiamare le librerie javascript.

Di seguito le operazioni da compiere:

1) All'interno della cartella del tema in uso, aprire con un editor di testo il file header.php e aggiungere appena dopo il tag <head> il seguente codice:

 

 

2) Aprire anche il file functions.php presente nel proprio tema e inserire in fondo il codice che servirà ad aggiungere l’attributo rel=”prettyPhoto” a tutte le immagini in modo da poterne visualizzare l’effetto Lightbox:

 

 

In questo video potete seguire tutta la procedura di installazione:
(Per una visione migliore ingrandire a tutto schermo il video)

Per maggiori approfondimenti, demo e gestione avanzata di PrettyPhoto si rimanda a questa pagina.

 

Lascia un commento

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

Puoi usare i seguenti tag ed attributi HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">


*

Login

Register | Lost your password?