Ben's tips: Playing with lightboxes in Igloo. (pages and videos)
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.
Lightboxes
A lightbox is an in-page viewer for media. The typical interaction is to click on an image or button, the screen fades dark, and the image is displayed larger in a box. Often you can use arrow keys or next/previous buttons to see the next image. Here's an example:
The example image above should appear in a lightbox when you click on it!
So we know that Igloo supports lightboxes.
And we know it works on Discussion posts.
But does it work in Wiki articles? Yes!
But it doesn't work on Pages. So if you use a Wiki article widget on a page, suddenly you can't click on the image to zoom it. And it doesn't work in HTML widgets either.
The solution is to add the class "js-media-gallery" to the widget's appearance tab or the layout block. Like this:
Lightbox Videos
Neat! So now pages can support image lightboxes. But what about more complex inline examples? Users like lightboxes because they allow you to view information without going to a new page. (And some users hate them for that same reason.)
How do we get lightboxes for videos? It turns out that the lightbox library that Igloo is using is called LightGallery and it supports a wide array of media types. With some clever HTML (and dallop of Javascript to turn it on) you can embed videos!
Video services
If the video you want to embed comes from YouTube, Vimeo, DailyMotion or VK, you just need to switch to the source view and enter:
<div id="videoholder1"> <p><a href="https://vimeo.com/1084537"><img src="https://sachinchoolur.github.io/lightGallery/static/img/thumb-v-y-1.jpg" class="fr-fic fr-dii"></a></p> </div> <script>jQuery('#videoholder1 p').lightGallery(); </script>
The vimeo link should be replaced by the URL to the video you want. The jpg should be the image you want users to click on to open the video. The "videoholder1" can be left alone, but needs to be unique to the page. If you have more than one section with videos, you need to come up with a different name.
Locally hosted videos
If the video is locally hosted, this is also possible. To get the link, go to the folder channel with the video link and right-click on the download button. Then select "Copy Link Location" and paste the video link as above.
I haven't tested this, so it's possible there are further complications. Let me know if you encounter problems.
Videos from other services (needs an embed code)
If you have an embed code from a video service -- we use Kaltura -- you can still embed it in a lightbox using the iframe method.
<div> <p> <button class="btn btn-success btn-lg mrb50" data-iframe="true" data-src="EMBED URL" id="player"><img src="COVER IMAGE URL" class="fr-fic fr-dii" width="768" height="432"></button> </p> <script type="text/javascript"> jQuery('#player').lightGallery({selector: 'this', iframeMaxWidth: '768', iframeMaxHeight: '432'}); </script> </div>
Typically, embed codes look complicated, but have a URL in them. Take that URL out, and insert it into the code above replacing EMBED URL. You'll need to find an image you want users to click on and replace the COVER IMAGE URL as well. Look in the embed code for the player size. Replace the red height and width values above. (And the green player can be left alone unless you have multiple videos on the page. The name needs to be unique as above.
I hope this helps someone!
12 Replies
Benjamin Kahn - I have NO words for how incredible this is. This is a hall of fame post if I've ever seen one.
THANK YOU!
Tom Ryan I'm so glad it's helpful!
This is awesome! Benjamin Kahn, thank you for sharing your wisdom.
Laurisa Titterud - I think you were asking about this before..Very comprehensive breakdown here.
Thank you Benjamin Kahn for spreading this gold!
Great stuff Benjamin Kahn !
Thank you for sharing! It's a game changer!
Thanks Benjamin! I'll begin using this immediately. Out of curiosity, is there a way to use lightboxes but also an accordion so the HTML widget is still collapsible and expandable?
Hi Jake Wilson,
Yes, this should work fine. The main things to remember are:
You can even do more advanced accordions, like include icons in the title by adding more classes. For example, try out: js-media-gallery graphical icon-fa-twitter icon-fa-pencil
Which should give:
Benjamin Kahn Thank you!
Benjamin Kahn Are there other examples of the icons that can be used other than the twitter and pencil? I love the lightbox for images!
Rob Howell YES! There are hundreds of icons you can use. Check out the list (and icon search engine) here: https://fontawesome.com/v4.7/icons/
For example, I used the search engine to find icons for "warning" and got this:
The first image looks good, so I click on it to get here: https://fontawesome.com/v4.7/icon/exclamation-triangle
The class I want to add it: icon-fa-exclamation-triangle