Responsive, touch-friendly lightboxes with ImageResizer and SwipeBox

There are few things more frustrating than wrestling with a lightbox widget on your mobile phone. If you're lucky, you'll see the first image; if you're not, you'll get an unresponsive black div and be forced to reload the page.

SwipeBox has a few flaws (it doesn't preload images, and it doesn't support pinch-to-zoom), but it's otherwise a very decent (and extremely small!) jQuery plugin that's designed to be mobile-friendly and responsive.

We're going to combine SwipeBox with ImageResizer, and serve device-tailored full-screen images to eliminate bandwidth waste. We'll limit the number of size variations to 13 to keep the cache waste down.


  • jQuery 1.9+
  • SwipeBox
  • SwipeBox CSS
  • HTML Images wrapped in hyperlinks
  • The loading command

The example

<html lang="en-US">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width; initial-scale=1.0"/>
  <link rel="stylesheet" href="/css/swipebox.css">

<div class="box">
  <a href="" class="swipebox" title="Harbor">
    <img src="" alt="Harbor">
<div class="box">
  <a href="" class="swipebox" title="Sunset">
    <img src="" alt="Sunset">
<div class="box">
  <a href="" class="swipebox" title="Summer">
    <img src="" alt="Summer">
<div class="box">
  <a href="" class="swipebox" title="Dolomites">
    <img src="" alt="Dolomites">

<script src="lib/jquery-1.9.0.min.js"></script>
<script src="lib/ios-orientationchange-fix.js"></script>
<script src="source/jquery.swipebox.min.js"></script>
<script type="text/javascript">
  if ($.fn.swipebox) {

    //Get largest dimension in viewport pixels
    var maxSize = Math.max(document.documentElement.clientWidth, 
    maxSize *= window.devicePixelRatio ? window.devicePixelRatio : 1;
    //Limit to 2048.
    maxSize = Math.min(2048,maxSize); 
    //Round up to multiple of 160 for cache efficiency (~13 variations)
    maxSize = maxSize - (maxSize % 160) + 160;

    //Set the width and height (if present) to maxSize
        e.href = e.href.replace(/width=\d+/,"width=" + maxSize).replace(/height=\d+/,"height=" + maxSize);
    //Launch swipebox
    $(".swipebox").swipebox({useCSS:true, hideBarsDelay:0});


The demo