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.