Magnific-popup: Using goTo(index) to open correct slide in gallery breaks preloader

[influxweb]

Hi @dimsemenov,

So this issue has been mentioned here [https://github.com/dimsemenov/Magnific-Popup/issues/374], but I have a little different set up that I thought I would share. I have a main main with thumbnails which, when clicked on, switch out the main image. By clicking the main image, magnific is triggered using the following code. What I am try to do is pass the index of the image to the goTo function. Unfortunately, when I do, the preloader breaks. Any insight on how to correct this would be greatly appreciated. I am using version 0.9.9 of the plugin.

Cheers,
Matt

trigger.on('click', function (e) {
    var startAt = $(this).attr('data-index');
    //test
    e.preventDefault();
    if (gallery.length > 0) {
        $.magnificPopup.open({
            callbacks: {
                open: function () {
                    $.magnificPopup.instance.goTo(startAt);
                }
            },
            gallery: {
                enabled: true
            },
            items: gallery,
            type: 'image'
        });
    }
    else {
        $.magnificPopup.open({
            items: {
                src: $('#js-main-image').attr('data-image')
            },
            type: 'image'
        });
    };
});

[influxweb]

Hi Everyone,

So this issue has been bugging me but I think I have a solution. It seems that the preloader is looking for a numeric input. By changing my "startAt" var to the following, everything works as expected.

var startAt = Number($(this).attr('data-index'));

Cheers,
Matt

Here is my completed call:

trigger.on('click', function (e) {
    var startAt = Number($(this).attr('data-index'));

    e.preventDefault();
    if (gallery.length > 0) {
        $.magnificPopup.open({
            callbacks: {
                open: function () {
                    $.magnificPopup.instance.goTo(startAt);
                }
            },
            gallery: {
                enabled: true
            },
            items: gallery,
            type: 'image'
        });
    }
    else {
        $.magnificPopup.open({
            items: {
                src: $('#js-main-image').attr('data-image')
            },
            type: 'image'
        });
    };
});

[dimsemenov]

You may define index option which is specifically designed for such cases. goTo() can not be used directly after open().

e.g.:

$.magnificPopup.open({
    index: parseInt($(this).attr('data-index'), 10),
   ...
});

[influxweb]

Hi Dmitry,

Thank you for the information. I wasn't able to get the index call to work like you mentioned. I tried this code, but it did not return the correct image.

trigger.on('click', function (e) {
    var startAt = parseInt($(this).attr('data-index'), 10);

    e.preventDefault();
    if (gallery.length > 0) {
        $.magnificPopup.open({
            gallery: {
                enabled: true
            },
            index: startAt,
            items: gallery,
            type: 'image'
        });
    }
    else {
        $.magnificPopup.open({
            items: {
                src: $('#js-main-image').attr('data-image')
            },
            type: 'image'
        });
    };
});

I am able to get it to work using either of the following methods. I am thinking the first one may be faster as it doesn't have to access the callbacks. What is your opinion?

Appending the index to the open call

trigger.on('click', function (e) {
    var startAt = Number($(this).attr('data-index'));

    e.preventDefault();
    if (gallery.length > 0) {
        $.magnificPopup.open({
            gallery: {
                enabled: true
            },
            items: gallery,
            type: 'image'
        }, startAt);
    }
    else {
        $.magnificPopup.open({
            items: {
                src: $('#js-main-image').attr('data-image')
            },
            type: 'image'
        });
    };
});

Using a callback

trigger.on('click', function (e) {
    var startAt = Number($(this).attr('data-index'));

    e.preventDefault();
    if (gallery.length > 0) {
        $.magnificPopup.open({
            callbacks: {
                open: function () {
                    $.magnificPopup.instance.goTo(startAt);
                }
            },
            gallery: {
                enabled: true
            },
            items: gallery,
            type: 'image'
        });
    }
    else {
        $.magnificPopup.open({
            items: {
                src: $('#js-main-image').attr('data-image')
            },
            type: 'image'
        });
    };
});

Cheers,
Matt

[centurianii]

@influxweb is right even after so time the code does not work:

$.magnificPopup.open({
      gallery: {
          enabled: true
      },
      items: gallery,
      type: 'image',
      index: parseInt(ndx, 10)
   });

but this works:

$.magnificPopup.open({
      gallery: {
          enabled: true
      },
      items: gallery,
      type: 'image'
   }, ndx*1);

Another thing I noticed is that the code seems to NOT having any memory of it's internal state as I called prior to open:

$parent.find(selector).magnificPopup({
      items: gallery,
      gallery: {
         enabled: true
      },
      type: 'image' // this is default type
   });

to a specific element $parent.find(selector) as described at the docs. I can see the event handler sitting there at $parent.find(selector); why do I have to give again my array of paths gallery when I try to open???

...and here are the errors:

TypeError: item is undefined
at: http://localhost/lib/plugins/magnificPopup/jquery.magnific-popup.js
line: 490 
TypeError: mfp.items[index] is undefined
at: http://localhost/lib/plugins/magnificPopup/jquery.magnific-popup.js
line: 1793