Apply Lightbox to VC Single Image Element

The built-in lightbox that comes with this plugin can by default only be used with the elements that are specifically designed around it. The lightbox can not be automatically applied to image elements coming from Visual Composer itself (or other add-ons). As for the standard single image element that is native to Visual Composer, you can retroactively apply the lightbox with some custom JS code, provided you set the single image element to link to the large image version:

// Process Once Page is Ready
jQuery(document).ready(function () {
    jQuery('.wpb_single_image').find('a').each( function() {
        jQuery(this).attr("data-effect", "simpleFade").attr("data-thumbs", "bottom").attr("rel", "imagegroup1");
    });
});

// Process Once Page is Fully Loaded
jQuery(window).load(function(){
    if (typeof jQuery.fn.nchlightbox !== "undefined") {
        jQuery('.wpb_single_image').find('a').off().nchlightbox();
    };
});

The first part of that code will parse all single image elements on the page and apply a transition effect and a group name to all those images.

The second part will then attempt to remove any prior lightbox scripts from the images and apply the new lightbox instead.

In order to ensure that the lightbox script itself is actually present, you should also enable the option “Load Lightbox On All Pages” in the plugin settings page (tab “External Files”). That will tell the plugin to ALWAYS load the lightbox script, even if no element from this plugin has been detected on the page.

This is an “out-of-the-box” usage of our built-in lightbox solution and therefore neither guaranteed to work, or supported by us. Whenever possible, please use the dedicated image elements from this add-on, which are specifically designed to work with the lightbox script.