LightBox per visualizzare un DIV azionato da script

 This article is available in english language too.

Usare il componente Lightbox per visualizzare il contenuto di un DIV anziché un immagine può non essere così immediato.
Per ottenere l’effetto desiderato nel mio esempio ho usato il plugin scsLightbox per jQuery. Questo facilita l’interazione con gli elementi della pagina.
Ecco le istruzioni sintetiche:

  1. Scaricare jQuery e il plugin scsLightbox
  2. Caricare nella propria pagina gli script di jQuery della versione desiderata (io l’ho testato con 1.4.2 e 1.5.2) e quello del plugin, più il CSS del plugin:
<script type="text/javascript"
     src="MyScripts/jquery/jquery-x.y.z.min.js"></script>
<script type="text/javascript"
     src="MyScripts/scsLightbox/jquery.scslightbox.js"></script>
<link rel="stylesheet" type="text/css" 
     href="MyStyles/scsLightbox/jquery.scslightbox.css">
  1. Dato che l’evento che attiva la lightbox è il click di un link, è necessario inserire un link, che attiveremo da JS e il DIV di cui vogliamo visualizzare il contenuto nel LightBox; tale link sarà vuoto se non ci interessa che sia cliccabile col mouse (lo attiveremo da JS):
<a id="link-content-div" href="#content-div"></a>
<div id="content-div" style="display: none;">
  Il contenuto del nostro div.
</div>
Inizialmente il div è nascosto. Da notare che l’attributo href del link punta al selettore del div; questo è lo stesso che verrebbe utilizzato in un CSS per individuare il div.
  1. A questo punto, bisogna attivare la visualizzazione del content-div nel LightBox e definire la funzione JS che può essere richiamata per attivare il LighBox. Per trovare gli elementi del DOM e attivare il link usiamo la sintassi di jQuery:
<script type="text/javascript">
  $(function() {
    $('#link-content-div').scsLightbox();
  });
  function ShowContentDiv() {
    $('#link-content-div').trigger('click');
  }
</script>

Il meccanismo è abbastanza semplice e abbastanza utile dato che, a differenza del solo LightBox che consente la visualizzazione di sole immagini linkate dal tag a, qui visualizziamo nel LightBox il contenuto del div, quindi qualsiasi frammento HTML e inoltre lo attiviamo da script, quindi all’accadere di qualunque evento gestito sul client.

Riferimenti:

2 pensieri su “LightBox per visualizzare un DIV azionato da script

  1. Salve, prima di tutto grazie, ho trovato utilissima questa guida. Altri esempi simili non si integravano bene nel sito che sto preparando. Ho un unico problema: non riesco a modificare le dimensioni del box che appare. In quale dei parametri del css devo agire? In quello del div nascosto non funziona

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...