Effetto Lightbox sulle immagini con jQuery e Prettyphoto

lightbox-wordpress

lightbox-wordpress
Una cosa che odio particolarmente di WordPress è la gestione delle immagini nei post o nelle pagine. Ritengo sia veramente poco gradevole quando cliccando un’ immagine nel nostro articolo questa venga aperta in una pagina bianca del tutto staccata dalla grafica del nostro blog. Per fortuna le soluzioni alternative ci sono, sia mediante uso di Plugin sia modificando il nostro tema via codice, in entrambi i casi usando un effetto tipo Lightbox in overlay molto carino e di sicuro impatto. La soluzione che adotteremo oggi?…naturalmente quella via codice 🙂

jQuery + PrettyPhoto accoppiata vincente

Per ottenere il nostro effetto Lightbox useremo l’accoppiata jQuery + PrettyPhoto integrando il tutto nel nostro tema preferito. Innanzitutto scarica il pacchetto PrettyPhoto (nel caso specifico la versione compresa), uno .zip contenente i files che andremo ad usare.
Dopo aver scompattato il file compresso dovrai semplicemente caricare nella directory del tuo tema le varie cartelle /css /images e /js così come sono, se hai già delle cartelle con lo stesso nome (quasi sicuramente /images) copiane il contenuto al  loro interno.

Integriamo il codice

Completata la fase di caricamento file andiamo ora ad integrare il codice necessario per richiamare le librerie javascript. In questo esempio le inseriremo in header.php ma se vuoi potrai includerle direttamente in functions.php seguendo il tutorial Come includere jQuery in WordPress. Apri header.php e aggiungi, sempre prima di <?php wp_head(); ?> questo codice:

<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>

ora apri il file functions.php e alla fine aggiungi il codice qui sotto che servirà ad aggiungere l’attributo rel=”prettyPhoto” a tutte le immagini in modo da poterne visualizzare l’effetto Lightbox:

// Integrazione PrettyPhoto
function add_rel_prettyphoto($content){
	$string = '/<a href="(.*?).(jpg|jpeg|png|gif|bmp|ico)"><img(.*?)class="(.*?)wp-image-(.*?)" \/><\/a>/i';
	preg_match_all( $string, $content, $matches, PREG_SET_ORDER);
	foreach ($matches as $val) {
		$slimbox_caption = '';
		$post = get_post($val[5]);
		$slimbox_caption = esc_attr( $post->post_content );
		$string = '<a href="' . $val[1] . '.' . $val[2] . '"><img' . $val[3] . 'class="' . $val[4] . 'wp-image-' . $val[5] . '" /></a>';
		$replace = '<a href="' . $val[1] . '.' . $val[2] . '" rel="prettyPhoto" title="' . $slimbox_caption . '"><img' . $val[3] . 'class="' . $val[4] . 'wp-image-' . $val[5] . '" /></a>';
		$content = str_replace( $string, $replace, $content);
	}
	return $content;
}
add_filter('the_content', 'add_rel_prettyphoto', 2);

Per Demo e  gestione avanzata di PrettyPhoto (gallery e video) ti invito a visitare la pagina ufficiale del plugin:
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

5 thoughts on “Effetto Lightbox sulle immagini con jQuery e Prettyphoto

  1. Ciao, guarda non so se è un problema di wp 3.2 o del mio tema, ma il codice non funzionava.

    Ho dovuto riscrivere la stringa di confronto in questo modo:

    $string = '/<a href="(.*?).(jpg|jpeg|png|gif|bmp|ico)" rel="nofollow">/i';
  2. Ciao,
    Dal momento che questo post è un pò vecchio magari non ricevo neanche risposta.. Però volevo esporre un mio problema con prettyphoto.
    In pratica, funziona benissimo ma non capisco come poterne personalizzare la grafica.
    In particolare, sono riuscito ad agire sui bottoni di “next” e “previous” inserendone due creati da me.
    Il resto, sembra che vengano richiamati dal file “sprite.png” ma non riesco a capire come, essendo un’immagine png dove sono raccolti tutti i vari sprite.
    Nel dettaglio, vorrei cambiare l’aspetto del box rendendolo leggermente opaco e anche personalizzare il resto dei bottoni rendendoli consoni alla grafica generale del sito.
    Spero di ricevere risposta perchè la cosa mi sta mandando al manicomio! 🙂
    Grazie mille!

  3. Ciao Francesco, eccomi qua 🙂
    Le immagini le trovi nella cartella /images/prettyPhoto/nome-tema-grafico…
    ci sono infatti 6 grafiche diverse da poter scegliere dark_rounded, dark_square etc..

    Per personalizzare la grafica dovrai metter mano al file css che trovi nella cartella /css, tutto qua.

    Volendo hai anche la possibilità di agire sulla funzione che richiama lo script in WP per modificare alcuni parametri…vedi la documentazione qui: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/documentation

Lascia un commento

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