massimopellegrino.it

Il valore di un’idea sta nel metterla in pratica

Aprire una immagine in un lightbox in Joomla

Quando si inserisce una immagine come miniatura, all'interno di una pagina di un sito gestito con Joomla,  e si vuole poterla far vedere ingrandita al click del mouse, magari in un lightbox, si può utilizzare la routine  JavaScript "behavior modal", sfruttando la classe .modal già presente in ambiente Joomla (almeno fino alla versione 3...), .

Per fare ciò, bisogna per prima cosa controllare la presenza dei file "modal.css" e "modal.js", rispettivamente nelle cartelle (sul server dove è posizionato il nostro sito, mediante un qualsiasi client FTP, FileZilla... ecc), "/media/system/css/" e "/media/system/js".

Fatto questo bisogna accedere al file "index.php" del template attivo (cartella "template/nome-template-attivo/index.php" ed aggiungere, anche all'inizio della pagina (naturalmente dopo il tag di apertura PHP...), il seguente codice:

JHTML::_( 'behavior.modal' )

A questo punto, per inserire una immagine nel singolo articolo Joomla, utilizzeremo il codice HTML seguente:

<a class="modal" title="click per ingrandire"

href="/images/mia_immagine_grandezza_normale.jpg">

<img src="/images/mia_immagine_miniatura.jpg" alt="" 

width="150px" height="75px" /></a>

Così facendo si otterrà un effetto come questo:

Chiunque ne abbia voglia può copiare ed incollare il codice dell'esempio, replicando così il metodo nel proprio sito Joomla, cambiando naturalmente il nome delle immagini e il percorso in cui si trovano.

Max P. 02/05/2017