fancybox next and previous buttons not working in mobile

Question

I'm working on my portfolio website and I've used Fancybox 2 to showcase some portfolio items. Everything works beautifully on the desktop in Firefox, Safari and Chrome, but for some reason on mobile (iPhone) the next and previous buttons don't work and the images go all small and jump to the right slightly. The close button works just fine.

This is my javascript:

<script type="text/javascript">
    $(document).ready(function() {
    $("a.fancybox").fancybox({
        'transitionIn': 'fade',
         'transitionOut': 'fade',
         'speedIn': 600,
         'speedOut': 200,
         'overlayShow': true,
         margin: [60, 60, 50, 60] // top, right, bottom, left
    });
});</script>

I haven't changed any of the default css that came with the fancybox download, but I did customize the close and nav buttons. I don't think that would have anything to do with it though, would it?

If there's anyone who might know how to fix this, I would very much appreciate the help!

Thanks!

Answer 1

The issue is because touch devices don't support the :hover state so I think you have 3 options:

1). Make the arrows permanently visible like in https://stackoverflow.com/a/8672001/1055987

.fancybox-nav span {
 visibility: visible;
}

2). Implement a swiping method using jQuery-UI's draggable like in this http://jsfiddle.net/VacTX/4/ (there was a question that unfortunately was deleted by a moderator, shame) ... I really like this method, it's a bit more complex though.

3). Use the fancybox button helpers like in this https://stackoverflow.com/a/8236090/1055987

helpers: {
    buttons: {}
}