Effetto Lightbox sulle immagini con jQuery e Prettyphoto

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:

[js]


[/js]

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:

[php]// Integrazione PrettyPhoto
function add_rel_prettyphoto($content){
$string = ‘/<\/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 = ‘‘;
$replace = ‘‘;
$content = str_replace( $string, $replace, $content);
}
return $content;
}
add_filter(‘the_content’, ‘add_rel_prettyphoto’, 2);[/php]

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/