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

Answer 2

It seems that most lightbox/shadowbox/modal dialogue libraries in JavaScript rely on the body.clientWidth and clientHeight to calculate the size and position of the image or dialogue box.

In mobile browsers, the clientWidth is wider than screen.Width, this preserves formatting, and allows the user to zoom and pan around the page. A solid fix would be to use body.clientWidth for calculating size and position of modal elements, but fall back to using screen.Width when it is smaller than body.clientWidth

Now for explanation: the reason why the modal element jumps around is that it's position is calculated by the width of the document which is twice the size of the screen, and it adds the scroll position to make it "CENTERED". so when you pan over the modal, the scroll value pushes it farther in that direction.