- Join Now
Ben's tips: Playing with lightboxes in Igloo. (pages and videos)
5 weeks ago
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.
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:
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.)
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.
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!
- 159 views
- 73 previews
- 1 version
- 10 replies
- 8 followers
- Posted By:
- Benjamin Kahn
- December 16, 2020
About this forum
- 11,412 views
- 176 topics
- 3476 followers
Viewed 159 times