Docs

[fatheaddrummer]

Hello Awesome support Team 🙂
I have 2 Questions:

1. My Video Lightbox is working normal here: https://www.diamond-precision-studio.com/en/mixing-drums-course/

but going fullscreen here: and on all other pages:
https://www.diamond-precision-studio.com/en/online-drumming/

I always have duplicated the lightbox, so I don’t understand why it’s behaving differently….I am using visual composer. Could you tell me, what I am doing wrong (please be very detailed, if you give me any directions :-D)

2. Can we move the lightbox buttons (close, ect…) from the left top the right top? For the moment the buttons are hidden by superfly menu…

Thank you very very much!

Best, Christian

[Paul R]

Hi Christian,

Thanks for writing in!

1. Please remove the dot in the class field of your image element.

http://screencast.com/t/zSCfmrp9Uin

2. You can add this under Custom > Edit Global CSS in the Customizer.

.ilightbox-toolbar.light {
    left:auto;
    right: 20px;
    top:20px
}

Hope that helps

[fatheaddrummer]

Hello Paul,

Haha, that was a good hint, thank you very much!! 🙂

But still the lightbox is behaving differently. Now it’s fullwidth…further I find it a little bit confusing that the lightbox is shown like a slideshow (which is cool), but I am not able to click on videos to the left or right (see screenshot): https://www.dropbox.com/s/t2tqk1a6yu37t40/Bildschirmfoto%202016-10-14%20um%2010.33.01.png?dl=0

realted url: https://www.diamond-precision-studio.com/en/online-drumming/

What am I doing wrong?

Thank you sooo much!

Best, Christian

[Paul R]

Hi Christian,

Please use image shortcode instead of image element.

The reason for this is that you need to add lightbox_video=”true” to prevent it from going full screen.

eg. You can add this in a text element.

[image class="videoLightboxDrumming" src="https://www.diamond-precision-studio.com/wp-content/uploads/2016/10/Mixing-drums-course-introduction.jpg" link="true" href="https://www.youtube.com/embed/BUa3NKCzpuk" lightbox_video="true"]
[lightbox selector=".videoLightboxDrumming"]

Hope that helps.

[fatheaddrummer]

Hello Paul,

Uff, that’s a lot of work, replacing about 50 image elements with text files…
Is there another way, adding this in global css or something?

Thank you so much!! 🙂

Best, Christian

[Paul R]

Hi Christian,

You can try adding this in your Custom > Edit Global Javascript in the customizer.

jQuery(function($) {  
    var dataoptions = $('.videoLightboxDrumming').attr('data-options');
    $('.videoLightboxDrumming').attr('data-options',dataoptions + ', width: 1080, height: 608');
});

Make sure you have added videoLightboxDrumming in class field of every image.

Thanks

Hope that helps.

[fatheaddrummer]

Hi Paul,

That didn’t help unfortunately 🙁
Do you have any other ideas?

Thank you very much!

Best, Christian

[Paul R]

Hi Christian,

I am sorry but you need to do it manually as previously instructed.

Though I will forward this to our web development team for review.

The image element should have had this option.

Thanks

[Author]

Posts