Lightbox Video Integrity Pro

[eeandtee]

Hi,

How do I create a lightbox video with a clickable image thumbnail. Basically like the classic X responsive video shortcode?

Thank you.

[tristup]

Hi @eeandtee,

Thanks for reaching out.
To show the video in the lightbox, you can use the Content Area Modal element. You need to create a Global Blocks with the Video element and use that in your Modal content area.
The following links will help you to create the Modal and the Global Blocks.

1. https://theme.co/docs/content-area-modal
2. https://theme.co/docs/global-blocks)
3. https://theme.co/docs/global-blocks#how-to-use-a-global-block

Hope it helps.
Thanks

[eeandtee]

Thank you - would this allow me to use an image as the trigger for the modal area?

[eeandtee]

The modal content area toggle seems to be fixed to the size of “hamburger” and I need it to be a 1/4 width responsive square with an image. Is this possible? Thank you.

[prakash_s]

Hi @eeandtee,

To add an image instead of hamburger follow the following steps.

1. Go to Content area modal -> Toggle.
2. Then off the Text Setup.
3. Then on the Graphic Setup and choose the image icon.
4. Then add the image at Primary Graphic Image option.
   
   

Hope it helps.
Thanks

[eeandtee]

Thank you. This is what I tried earlier and it is not what I am looking to do. I want a responsive thumbnail image to trigger the modal content area - not a small hamburger sized toggle. How do I do this?

[tristup]

Hi @eeandtee,

Toggle Hash is one option to add a custom hash to the toggle section of the Content Area element. Whatever you add here will be added as the value of data-x-toggle-hash HTML attribute. You can use this as a base point for your Javascript custom code.
As explained, you can use the data-toggle-hash attribute to locate the selector while triggering inside any custom JavaScript code.
The Toggle Hash is still not a good option for now as it can only activate the modal once, you can get more info here: Toggling a Content Area Modal from another button
You can also use the following code to trigger the modal on the button click. Here open-modal-button is the class assigned to the image and the assigned id of the modal my-content-area-1.
Remember that, the anchor-toggle suffix will be added to the given id of Content Modal Area

jQuery( function($){

jQuery('.open-modal-button').click( function(e){
    e.preventDefault();
    jQuery('#my-content-area-1-anchor-toggle')[0].click();
});

});

You can get more help on this thread: Content Area Modal open on click

Remember that the suggestion in the above-mentioned thread and the custom code will work if copied as it is and doesn’t conflict with any existing code.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

[eeandtee]

Okay thank you for your help. This is not at all the route I want to go with this.

Is there a way to layer a modal toggle on top of an image? Like an overlay?

Alternatively, is there a plugin you can recommend that is compatible with X Pro to achieve this result?

[tristup]

Hi @eeandtee,

The Essential Grid, the plugin can be used to achieve what you are expecting. Please find the video explaining the settings.

https://www.awesomescreenshot.com/video/1683390?key=9ff81d77fe5bdfa4b9eb7bef16b8d04b

Hope it helps.
Thanks

[eeandtee]

Nice! Okay - this might be what I need. I will give it a try later. Thank you!

[marc_a]

Hi @eeandtee,

You’re welcome and it’s our pleasure to help you. If you have any other concerns, feel free to reach us.

Thank you.