Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit 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


Requires jQuery >= 1.4 and < 3

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.