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.
Requires jQuery >= 1.4 and < 3
IE7+
<html>
<head>
<link rel="stylesheet" href="https://github.com/duncanmcdougall/Responsive-Lightbox/blob/master/lightbox.css" />
</head>
<body>
<!-- Link to the image -->
<div class="gallery">
<a href="https://github.com/duncanmcdougall/Responsive-Lightbox/blob/master/photo1.jpg">Image 1</a>
<a href="https://github.com/duncanmcdougall/Responsive-Lightbox/blob/master/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="https://github.com/duncanmcdougall/Responsive-Lightbox/raw/master/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>
$('.gallery').lightbox({ margin: 20, nav: false, blur: true, minSize: 480 });
Add your captions as a data attribute to the anchor. e.g.
<a href="https://github.com/duncanmcdougall/Responsive-Lightbox/blob/master/myimage.jpg" data-caption="This is a picture of a cat" >
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://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.
I'd like to thank Matthew Hartman, imiric et all for contributing a number of improvements to the lightbox.
This plugin is released under the MIT License. Enjoy.