Mobile Fancybox2

A method for bypassing Fancybox2 at smaller viewport sizes such as on mobile phones.

by alexroper

HTML

<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js"></script>
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<a class="fancybox" rel="gallery1" href="http://farm8.staticflickr.com/7069/7060779347_fbee5aae15_b.jpg" title="morning after[explored] (mariosworld343)">
    <img src="http://farm8.staticflickr.com/7069/7060779347_fbee5aae15_m.jpg" alt="" />
</a>

JavaScript

$(document).ready(function() {
    // initialize the lightbox 
    $('.fancybox').fancybox({
        beforeLoad: function() {
            var windowsize = $(window).width();
            // test the viewport size to see if it's smaller than 480px
            if (windowsize < 480) {
                // cancel the lightbox and load the link url
                $.fancybox.cancel();
            }
        }
    });
});