Search code examples
javascriptphpyoutubethumbnailslightgallery

Light Gallery youtubeThumbSize not working

I'm using LightGallery for youtube videos. I´m trying to change the default thumbnail but it does not work.

In the view I have:

<div class="video-gallery">
    <div id="lightgallery">

        <span class="video" data-src="https://www.youtube.com/watch?v=meBbDqAXago">
            <a href="">
                <img class="img-responsive" src="http://img.youtube.com/vi/meBbDqAXago/0.jpg" style="width: 100%;">
            </a>
        </span>
        <i data-src="https://www.youtube.com/watch?v=Pq9yPrLWMyU"></i>

    </div>
</div>

In the javascript

$('#video-gallery').lightGallery({
    loadYoutubeThumbnail: true,
    youtubeThumbSize: 0,
});

And I have the following scripts and css loaded

{!! HTML::style('css/web/lightgallery.css') !!}
{!! HTML::style('css/web/lg-video.css') !!}

{!! HTML::script('js/web/lightgallery.min.js') !!}
{!! HTML::script('js/web/lg-thumbnail.min.js') !!}
{!! HTML::script('js/web/lg-fullscreen.min.js') !!}
{!! HTML::script('js/web/lg-video.min.js') !!}

It is supposed that youtubeThumbSize is to choose which thumbnail you want to appear inside the gallery. I have tried to use 0 or 2 but always take the 1 which is the default one. How can I use another thumbnail? What is not right?

Solution

  • Solved I have added the hash plugin, since I need to create several galleries of videos in a same page, and in this way it works. These are the changes:

    In the view:

    <div class="video-gallery">
<div id="hash1">

    <span class="video" data-src="https://www.youtube.com/watch?v=meBbDqAXago">
        <a href="">
            <img class="img-responsive" src="http://img.youtube.com/vi/meBbDqAXago/0.jpg" style="width: 100%;">
        </a>
    </span>
    <i data-src="https://www.youtube.com/watch?v=Pq9yPrLWMyU"></i>

</div>

    In the javascript:

    $("#hash1").lightGallery({
    hash: true,
    galleryId: 1,
    loadYoutubeThumbnail: true,
    youtubeThumbSize: 0,
});

    and I've also added plugins of LightGallery:

    {!! HTML::script('js/web/lg-hash.min.js') !!}