Joomla! Popup Modal - Costruire in maniera semplice popup per immagini con effetto Lightbox

Di popup immagini, croce o delizia di ogni sito web, se ne possono vedere molte durante la navigazione in rete. Maggiormente utilizzate nelle gallerie, possono anche servire per avere un ingrandimento su una miniatura, per poi far apparire l'immagine a grandezza naturale.

In Joomla! è possibile avere le suddette Popup Modal con effetto Lightbox, in maniera assolutamente semplice. Voglio condividere questa news ed indicare, con pochi passaggi, come fare per ottenerle.

Non serve installare nessun file javascript o css. E' sufficente accertarsi che siano presenti 2 files, all'interno della root nella quale è installato Joomla!

Con un programma FTP, accedere alla cartella remota nella quale sono presenti tutti i files del CMS. Aprire la cartella /media/system/css/ e vedere se c'è il file modal.css. Stessa procedura per l'altro file javascript: /media/system/js/ ed accertarsi che ci sia il file modal.js. Questi 2 files vengono installati di default durante il processo di installazione, appunto, di Joomla!. E' sempre meglio fare un controllo prima. Per l'articolo in oggetto, le prove sono state fatte sulla versione 2.5.19 di Joomla!

Il passaggio successivo prevede l'accesso alla cartella /templates/MIOTEMPLATE/index.php. MIOTEMPLATE sta ad indicare che dobbiamo accedere alla cartella del template attualmente in uso.

Sempre con il programma FTP, portare sul desktop il file index.php. Aprirlo con un editor ed aggiungere il seguente codice:

<?php JHTML::_( 'behavior.modal' ); ?>

prima o dopo il codice php già esistente nel file index.php. Non annidare il codice postato da me con quello presente nel file; si rischierebbe di non vedere più nulla ed otterremmo una pagina bianca. Il codice completo:

<?php JHTML::_( 'behavior.modal' ); ?>
<?php
defined('_JEXEC') or die('Restricted access');
?>

La scrittura corretta dello snippet di codice è quella appena riportata qui su. In questo modo non si avranno problemi di sorta per la visualizzazione delle pagine del sito.

Fatta questa piccola aggiunta, riportare il file index.php nella cartella del proprio template. Aprire l'editor di Joomla! e scrivere il seguente codice HTML:

<a class="modal" href="/images/sampledata/fruitshop/tamarind.jpg"> <img src="/images/sampledata/fruitshop/fruits.gif" border="0" alt="Tag alt Immagine" /></a>

Le due immagini per la prova: tamarind.jpg e fruits.gif sono reperibili nella cartella /images di Joomla!. Le prove possono essere, ovviamente, fatte con qualsiasi tipo di immagini a scelta. Oppure collegare l'immagine da un semplice link testuale, ricordandosi di aggiungere la classe .modal.

Come funziona

Il behavior "modale" è una routine JavaScript che scorre attraverso l'output della pagina e ricerca ogni collegamento che ha la classe .modal. Una volta trovato qualsiasi link con la classe in oggetto, crea la finestra a comparsa sull'immagine riferita al collegamento. Tale tecnica è chiamata unobtrusive javascript. L'enorme vantaggio è che degrada bene se JavaScript è disabilitato. Con questo si intende che, se il browser non supporta Javascript (cosa assai insolita), siamo in presenza di markup HTML valido. L'utente potrà vedere l'anteprima e l'immagine grande in un'altra pagina.

Cliccando sull'immagine di seguito riportata, si ha modo di vedere la Popup Modal in azione.

Popup Modal Joomla!