Lightweight, image only responsive, jQuery lightbox plugin
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.



by Duncan McDougall | @duncanmcdougall

jQuery responsive lightbox plugin.

Shrinks the image to the width & height of the browser. Only handles images so it's nice and lightweight.


Responsive Lightbox Demo


jQuery >= 1.4

Browser Support



<link rel="stylesheet" href="lightbox.css" />
<!-- Link to the image -->
<div class="gallery">
<a href="photo1.jpg">Image 1</a>
<a href="photo2.jpg">Image 2</a>

<script type="text/javascript" src=""></script>
<script src="lightbox.min.js"></script>

    $('.gallery a').lightbox(); 
	// If you want seperate galleries on the same page
	// just specify different class names. 
	$('.gallery-2 a').lightbox();


    $('.gallery').lightbox({ margin: 20, nav: false, blur: true, minSize: 480 });
  • margin - int - default 50. Minimum margin around the image
  • nav - bool - default true. enable navigation
  • blur - bool - default true. Blur other content when open using css filter
  • minSize - int - default 0. Min window width or height to open lightbox. Below threshold will open image in a new tab.


Add your captions as a data attribute to the anchor. e.g.

    <a href="myimage.jpg" data-caption="This is a picture of a cat" >

Installing with Bower

If bower is your thing you can install using the following command

bower install responsive-lightbox


First, clone a copy of using the GUI or the main git repo by running:

git clone git://

I'm using GruntJS to do all the minification and linting as build tasks.

Install the grunt-cli package so that you will have the correct version of grunt available from any project that needs it. This should be done as a global install:

npm install -g grunt-cli

Enter the jquery directory and install the Node dependencies, this time without specifying a global install:

cd Responsive-Lightbox && npm install

Make sure you have grunt installed by testing:

grunt -version

Then, to get a complete, minified (w/ Uglify.js), linted (w/ JSHint) version of the plugin, type the following:


The built version of the plugin will be saved to .min versions.

Next Steps

  • Options: { loop }
  • Faster image switching
  • Light and dark simple themes

Thanks To

I'd like to thank Matthew Hartman, imiric et all for contributing a number of improvements to the lightbox.

MIT License

This plugin is released under the MIT License. Enjoy.