Lightbox not playing nice with mobile device

Question

Lightbox is awesome on the pc.

However, the situation is: I've been getting various complaints from Android and iPhone owners about Lightbox on their mobile devices about how they are unable to zoom on the larger image within lightbox because Lightbox will jump around on the screen and not stay centered.

There are couple of other issues. If you have a mobile device, go ahead and check out my website to visualize what I'm talking about: http://soullow.com/store/index.php?m...products_id=86 Click on larger images and try to zoom in and move about the screen.

The problem is I have not had the time to find a solution to embed code to make Lightbox Mobile Browser friendly.

Has anybody run into this issue, have a solution, suggestion, or anything?

Answer 1

There are several responsive lightbox alternatives out there, but my personal favorite is Fancybox2 (http://fancyapps.com/fancybox/).

But this method would send larger images that are then scaled down to fit the users screen size. This is a waste of bandwidth and also doesn't let users zoom in on images with the native pinch gestures on their phones.

I would suggest bypassing a lightbox altogether for mobile phone users and sending them the straight image file. Zappos mobile site does this for example.

Here's an example I built with Fancybox2: http://jsfiddle.net/alexroper/5s6dv/

The jQuery looks like this. You'll have to update the viewport size depending on what kind of behavior you want for phone or even tablet users.

$(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();
            }
        }
    });
});