jQuery lightGallery dynamic - open gallery to correct image

Question

Using the jQuery lightGallery plugin: http://sachinchoolur.github.io/lightGallery/

So I have the following code:

JSON (array):

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());

        });
    }

});

MarkUp:

<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>

So basically what I am after is whichever image in the [data-hook="gallery"] is selected the dynamic light gallery will load up showing this image as the index, bear in mind my JS skills are really limited so please walk my through any solutions.

jQuery lightGallery dynamic - open gallery to correct image

0 Answers0