FancyBox: iPAD needs DoubleClick to Advance to Next Image

Question

I have some galleries on http://rockcitybless.com which work perfectly in IE, Chrome and the desktop versions of Safari, Firefox and others.

But on iPa

Answer 1

Just add this when you're using modernizr:

.touch .fancybox-nav span { visibility:visible!important}

Answer 2

For mobile devices, you may want to try disabling the navigation arrows and use the button helpers instead. something like:

$(".fancyLink").fancybox({
 arrows: false,
 closeBtn: false,
 helpers        : { 
  title : { type : 'inside' },
  buttons   : {}
 }
}); 

of course you need to load the fancybox-buttons js and css files

Answer 3

Touch events cause issues. This definitely a bit of a hack but works well:

$(target).on('touchend', function(e) {
    $(this).trigger('click');
});

Answer 4

It seems to be a problem in iOS when setting the visibility to hidden. If we set this to visible and adjust the opacity instead then this should keep the same functionality.

Add this to your CSS file:

  .fancybox-nav span {
        visibility: visible !important;
        opacity: 0;
    }

    .fancybox-nav:hover span {
        opacity: 1;
    }

Answer 5

Simplest solution would be to always display navigation arrows as they are shown on the first tap and on the second will trigger changing gallery item.