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.

Un pensiero su “HOWTO: JS triggered link showing a DIV with LightBox

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...