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

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

Let's discuss your project now