CODEWITHSUNDEEP
javascriptjqueryimagedynamiclightgallery
user3693390
user3693390

Reputation: 11

lightGallery in dynamic mode: incorrect image is loading when clicked

When I set up my lightGallery dynamically, and use 'index' to target which image should open when a link is clicked, the wrong image shows up unless it's the very first click.

In other words, if you initially click on a thumbnail image, you'll see the correct larger image being selected in the gallery that pops up. However, if you then close that image, and then click on a different thumbnail image, you will see the wrong image being enlarged (it's grabbing the first one that you had clicked on). I figure that this must be something to do with the 'index' functionality getting stuck after the first click?

I've created a jsfiddle that demonstrates the issue (apologies for all the nested DIVs etc., however I'm confident that those are not the cause): http://jsfiddle.net/fcdeLd03/18/

Anyone have any ideas?

This is my Javascript code to initiate the lightGallery:

$(".nodoubt").on('click', function(){
    var slideID = $(this).attr('data-slide');
    $("#lightgallery").lightGallery({
        download: false,
        dynamic: true,
        dynamicEl: [{
                        "src": 'http://sachinchoolur.github.io/lightGallery/static/img/1.jpg',
                        'thumb': 'http://sachinchoolur.github.io/lightGallery/static/img/thumb-1.jpg',
                        'subHtml': 'Photo 1 by <a href="http://www.example.com" target="_blank">Photographer Name</a><br />More caption text.<br />Even more caption text.'
                    },{
                        "src": 'http://sachinchoolur.github.io/lightGallery/static/img/2.jpg',
                        'thumb': 'http://sachinchoolur.github.io/lightGallery/static/img/thumb-2.jpg',
                        'subHtml': 'Photo 2 by <a href="http://www.example.com" target="_blank">Photographer Name</a><br />More caption text.<br />Even more caption text.'
                    },{
                        "src": 'http://sachinchoolur.github.io/lightGallery/static/img/3.jpg',
                        'thumb': 'http://sachinchoolur.github.io/lightGallery/static/img/thumb-3.jpg',
                        'subHtml': 'Photo 3 by <a href="http://www.example.com" target="_blank">Photographer Name</a><br />More caption text.<br />Even more caption text.'
                    },],
        index : slideID
        });
   });

Upvotes: 0

Views: 2392

Answers (1)

Aivar
Aivar

Reputation: 11

/* for me helped */
<script type="text/javascript">
    $(document).ready(function() {

        $( "#pilt" ).click(function() {
            var lGallery = $(this).lightGallery({
                dynamic: true,
                dynamicEl: [{___data___}]
            });

            /* open gallery on right image */
            /* lightGallery parameter 'index' does not work */
            lGallery.data('lightGallery').index = currentPage; /* page index you want to open */
        })

    });
</script>

Upvotes: 1

Related Questions