Create a single slide show of images and HTML5 videos using lightGallery

Question

I am trying to create a mixed slider of images and HTML5 videos using lightgallery.js.

Images are shown in slider while video does not play. It gives this error:

Oops..fail to load content

Below are the CSS and JS files included in my project.

Anyone please suggest me whether I am missing any JS or CSS files or the way of creating a slideshow is not correct.

JS part:

<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.2.0-beta.4/css/lg-autoplay.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.2.0-beta.4/css/lg-fullscreen.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.2.0-beta.4/css/lg-thumbnail.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.2.0-beta.4/css/lg-video.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.2.0-beta.4/css/lightgallery.min.css"/>


<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.2.0-beta.4/lightgallery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.2.0-beta.4/plugins/autoplay/lg-autoplay.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.2.0-beta.4/plugins/fullscreen/lg-fullscreen.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.2.0-beta.4/plugins/thumbnail/lg-thumbnail.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.2.0-beta.4/plugins/video/lg-video.min.js" ></script>

<script>
    lightGallery(document.getElementById('slideShow'), {
        selector: '.item',
    }); 
</script>

HTML part:

<div id="slideShow">
    <div class="item" data-src="../webroot/1.jpg">
        <img src="../webroot/1.jpg" />
    </div>
    <div class="item" data-src="../webroot/2.jpg">
        <img src="../webroot/2.jpg" />
    </div>
    <div class="item" data-src="../webroot/3.jpg">
        <img src="../webroot/3.jpg" />
    </div>
    <div class="item">
        <a
            data-lg-size="1280-720"
            data-video='{
                "source": [{"src":"../webroot/1.mp4", "type":"video/mp4"}],
                "attributes": {"preload": false, "controls": true}
            }'
            data-poster="../webroot/1.jpg">
            <img
                width="300"
                height="100"
                class="img-responsive"
                src="../webroot/1.jpg"
            />
        </a>
    </div>
</div>

did you try to use the latest stable lightGallery version instead of the beta oder even a lightGallery version prior to the latest stable one to see if it also does not work there? — jasie, Aug 11 '21 at 06:57
did you check the browser console output? are there any errors? I assume the path ("src") to your video is wrong. — jasie, Aug 11 '21 at 06:58
yes i checked and it gives this error lightGallery :- data-src is not provided on slide item 3, this slide is for video, but as per the plugin, data src must not be mentioned for the html5 videos. — Anji, Aug 11 '21 at 07:06
I have tried with the stable css and js but the issue is same — Anji, Aug 11 '21 at 07:06
check this issue on github regarding that very same error: https://github.com/sachinchoolur/lightGallery/issues/1084 does this help? — jasie, Aug 11 '21 at 07:12
I have already checked the link..it is for image not for video — Anji, Aug 11 '21 at 07:15

jasie · Accepted Answer · 2021-08-11T08:51:58.220

I assume, the different nesting depths might cause the problem.
If you check the official Mixed Contents docs, the code should looks like this:

HTML structure:

<div id="gallery-mixed-content-demo">
    <!-- Image -->    
    <a href="img/img1.jpg">
        <img src="img/thumb1.jpg" />
    </a>

    <!-- HTML5 Video --->
    <a
        data-lg-size="1280-720"
        data-video='{"source": [{"src":"/videos/video1.mp4", "type":"video/mp4"}], "attributes": {"preload": false, "controls": true}}'
        data-poster="/images/demo/html5-video-poster.jpg"
        data-sub-html="<h4>'Peck Pocketed' by Kevin Herron | Disney Favorite</h4>"
    >
        <img
            width="300"
            height="100"
            class="img-responsive"
            src="/images/demo/html5-video-poster.jpg"
        />
    </a>
</div>

JavaScript:

lightGallery(document.getElementById('gallery-mixed-content-demo'));

So in your case, the video part should be like:

<div class="item"
     data-lg-size="1280-720"
     data-video='{
        "source": [{"src":"../webroot/1.mp4", "type":"video/mp4"}],
        "attributes": {"preload": false, "controls": true}
     }'
     data-poster="../webroot/1.jpg"
>
    <img width="300"
         height="100"
         class="img-responsive"
         src="../webroot/1.jpg"
    />
</div>

(Without the <a> in between)

UPDATE

Furthermore, you are including multiple lightGallery plugins without activating them like so:

lightGallery(document.getElementById('lightgallery'), {
    plugins: [lgZoom, lgThumbnail],
    ... other settings
});

I tried with your suggestion...in the slider it gets black screen with loading. — Anji, Aug 11 '21 at 08:15
again the question: anything the browser console? same data-src error? — jasie, Aug 11 '21 at 08:22
you included many lg plugins, without activating them on lg init: https://www.lightgalleryjs.com/docs/getting-started/#initialize-lightgallery and https://www.lightgalleryjs.com/docs/getting-started/#plugins — jasie, Aug 11 '21 at 08:31
jasie.. Thanks you so much, it's working now, I activated the plugins. — Anji, Aug 11 '21 at 08:45

Create a single slide show of images and HTML5 videos using lightGallery

1 Answers1