Demos
Plenty of possibilities
Single Image
By default, ModuloBox, will display each image independently in the lightbox.
If no data-rel attribute is specified or you are opening single WordPress image, then only one image will be displayed in the lightbox.
Image Gallery
ModuloBox have the ability to group several media (image, video, iframe, HTML content) in a lightbox in order to create galleries.
A gallery name can be easily specified thanks to data-rel, whatever the position of the media in your document.
If you are using a WordPress Gallery Shortcode, ModuloBox will automatically group all images in a gallery whose name is the gallery ID.
Thumbnails
With ModuloBox you can display thumbnails for your galleries.
Thumbnails are really helpful to navigate trough large galleries with ease.
It supports touch navigation, and a simple click/tap on thumbnail allows to navigate through the gallery.
Thumbnails are fully responsive and can have different sizes per browser width.
By setting a size of 0, it is even possible to hide thumbnails on a specific device width.
Two navigation types are also available for the thumbnails slider: Basic and Centered.
Thanks to the following settings, you will be able to easily test thumbnails behaviour and see how much it is flexible!
* By setting a width and/or a height of 0, no thumbnail will be displayed
Video Gallery
ModuloBox supports Youtube, Vimeo, Wistia, Dailymotion and HTML5 (.mp4, .webm, .ogv) videos.
ModuloBox will automatically recognize the video format. For video streams, you simply need to use the embed link provided on the video service.
Videos can have their own poster. ModuloBox can also automatically fetches video poster from video stream service.
Videos can be automatically played when opening and navigating.
Videos are only loaded when you click on the play buttons and are automatically stopped when navigating through the lightbox.
HTML5 videos (.mp4, .webm, .ogv) can also be played with mediaelement.js player for a better user experience.
Iframe/HTML
With ModuloBox you can display inline content from any kind of HTML markup.
Custom HTML content extends possibilities and can be used as modal to display a form for example.
ModuloBox also handles iframe to display custom url content like a website.
Used with embed services like Google Doc (PDF reader) it really offers advanced possibilities.
URL used in iframe must have a cross-origin authorization in order to be displayed in another website, or must comes from the same origin.
In order to better understand how the previous examples were made, please find below the HTML markup used.
<!-- Google Map - iframe -->
<div class="mobx" data-src="https://www.google.com/maps/embed" data-type="iframe" data-rel="iframe"></div>
<!-- Website Game - iframe -->
<div class="mobx" data-src="https://tanx.io/" data-type="iframe" data-rel="game"></div>
<!-- Newsletter form - HTML -->
<div class="mobx" data-src="#newsletter" data-type="HTML" data-rel="newsletter"></div>
<!-- PDF reader (Google Docs) - iframe -->
<div class="mobx" data-src="https://docs.google.com/gview?url=https://theme-one.com/modulobox/assets/pdf/sample.pdf&embedded=true" data-type="iframe" data-width="960" data-height="1280"></div>
<!-- Wikipedia website - iframe -->
<div class="mobx" data-src="https://www.wikipedia.org/" data-type="iframe"></div>
<!-- HTML container for #newsletter -->
<div id="newsletter" style="display: none">
<!-- your content -->
</div>Mix content
ModuloBox can display image, video, iframe and HTML in a lightbox.
All these media formats can be mixed in a same gallery.
In the following example you will find a gallery composed of images and videos.
Dynamic content
ModuloBox can easily handle content added dynamically in a page or added thanks to the Javascript API with addMedia() method.
It means that you can take into account in your galleries new images appended on the fly in your page.
Mainly oriented for developers, it's possible to re-fetch all media in the document by simply calling getGalleries() method.
It is pretty useful to integrate ModuloBox with gallery/grid plugins or scripts powered with Ajax requests.
Please find below a plain JavaScript code example to add images dynamically in a lightbox gallery.
// AddImages function executed on click
var addImages = function() {
// Prepare empty DOM object
var frag = document.createDocumentFragment();
// Get images to append from current document
var imgs = document.getElementsByClassName( 'my-image' );
// Generate images
for ( var i = 0; i < imgs.length; ++i ) {
// Deep clone each image markup
var img = imgs[i].cloneNode( true );
// Add to fragment
frag.appendChild( img );
}
// Append new images in the gallery
document.getElementById( 'my-gallery' ).appendChild( frag );
// Once new images are appended we need to re-fetch images in the document
// with getGalleries() method from ModuloBox (where mobx is the instance)
mobx.getGalleries();
};
// Add click event to add-image button
document.getElementById( 'add-image' ).addEventListener( 'click', addImages, false );Navigation
ModuloBox handles all navigation types!
You can easily navigate with your fingers, your mouse or even with your keyboard.
You can also scroll to slide items or zoom on image with your mousewheel.
Closing a lightbox can be sometime hard, but with ModuloBox, you can close the lightbox with more than 5 methods!
Pinch the screen, vertically drag, scroll, press escape or click outside a media to close the lightbox. Everything is possible!