jQuery lightGallery динамический - открыть галерею, чтобы исправить изображение

Использование плагина jQuery lightGallery: http://sachinchoolur.github.io/lightGallery/

Итак, у меня есть следующий код:

JSON (массив):

var gallery_json = '[{"src":"/assets/Images/Gallery-Images/img-1.jpg","thumb":"/assets/Images/Gallery-Images/img-2.jpg"},{"src":"/assets/Images/Gallery-Images/img-3.jpg","thumb":"/assets/Images/Gallery-Images/img-4.jpg"},{"src":"/assets/Images/Gallery-Images/img-5.jpg","thumb":"/assets/Images/Gallery-Images/img-wool-2015-hero-crop-sheep-river.jpg"},{"src":"/assets/Images/Gallery-Images/img-6.jpg","thumb":"/assets/Images/Gallery-Images/img-7.jpg"},{"src":"/assets/Images/Gallery-Images/img-8.jpg","thumb":"/assets/Images/Gallery-Images/img-9.jpg"}]';

JS:

$(document).ready(function () {

    var $gallery = $('[data-hook="gallery"]');


    if ($gallery && typeof gallery_json !== 'undefined') {

        $gallery.on('click', 'img', function () {

            $gallery.lightGallery({
                dynamic:   true,
                dynamicEl: JSON.parse(gallery_json)
            });

            $gallery.data('lightGallery').slide($(this).parent().index());

        });
    }

});

разметка:

<div class="row" data-hook="gallery">

    <div class="col-sm-3">
        <img src="/assets/Images/Gallery-Images/img-1.jpg" class="img-responsive">
    </div>

    <div class="col-sm-3">
        <img src="/assets/Images/Gallery-Images/img-2.jpg" class="img-responsive">
    </div>

    <div class="col-sm-3">
        <img src="/assets/Images/Gallery-Images/img-3.jpg" class="img-responsive">
    </div>

    <div class="col-sm-3">
        <img src="/assets/Images/Gallery-Images/img-4.jpg" class="img-responsive">
    </div>

</div>

Так что в основном то, что я хочу, это то, что изображение в [data-hook="gallery"] выбрана динамическая световая галерея, в которой будет отображаться это изображение в качестве индекса, имейте в виду, что мои навыки JS действительно ограничены, поэтому, пожалуйста, ознакомьтесь с любыми решениями.

0 ответов

Другие вопросы по тегам