Lightbox navigation not visible on videos

CydGoblin commented 7 years ago

When opening a video navigation arrows are not show, so on mobile, when you have a video as part of your gallery is not posible to go to the next or previous item in the gallery. The oficial demo for video gallery is an example http://ashleydw.github.io/lightbox/#videos-gallery

ashleydw commented 7 years ago

https://github.com/ashleydw/lightbox/issues/206 https://github.com/ashleydw/lightbox/issues/102

CydGoblin commented 7 years ago

@ashleydw but with those alternatives still have their problems. Is there really no option where you don't loose control of the videos? Maybe arrow -optional- could be outside .ekko-lightbox-container and inside .modal-body. With css you can absolute position them to look the same as now or relative position to be outside and don't mess with the videos.

ashleydw commented 7 years ago

if you overlay the video with the navigation arrows, how do you interact with the video?

CydGoblin commented 7 years ago

Currently the arrows and their container are inside ekko-lightbox-container. The solutions in the link you shared still have some problem or another.

<div class="modal-body">
    <div class="ekko-lightbox-container" style="height: 315px;">
        <div class="ekko-lightbox-item fade"></div>
        <div class="ekko-lightbox-item fade in show">
            <div class="embed-responsive embed-responsive-16by9">
                <iframe width="560" height="315" src="//www.youtube.com/embed/k6mFF3VmVAs?badge=0&amp;autoplay=1&amp;html5=1" frameborder="0" allowfullscreen="" class="embed-responsive-item"></iframe>
            </div>
        </div>
        <div class="ekko-lightbox-nav-overlay" style="display: none;"><a href="#"><span>❮</span></a><a href="#"><span>❯</span></a>
        </div>
    </div>
</div>

So I moved .ekko-lightbox-nav-overlay from .ekko-lightbox-container to .modal-body as parent and with some css show the arrow down the video so they can be used (instead of using display: none) and you can interact with the video.

<div class="modal-body">
    <div class="ekko-lightbox-container" style="height: 315px;">
        <div class="ekko-lightbox-item fade"></div>
        <div class="ekko-lightbox-item fade in show">
            <div class="embed-responsive embed-responsive-16by9">
                <iframe width="560" height="315" src="//www.youtube.com/embed/k6mFF3VmVAs?badge=0&amp;autoplay=1&amp;html5=1" frameborder="0" allowfullscreen="" class="embed-responsive-item"></iframe>
            </div>
        </div>
    </div>
    <div class="ekko-lightbox-nav-overlay" style="display: none;"><a href="#"><span>❮</span></a><a href="#"><span>❯</span></a>
    </div>
</div>

It could be and option for the plugin arrowsPosition: top | bottom | overlay (like showArrows or alwaysShowClose). But I'm not sure if you think this proposal is a good solution. Hope this explains better my proposal.

tumminelli commented 5 years ago

@Turqueso Thank you for this approach. I managed to move .ekko-lightbox-nav-overlay as a child of .modal-body Could you please provide the CSS to show the arrows underneath the video?

ashleydw / lightbox

Lightbox navigation not visible on videos #237