jQuery Responsive Lightbox plugin

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.

Demo

Gondala ride in VeniceThe Queen's GuardAtomium in BrusselsTower Bridge in London during 2012 Olympics

View 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" data-caption="Optional caption attribute" 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>

Download files on GitHub

Ooooh, ultrawide! 😍