Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

Responsive-Lightbox

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.

Demonstration

Responsive Lightbox Demo

Dependencies

Requires jQuery >= 1.4 and < 3

Browser Support

IE7+

Usage

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

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="lightbox.min.js"></script>

<script>
 $(function()
 {
    $('.gallery a').lightbox(); 
	
	// If you want seperate galleries on the same page
	// just specify different class names. 
	$('.gallery-2 a').lightbox();
 });
</script>
</body>

Options

    $('.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.

Captions

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

Contributing

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

git clone git://github.com/duncanmcdougall/Responsive-Lightbox.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:

grunt

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.

About

Lightweight, image only responsive, jQuery lightbox plugin

Resources

Packages

No packages published
You can’t perform that action at this time.