jQuery Responsive Lightbox plugin

November 10, 2012

I was recently tasked with finding a lightbox plugin for high traffic e-commerce site I was building from scratch. Given the impact page weight can have on conversion, bounce rates and a bunch of other delicate analytic metrics, it was essential every piece of JavaScript selected for the site was as lightweight as possible, along with being responsive.

Most lightbox plugins that met the responsive requirement came bundled with functionality to display videos, and transitioned from slide to slide in more elaborate ways than the next. I just wanted to popup an image.

I decided to build my own.

DemoView on GitHub

How to use

Requires jQuery >= 1.4 and < 3

<html>
  <head>
    <link rel="stylesheet" href="jquery.lightbox.css" />
  </head>
  <body>
    <!-- Link to the image -->
    <a href="myimage.jpg" rel="lightbox">Click me</a>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
    <script src="jquery.lightbox.min.js"></script>

    <script>
      $(function() {
        $('[rel="lightbox"]').lightbox()
      })
    </script>
  </body>
</html>

Duncan McDougall

Duncan McDougall is contract web developer from Annan, Scotland.
Twitter LinkedIn GitHub