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技能真的有限所以请指导我的解决方案。

jQuery lightGallery动态 - 打开图库以更正图像

0 个答案: