Gallery WordPress, come aggiungere un effetto lightbox alla galleria immagini senza plugin.

L’utilizzo della gallery WordPress, nelle ultime versioni di questo CMS (soprattutto dalla 3.5), si è ulteriormente semplificata, possiamo infatti creare una galleria immagini all’interno di articoli e pagine WordPress, in pochi passaggi.

Una delle funzionalità non ancora presenti è la visualizzazione delle foto tramite un effetto lightbox, se non installando un apposito plugin per WordPress.

In questa guida scopriremo come aggiungere questo effetto popup alla gallery WordPress, in maniera abbastanza semplice, utilizzando il plugin jQuery prettyPhoto.

Gallery WordPress, aggiungiamo un effetto lightbox.

Per prima cosa devi creare la cartella wip-gallery-lightbox, nella directory wp-content/plugins/ e la sottocartella assets, dove andremo salvare i file di prettyPhoto.

Adesso scarica il pacchetto del plugin, dopo aver estratto il file scaricato copia, in assets, le tre cartelle css, js e images. Nella cartella js elimina tutti i file tranne prettyPhoto.js e crea un nuovo file custom.js, in cui verrà aggiunto il codice javascript per inizializzare il plugin.

A questo punto aggiungi il file principale del plugin init.php e scrivi:

/*
Plugin Name: Wip Gallery Lightbox
Plugin URI: https://www.wpinprogress.com/
Description: Wip Gallery Lightbox
Author: WPinProgress
Author URI: https://www.wpinprogress.com/
Version: 1.0.0
License: GPL3
*/

if (!function_exists('wip_social_buttons_scripts')) {

	function wip_social_buttons_scripts() {
	
		wp_enqueue_style( "prettyPhoto.css", plugins_url('/assets/css/prettyPhoto.css', __FILE__ ), array(), "" );
        	wp_enqueue_script( 'prettyPhoto.js', plugins_url('/assets/js/prettyPhoto.js', __FILE__ ), array('jquery'), FALSE, TRUE );
        	wp_enqueue_script( 'custom.js', plugins_url('/assets/js/custom.js', __FILE__ ), array('jquery'), FALSE, TRUE );
	
	}
	
	add_action( 'wp_enqueue_scripts', 'wip_social_buttons_scripts', 11 );

}

if (!function_exists('wip_prettyPhoto')) {

	function wip_prettyPhoto( $html, $id, $size, $permalink, $icon, $text ) {
		
		if ( ! $permalink )
			return str_replace( '<a', '<a rel="prettyPhoto" ', $html );
		else
			return $html;
	}

	add_filter( 'wp_get_attachment_link', 'wip_prettyPhoto', 10, 6);

}

Tutti i file css e javascript scaricati in precedenza, sono stati integrati utilizzando l’azione wp_enqueue_scripts().

Successivamente abbiamo inserito l’attributo rel con il valore prettyPhoto, nel link di ogni allegato della gallery, necessario per il corretto funzionamento di prettyPhoto.

Per fare questo, abbiamo utilizzato il filtro wp_get_attachment_link()

L’effetto lightbox funziona solamente se, nelle impostazioni della gallery WordPress, l’opzione “Link a” viene impostata su “File media“, se invece viene scelta l’opzione “Allegato pagina“, si aprirà la pagina dell’allegato e non il file dell’immagine.

Ecco perché è presente questo controllo:

if ( ! $permalink )

/*codice da eseguire*/

Infine aggiungi il codice javascript, nel file custom.js creato in precedenza, per inizializzare prettyPhoto.

jQuery.noConflict()(function($){

/* ===============================================
   Inizializziamo PrettyPhoto
   ============================================= */

	$("a[rel^='prettyPhoto']").prettyPhoto({
	
		animationSpeed:'fast',
		slideshow:5000,
		theme:'pp_default',
		show_title:false,
		social_tools: false
		
	});
	
/* ===============================================
   Aggiungiamo l'ID della gallery all'attributo rel
   ============================================= */

	$('.gallery').each(function(){

		var galleryID = $(this).attr('ID');
		 $(this).find("a[rel^='prettyPhoto']").attr('rel','prettyPhoto[' + galleryID + ']');

	});
	
});

Per personalizzare l’aspetto della lightbox, puoi dare un’occhiata alla documentazione di prettyPhoto, consultando la sezione “Customization“.

La parte finale è opzionale, serve a visualizzare una slideshow invece che aprire un’immagine alla volta.

È anche possibile impostare la slideshow di prettyPhoto, utilizzando il filtro wp_get_attachment_link(), in questo modo:

return str_replace( '<a', '<a rel="prettyPhoto[gallery]" ', $html );

Ottenendo però una sola slideshow, comune a tutte le gallery WordPress presenti nell’articolo.

Ecco il link per scaricare il plugin, dopo averlo installato potrai personalizzarlo come meglio credi. Eventualmente è possibile anche sostituire prettyPhoto con altri effetti lightbox, come swipebox.