-1

This answer was the perfect solution to go arround the :hovers of my web-site navigation so the iPad users don't have to doubble click the links.

$('a').on('click touchend', function(e) {
   var el = $(this);
    var link = el.attr('href');
    window.location = link;
});

Now how can I handle the FancyBox links? I can pass them another class or whatever needed to get the right result. Window.location is no solution (there are fancyBoxes with iframes).

I've created two fiddles to demonstrate the problem also appears with no iframe.

The first one opens the fancybox, but the second one only works on my desktop computer and not on the iPad.

Also, some of the fancybox links are directly in the navigation of the page with the :hover effect. Here the user should NOT have to click twice and the Fancy-Iframe should open.

Can anyone tell me how to solve this please. Thanks a lot for all the help.

Community
  • 1
  • 1
caramba
  • 21,963
  • 19
  • 86
  • 127

1 Answers1

1

You could just trigger a click event on the fancybox selector instead of the window.location.

So tweaking the code in your second jsfiddle you could do :

$(document).ready(function () {

    $('.fancybox').fancybox();

    $('a').on('click touchend', function (e) {
        var fancy = this.className.indexOf('fancybox') != -1;
        if (fancy) {
            $(this.className).trigger("click")
        } else {
            // var el = $(this); 
            // var link = el.attr('href'); // simply use this.href
            window.location = this.href;
            return false;
        }
    });
});

See your updated JSFIDDLE

NOTE : you may have the same issue hovering the fancybox navigation arrows if you have a gallery, in that case you may have to trigger the $.fancybox.next() and $.fancybox.prev() methods for iPad or use the helpers buttons instead.

JFK
  • 40,963
  • 31
  • 133
  • 306