HOWTO: JS triggered link showing a DIV with LightBox

 Questo articolo è disponibile anche in italiano.

To use Lightbox to display the content of a DIV instead of an image can be not so straightforward.
In my example, to obtain the desired effect, I used the scsLightbox  jQuery plug-in. This makes easier to interact with page elements.
Here are brief instruction on how to do it:

  1. Download jQuery and the scsLightbox plug-in
  2. Link in your page the jQuery script of the desired version (I tested for this example the 1.4.2 and 1.5.2 releases), the plugin script, and the CSS bundled with the plug-in:
<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. We want to activate the lightbox clicking a link, so we need the link, and the DIV with the content we want to disply in the LightBox; the link will not have a content because it will only be an anchor that we will activate it from JS:
<a id="link-content-div" href="#content-div"></a>
  <div id="content-div" style="display: none;">
    Il contenuto del nostro div.
  </div>
</div>
DIV is initially hidden. Note that the href link’s attribute point to the DIV’s selector: this is the same selector we would use in CSS to style the DIV.
  1. Now, we want to display the content-div in the LightBox and define the JS function we can call to activate the LighBox. To find DOM elements and activate the link we use jQuery:
<script type="text/javascript">
  $(function() {
    $('#link-content-div').scsLightbox();
  });
  function ShowContentDiv() {
    $('#link-content-div').trigger('click');
  }
</script>

This trick is quite simple and useful, because it allows you to display whatever HTML you want in a LightBox.

As an alternative you can try to use FancyBox to do the same work.

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: