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
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>