Lightbox does not play well with a mobile device

Question

Lightbox is stunning on pc.

However, the situation is this: I receive various complaints from the owners of Android and iPhone about Lightbox on their mobile devices about how they cannot enlarge a larger image in the lightbox because Lightbox will jump on the screen and not stay in the center.

There are a few more problems. If you have a mobile device, go to my website and see what I say: http://soullow.com/store/index.php?m...products_id=86 Click on large images and try to zoom and move around to the screen.

The problem is that I did not have time to find a solution for embed code to make Lightbox Mobile Browser friendly.

Does anyone come across this problem, have a solution, suggestion or something else?

Answer 1

There are several alternative lightbox options, but my personal favorite is Fancybox2 (http://fancyapps.com/fancybox/) .

But this method will send large images, which are then reduced to fit the user's screen size. This is a waste of bandwidth, and also does not allow users to enlarge the image with the help of hard, hard settings on their phones.

I would suggest to bypass the lightbox in general for mobile phone users and send them a file with a direct image. For example, the Zappos mobile site does this, for example.

Here is an example that I built using Fancybox2: http://jsfiddle.net/alexroper/5s6dv/

JQuery looks like this. You will need to update the size of the viewport depending on what behavior you want to use for users of phones or even tablets.

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

Answer 2

Most of the lightbox / shadow / modal dialog libraries in JavaScript seem to rely on body.clientWidth and clientHeight to calculate the size and position of the image or dialog box.

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

Now for the explanation: the reason the modal element jumps is because its position is calculated by the width of the document, which is twice the size of the screen, and it adds a scroll position to make it "CENTERED". therefore, when you swing over a modal, the scroll value advances it further in that direction.