Gallery images skipped in iOS

[thehappybit]

Hi,

we've been noticing a weird behavior on iOS. If I have, say, 8 images in a gallery, they load correctly on desktop, and clicking on the navigation arrows indeed makes the gallery go to the next or prev image.

On iOS though, clicking on the "next" arrow, makes the gallery skip from the 1st image to the 3rd; clicking on the image (navigateByImgClick: true) works correctly, so does the API method .next().

[mjcampagna]

Are you using your own buttons with on("click")? If so, then you need to
first uncouple the click event before firing the subsequent event, using
.off("click").on("click").

[thehappybit]

No we're using the default ones, but we might switch to our own in order to make things work as intended. Still probably needs fixing though.

[mjcampagna]

Strange. I've not had a problem using Magnific on iOS. If you posted a link
to you implementation, it might be helpful.

[thehappybit]

A'ight so the page that's having the problem would be this one: http://thbthemes.com/demo/one/works/work-2/

Given a target element, this is the implementation (ie. which options we're passing to Magnific Popup):

delegate: "a[href$=jpg], a[href$=png], a[href$=gif], a[href$=jpeg], a.mfp-iframe",
gallery:{
    enabled:true
}

[thehappybit]

We've made a few tests about this issue, and the only explanation that we've been able to find is that clicking on the next/prev arrows actually fires twice, one time on the "click" event, and then another on the "mfpFastClick" event.

For now we could solve this by adding a new callback function on open:

open: function() {
    var supportsFastClick = Boolean( $.fn.mfpFastClick ),
        evt = supportsFastClick ? "mfpFastClick" : "click",
        mfp = this;

    $( ".mfp-arrow" ).off( "click" );
    $( ".mfp-arrow" ).off( "mfpFastClick" );

    $( ".mfp-arrow-left" ).on( evt, function() {
        mfp.prev();
        return false;
    } );
    $( ".mfp-arrow-right" ).on( evt, function() {
        mfp.next();
        return false;
    } );
}

[purplespider]

I'm seeing this issue too. What's the recommended fix?

[dcooney]

Having the same issue here... I thought it was a double click event or something so I turned off navigateByImgClick but that didn't solve the issue.

Any ideas?

[scottshefler]

Still having this issue as well, any updates on a fix?

[sarahsehr]

Also having this issue on iOS only. Is there any update on this issue?

[vesrah]

I'm also curious if there is a fix or hack for making this work properly.

[despecial]

Same problem here. A fix would be awesome!

[RickMarkus]

Confirmed unexpected behavior in our build as well.

[Emirii]

This issue is still alive and well in the latest version. It does it on a non-bootstrap template, however it works fine on a bootstrap template. I'm not sure what the issue would be caused by.

The above solution thehappybit posted disabled the left/right arrows on all other browsers/devices, but the iPad began to work beautifully. :(