About design and nearby

Mobile-friendly jQuery Lightbox Solution

Posted: May 1st, 2012 | Author: | Filed under: Development, Mobile Design and Development, Tips and Tricks | Tags: , , , , | 1 Comment »

Everyone knows jQuery LightBox plugin – it’s simple and elegant, used for handling images through the power of jQuery’s selector. It’s perfect for image galleries, portfolios (for example, try my portfolio page >> view full size images).

The plugin works perfect, just one day while testing a client’s website for mobile devices, I found a bug – every full size image appeared at the very bottom of my page and was hidden for the very first sight, I had to scroll down the page to see it.

After setting up alerts and trying the result )) the solution for Lightbox v2.05 (by Lokesh Dhakar) was found – see line 245 or nearby:

if ((navigator.userAgent.match(/HTC_/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i) ||
  1.         navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/blackberry/i) ||
  2.         navigator.userAgent.match(/Windows Phone OS 7/i) || navigator.userAgent.match(/webOS/i))) {
  3.  
  4.             var arrayPageScroll = document.viewport.getScrollOffsets();
  5.             var lightboxTop = arrayPageScroll[1] + (100);
  6.             var lightboxLeft = (jQuery(window).width() / 2 – document.viewport.getWidth() / 2);
  7.             this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show();
  8.  
  9.             this.changeImage(imageNum);
  10.         }
  11.         else {
  12.             // calculate top and left offset for the lightbox
  13.             var arrayPageScroll = document.viewport.getScrollOffsets();
  14.             var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);
  15.             var lightboxLeft = arrayPageScroll[0];
  16.             this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show();
  17.  
  18.             this.changeImage(imageNum);
  19.         }
  20.     },

Note: I used navigator.userAgent.match(/HTC_/i) because navigator.userAgent.match(/Android/i) had no result for my HTC.

You can load Lightbox v2.05 with my changes.

Related post: Your Mobile Website: be Up-to-Date!

Share Button

Check Related Posts:

One Comment on “Mobile-friendly jQuery Lightbox Solution”

  1. 1 Why Lightbox on mobile? said at 9:18 am on November 20th, 2012:
    Reply  |  Quote

    What would be so bad about preventing a Lightbox from firing on mobile devices AT ALL? …mobile browsers usually allow to view images fullscreen quite neatly so.

    If you want your ‘lightbox’ to show additional metadata to your image… then you will have to do a mobile first development approach anyways and then see how you can scale that to large screen devices.


Leave a Reply


  • × four = 32

Looking for a Freelance UX & UI designer for your project? I’m ready to jump onboard!

Let's discuss your project now