Problem with displaying images and videos in a lightbox gallery

Currently, I am encountering an issue with the lightbox feature on my website. When trying to play a video, there seems to be a layer (div tag) blocking it, preventing me from playing or stopping the video. This problem occurs when clicking on an image first. However, if you click on the video initially, it works fine. For a full demonstration, click on "Full page". 

$(document).on('click', '[data-toggle="lightbox"]', function(event) {
            event.preventDefault();
            $(this).ekkoLightbox();
        });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css" rel="stylesheet"/>
<div class="row">
<a href="https://www.sample-videos.com/img/Sample-png-image-100kb.png" data-toggle="lightbox" data-gallery="gallery_0" class="col-6 form-group w-100">
<img src="https://www.sample-videos.com/img/Sample-png-image-100kb.png" class="img-fluid w-100 h-100">
</a>
<a href="https://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" data-toggle="lightbox" data-gallery="gallery_0" class="col-6 form-group w-100">
<video width="320" height="240" autoplay="autoplay">
<source src="https://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</a>
</div>

javascriptjquerycsslightbox

Answer №1

There seems to be a minor CSS issue, but hopefully it will function correctly for you.

$(document).on('click', '[data-toggle="lightbox"]', function(event) {
            event.preventDefault();
            $(this).ekkoLightbox();
        });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css" rel="stylesheet"/>
<style>
.ekko-lightbox-container > div.ekko-lightbox-item.show {
    z-index: 001;
}
</style>
<div class="row">
<a href="https://www.example.com/image.png" data-toggle="lightbox" data-gallery="gallery_0" class="col-6 form-group w-100">
<img src="https://www.example.com/image.png" class="img-fluid w-100 h-100">
</a>
<a href="https://www.example.com/video.mp4" data-toggle="lightbox" data-gallery="gallery_0" class="col-6 form-group w-100">
<video width="320" height="240" autoplay="autoplay">
<source src="https://www.example.com/video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</a>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be the reason behind the failure of this :after element?

I am facing an issue with the preloader on my webpage where the animation is not displaying as expected. The animation should appear on top of a dark black background before the page fully loads, but it seems to be missing. The CSS for the animation works ...

javascriptjqueryhtmlcss

Tips on locating information within a pre-existing GET array with parameters provided

Apologies for the unclear title. I am currently utilizing a category chooser that pulls categories from an API. The process involves fetching a list of categories, filtering out their names, and presenting them in the category chooser. Upon clicking submit ...

javascriptjqueryarraysjsonapi

Tips for choosing a codemirror instance in vue

How can I select one of multiple codemirror instances when I have tried var basicEditor = VueCodemirror.CodeMirror($('#basic').get(0)); without success? Below is the code snippet in question: Vue.use(window.VueCodemirror); Vue.component(' ...

jqueryvue.jscodemirror

Loading views and controllers on-the-fly in AngularJS

A new configuration tool is under development using Angular.JS. The user interface consists of two main sections: a left panel with a tree view listing all the configuration items and a right panel displaying screens for editing these items. There are appr ...

javascriptangularjscontroller

Retrieve the information from the recently completed request

When the user inputs 'id' into the text field, I want to fetch a post based on the specific id entered by the user. If no id is provided, I would like to fetch the entire array of posts and then retrieve an id from the fetched data for testing pu ...

javascriptreactjsasync-awaitreact-hooks

Most effective method for sending information from an HTTP server to a browser client

What is the most effective method for transferring data from the server side to the client when the client is a web browser? The server side is developed in Java, while the client side uses HTML, JavaScript, and AJAX. The communication protocol being uti ...

javajavascriptajaxpush-notification

Failure of Angular to execute HTTP calls asynchronously

I am feeling a bit perplexed about how and when to use the .then and/or .success functions. Here is a function example: $scope.handleData = function(option){ if(option == 1){ link = firstLink/; }else{ link = secondLink/; } ...

javascriptangularjs

Encountering Internal Server Error when running Node-Express app on render.com with query parameters live

Currently, I am facing an issue while attempting to execute a live route with query using my nodejs express application on render.com. Strangely, all other routes connected to the crud operations are functioning properly except for the search filter route ...

javascriptnode.jsexpressrender.com

Connect the front end files, including HTML, CSS, and JavaScript, to the Node.js backend

I'm a beginner in web development and recently completed an online course on node.js and express. However, the course didn't cover how to add HTML, CSS, and JS files when using Node. I attempted the following: var express = require('expres ...

javascripthtmlcssnode.jsexpress

Performing String formatting in JavaScript using an array

I've been utilizing the stringformat library to format strings in my node.js applications. var stringFormat = require('stringformat'); stringFormat.extendString(); In my current project, I'm attempting to pass an array of parameters a ...

javascriptarraysnode.jsstring-formatting

Pedestrian crossing Cordova experiences delayed response despite ontouchstart attempts to fix it

I have been experiencing a delay issue when using a CSS button with the ":active" pseudo-class on my phone. Every time I click the buttons, there is a noticeable delay before entering the active phase. Here is my CSS code: .btn {...} .btn:active{...} To ...

androidjquerycsscordovacrosswalk-runtime

Displaying a div in Vue.js when a button is clicked and an array is filled with

Hey there! I'm having an issue with displaying weather information for a specific location. I want to show the weather details in a div only when a button is clicked. Despite successfully fetching data from the API, I'm struggling to hide the wea ...

javascripthtmlvue.jsvuejs2openweathermap

There seems to be a problem with the output when trying to display the message "You said ${reply}"

In the following code snippet, vanilla.js is being used with ATOM as the text editor and running on nodejs via terminal: 'use strict'; const Readline = require('readline'); const rl = Readline.createInterface({ input:process.stdin, ...

javascriptnode.jsterminal

Extract and loop through JSON data containing various headers

Having no issues iterating through a simple JSON loop, however, the API I am currently utilizing returns a response with multiple headers. Despite my efforts in various methods to access the results objects, I still face some challenges. The response struc ...

javascriptjqueryjson

Is it possible to check the response headers in Express JS?

To view the incoming request headers, I typically use: req.headers. I am looking to see a comprehensive list of all headers that will be included in the response. Currently, res.headers returns undefined. I understand that I can set response headers usi ...

javascriptexpress

What is the reason behind the lack of asynchronous functionality in the mongoose find method

Outdated code utilizing promises I have some legacy code implemented with mongoose that retrieves data from the database. The schema being accessed is AccountViewPermission. Everything works fine as I am using a .then, which essentially turns it into a Pr ...

javascriptnode.jsmongooseasync-await

How to retrieve controller property from a different Class in AngularJS

While working with AngularJS today, I came across an issue that I need help resolving. Here is the code snippet in question: app.controller("SomeController", function(){ this.foo = true this.changeFoo = function(bool){ ...

javascriptangularjs

Connect jQuery's resizable controls

Check out this jSFiddle. I am attempting to add event handlers for resizing $('oWrapper_'+num). However, the resizing does not occur. This is because $('#oWrapper_'+num) has not been added to the dom at the time of execution, so the se ...

javascriptjqueryhtmlcssjquery-ui

What could be the reason for the CORS failure when making requests from an HTTPS domain to an HTTP localhost

I have a secure rest service (implemented as an Azure Function), hosted on HTTPS, under domain A. My website is also running securely on HTTPS but on domain B. I've set the CORS to use a wildcard *. Using jQuery on my website, I send Ajax requests ...

javascriptajaxrestcorsazure-functions

Should one consider building a web application by relying on browser AJAX requests a sound practice?

When developing a standard MVC web application, is it acceptable to rely heavily on ajax calls for rendering content? For instance, looking at Facebook as an example, they dynamically load a majority of their content. Should we emulate this strategy? What ...

javascriptajaxnode.jsrestmodel-view-controller