WordPress Documentation

Getting Started

ModuloBox is a modular and responsive lightbox plugin, which allows you to create slideshow of images, videos, HTML content and iFrame in a popup.

It is compatible with common web image formats (.jpg, .jpeg, .png, .bmp, .gif, .tif, .tiff, .jfi, .jfif, .exif, .svg), HTML5 videos (.mp4, .webm, .ogv), iframe videos (Youtube, Vimeo, Dailymotion, Wistia), HTML content and iframe.

ModuloBox is compatible with Google Chrome, Safari, FireFox, Opera, Edge, IE11 and IE10.

Requirements

To run the ModuloBox plugin you must have at minium:

• WordPress v4.5.0
• PHP v5.3.0

ModuloBox plugin is also fully compatible with PHP v7.x
You can check you PHP version in ModuloBox panel under System Status tab:

Installation

After purchasing ModuloBox on CodeCanyon, you will have to download the installable plugin .zip file on CodeCanyon under download section.

Install with WordPress

Here are the following steps to install ModuloBox plugin using the built-in plugin installer of WordPress:

1. In your WordPress Admin Dashboard, go to Plugins > Add New.
2. Upload modulobox.zip plugin file previously downloaded on CodeCanyon
3. Click on install Now
4. If successful, click Activate Plugin to activate it, or Return to Plugin Installer for further actions.

Install by FTP/SFTP

You can also install ModuloBox via FTP/SFTP:

1. Extract the .zip file you downloaded from CodeCanyon.
2. Upload the ModuloBox folder, previously extracted, to your wp-content/plugins directory.
3. In your WordPress Admin Dashboard, go to Plugins.
4. Under ModuloBox, click Activate

That's it! MobuloBox should now be installed and activated on your WordPress install.

Update

ModuloBox comes with an automatic update functionality.
To automatically update ModuloBox and check for new available version you must register the plugin.
Once you have registered ModuloBox, you will be able to check for new update and to update the plugin with one click under Updates/Support tab in ModuloBox admin panel.

If you encounter some issues to register ModuloBox, you can still update manually by following these steps:

1. Deactivate the current plugin version installed on your WordPress Install
2. Remove this old plugin version
3. Upload the new plugin version (please look at the installation section)

N.B.:No data will will be lost when deleting ModuloBox. All your settings will be preserved.

Registration

In order to benefit of automatic updates in your admin dashboard, you must register ModuloBox.
The registration system is made thanks to Envato API (full OAuth authentication flow).
No personal data are retrieved or stored by ModuloBox plugin when registering.

1. Click Generate A Personal Token to be directed to the Token Creation page
2. Enter a name in the "Token Name" field (for example: ModuloBox)
3. Check the "Terms and Conditions" checkbox, then click "Create Token"
4. Copy your generated Personal Token, select confirm checkbox and click "Woohoo Got It"
5. Enter your Personal Token in the registration field and click "Register Modulobox"

Settings

ModuloBox comes with plenty of options which allow to easily customize the lightbox.
ModuloBox works with the native WordPress Gallery Shortcode and single images added from Add Media button (WordPress media library).
It is also compatible with several gallery plugins:

• Woocommerce Product Galleries
• The Grid plugin
• JetPack plugin
• NextGen plugin
• Envira plugin
• Justified Image Grid plugin

Setup a Gallery

ModuloBox comes with it's own gallery which allows to replace the default WordPress Gallery Shortcode.

You can enable ModuloBox Gallery under Gallery tab in ModuloBox settings panel.
When enabled, ModuloBox will replace all WordPress Gallery shortcodes by it's own custom shortcode.
You will find in this panel, several options to globally set the Gallery behaviour.

Each WordPress Gallery Shortcode can be set as usual from the WordPress media uploader.
You will be able to set for each gallery shortcode a row height and item spacing.
In order to open images in ModuloBox, you must set Link To to Media File as usual in WordPress Gallery shortcode.

Custom Selector

ModuloBox have the ability to open the ligthbox from any Query Selector.

You can enter in Custom Query Selector field any CSS selector, like class name(s), ID(s) or attribute(s) in order to open the matching element(s) from your document with ModuloBox.

Caption

ModuloBox can display under any media opened in the lightbox a caption composed of a title and sub-title.
Depending of the gallery type used with ModuloBox (WordPress Gallery, The Grid, NextGen, JetPack, etc...), the content display inside the caption can vary.

When opening images from the native WordPress gallery, the content displayed inside the caption will be retrieved from the title attribute or alt attribute if title is missing. And the sub-title will correspond to the caption set for each media in your gallery.

When using ModuloBox Gallery, the title will be retrieved from the title field. And the sub-title will correspond to the description set for each media in your gallery.

For all other Gallery plugin compatible with ModuloBox, the native Gallery principle will be preserved regarding the caption display in the lightbox.

Thumbnails

ModuloBox have the ability to display thumbnails in a gallery. If the gallery have more than one item and items have a thumbnail then ModuloBox will display them if enabled.
You can activate and set the thumbnails behaviour in ModuloBox admin panel under Thumbnails tab.

You can also hide the thumbnails depending of a browser width.
If you set a width and/or an height of 0 the thumbnails will be hidden for the related browser width:

Social Sharing

Each media opened in ModuloBox can be shared with several social media.
To enable the social sharing feature, you need at first to drag & drop the social button in the controls under Controls tab in ModuloBox admin panel.
You can set the social sharing buttons under Social Sharing tab:

Social sharing buttons will be ordered from the order created in ModuloBox admin panel.
When sharing a media in the lightbox, a deeplink is shared (by default). This shared url allows to automatically open the ligthbox to show the media shared.
You also have the possibility to share the Page URL or the Media URL.

N.B.: If you are using ModuloBox with a gallery which appends dynamically items in your page, Deep Link may not work.
The media must be present in the page in order to be opened in the lightbox. So, if a media is not present on page load, it will not work.
If your content is also updated, then it can open the wrong media because the Deep Link is based on the media index in the gallery.
In these cases, it's better to use as shared URL Page URL or Media URL instead of Deep Link.
These issues are not related to ModuloBox but to the current technology limitations.

Videos

ModuloBox is compatblie with HTML5 videos (.mp4, .webm, .ogv) and embed videos (Youtube, Vimeo, Dailymotion, Wistia).
When ModuloBox Gallery Shortcode is enabled, you can easily attached a video url to any image in a gallery or single WordPress shortcode.
You need to edit an image in order to attach to it a video URL:

To display an embed video from a video stream service, you need to get the embed video URL from the video stream service.
Here you will find URL structure examples from several video streams:

1. Youtubehttps://youtu.be/CemceZL2UGg
2. Vimeohttps://vimeo.com/87701971
3. Dailymotionhttps://dai.ly/x4uaavx
4. Wistiahttps://fast.wistia.net/embed/iframe/h17g1pk8dm

iframes

To open an iframe in ModuloBox, you need to use the following HTML markup in your page (to add in the WYSIWYG editor in text mode):

<a class="mobx" href="https://www.google.com/maps/embed" data-type="iframe" data-width="800" data-height="600" data-title="My title 1" data-desc="My description 1" data-rel="gallery-name">
    <img width="80" height="80" src="thumbnail.jpg">
</a>

Attributes

1. data-relGallery Name. Allow to group media into one gallery from a name relation.
2. data-srcurl/src or #ID (for HTML content) of the media.
3. data-typeContent type of the media (image, video, iframe, HTML).
4. data-titleTitle of the media.
5. data-descDescription of the media.
6. data-thumbThumbnail url of the media.
7. data-widthFor HTML/iframe types, max width of the content.
8. data-heightFor HTML/iframe types, max height of the content.

HTML Content

To open HTML content in ModuloBox, you need to use the following HTML markup in your page (to add in the WYSIWYG editor in text mode):

<a class="mobx" href="#content" data-type="HTML" data-width="500" data-height="500" data-title="My title 1" data-desc="My description 1" data-rel="gallery-name">
    <img width="80" height="80" src="thumbnail.jpg">
</a>

<!-- HTML container for #content -->
<div id="content" style="display: none">
    <div>This is an example of HTML content</div> 
</div>

The href attribute must target an ID of your HTML content present in your page in order to make it work.

The attributes recognized by ModuloBox are the same as for iframe content.

Filter Hooks

ModuloBox comes with several filter hooks in order to extend or modify the core behaviour of PHP snippets.
These filter hooks are applied after wp action hook in order to easily retrieve the currently-queried object (to get a post/page ID for example).

modulobox_settings Parameter: (array) $settings | Since: v1.0.0

Filters ModuloBox settings.

Usage Example:

add_filter( 'modulobox_settings', 'modulobox_custom_settings' );
				
function modulobox_custom_settings( $settings ) {

    // If the post/page ID is 10
    if ( get_queried_object_id() === 10 ) {
        $settings['options']['thumbnails'] = false;
    }

    return $settings;

}

modulobox_before_custom_js Parameter: (string) $js | Since: v1.0.0

Filters custom JavaScript before instantiation of ModuloBox.

Usage Example:

add_filter( 'modulobox_before_custom_js', 'modulobox_before_custom_js' );
				
function modulobox_before_custom_js( $js ) {

    return $js . "alert( 'custom JS before' );";

}

modulobox_after_custom_js Parameter: (string) $js | Since: v1.0.0

Filters custom JavaScript before initialization (after instantiation) of ModuloBox instance.

Usage Example:

add_filter( 'modulobox_after_custom_js', 'modulobox_after_custom_js' );
				
function modulobox_after_custom_js( $js ) {

    return $js . "alert( 'custom JS after' );";

}

modulobox_custom_css Parameter: (string) $css | Since: v1.0.0

Filters ModuloBox custom css.

Usage Example:

add_filter( 'modulobox_custom_css', 'modulobox_custom_css' );
				
function modulobox_custom_css( $css ) {

    // Override play control button color (svg fill)
    return $css . 'button.mobx-play svg { fill: red }';

}

modulobox_svg_icons_url Parameter: (string) $url | Since: v1.0.0

Filters ModuloBox icons url .svg file.

Usage Example:

add_filter( 'modulobox_svg_icons_url', 'modulobox_custom_svg_icons_url' );
				
function modulobox_custom_svg_icons_url( $url ) {

    return '/custom-url/my-svg-icons.svg';

}

modulobox_media_query_max_width Parameter: (number) $width | Since: v1.0.0

Filters the media query width value used for the css font properties.

Usage Example:

add_filter( 'modulobox_media_query_max_width', 'modulobox_custom_width' );
				
function modulobox_custom_width( $width ) {

    switch ( $width ) {
        // Default Desktop width
        case -1:
            $width = 1920;
            break;
        // Default Tablet width
        case 1024:
            $width = 1280;
            break;
        // Default Mobile width
        case 480:
            $width = 680;
            break;
    }

    return $width;

}

modulobox_gallery_before_item_content Parameters: (string) $content, (object) $post, (array) $atts (Shortcode attributes) | Since: v1.0.0

Allows to add custom content before item gallery content.

Usage Example:

add_filter( 'modulobox_gallery_before_item_content', 'modulobox_gallery_before_item_content', 10, 3 );
				
function modulobox_gallery_before_item_content( $content, $post, $atts ) {

    // Add the attachment title in ModuloBox Gallery items
    return $content . '<h2>' . esc_html( $post->post_title ) . '</h2>';

}

modulobox_gallery_after_item_content Parameters: (string) $content, (object) $post, (array) $atts (Shortcode attributes) | Since: v1.0.0

Allows to add custom content after item gallery content.

Usage Example:

add_filter( 'modulobox_gallery_after_item_content', 'modulobox_gallery_after_item_content', 10, 3 );
				
function modulobox_gallery_after_item_content( $content, $post, $atts ) {

    // Add the attachment author in ModuloBox Gallery items
    return $content . '<span>' . esc_html( get_the_author_meta( 'nicename', $post->post_author ) ) . '</span>';

}

modulobox_gallery_link_attributes Parameters: (array) $attr, (object) $post, (array) $atts (Shortcode attributes) | Since: v1.0.0

Filters Gallery item link attributes.

Usage Example:

add_filter( 'modulobox_gallery_link_attributes', 'modulobox_gallery_link_attributes', 10, 3 );
				
function modulobox_gallery_link_attributes( $attr, $post, $atts ) {

    $attr['data-title'] = 'My title';
	
    return $attr;

}

modulobox_gallery_video_icon Parameter: (string) $icon | Since: v1.0.0

Filters Gallery video icon.

Usage Example:

add_filter( 'modulobox_gallery_video_icon', 'modulobox_gallery_custom_video_icon' );
				
function modulobox_gallery_custom_video_icon( $icon ) {

    return '<i class="my-icon"></i>';

}