javascript - jQuery lightGallery dynamic - ギャラリーを開いて画像を修正する

Question

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 スキルは本当に限られているので、解決策を教えてください。