I get a LOT of questions from my users about how to use Igloo. Some of these questions are interesting enough to share widely. I'll try and remember to post some of the questions (and hopefully answers!) here.

What are lightboxes?

I covered this in a previous tip. But the basic idea is that you can interact with media on the page -- playing a video or zooming in on an image -- without loading a new page. I used the image below to show what it looks like inside Igloo:

What did I cover last time?

I talked about how lightboxes work in articles (like this one!) ... and how to make them work even when the article is embedded in a page. I also covered how to make videos play in a lightbox in a variety of circumstances.

Is there more that you can do with lightboxes?

YES! Beyond images and videos, you can also open web pages in a lightbox. This allows you to popup things like a map, a wikipedia article, a survey, a forum post, or a bug report form.

How do I do this in Igloo?

Using the HTML widget, or the wiki or blog article, it's pretty simple: Create a link:

then go into the code view 

And change the code for the link slightly. Change it from:

to:

<p>Learn more about <a href="https://en.wikipedia.org/wiki/Igloo" class="lightbox" data-iframe="true" 
data-src="https://en.wikipedia.org/wiki/Igloo">Igloos</a></p>

And then add at the bottom of the article the Javascript:

<script type="text/javascript">
//<![CDATA[
jQuery('.lightbox').lightGallery();
//]]>
</script>

What about widgets like CTA?

But we can do better. What if we can use widgets like CTAs to create lightboxes. It turns out that we can, and we can make it much easier for users than the above instructions.

First, add this to your site somewhere. You can put it in the advanced tab of your page, or in the header for the whole site or the footer for the whole site:

<script type="text/javascript">
//<![CDATA[
jQuery( document ).ready(function() {
    let lb = jQuery(".lightbox a");
    lb.attr("data-iframe", "true").attr("data-src", lb.attr("href")).lightGallery({selector: 'this'});
});
//]]>
</script>

Now, all you have to do is added the class "lightbox" to the CTA widget, and all the links will open in a lightbox!

<p>Learn more about <a href="https://en.wikipedia.org/wiki/Igloo" class="lightbox">Igloos</a></p>