Purchase

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.

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 );

Ready for the next-gen Lightbox?

Purchase Now!