Skip to content

Latest commit

 

History

History
112 lines (81 loc) · 3.11 KB

readme.markdown

File metadata and controls

112 lines (81 loc) · 3.11 KB

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

jQuery >= 1.4

Usage

<html>
<head>
<link rel="stylesheet" href="lightbox.css" />
</head>
<body>
<!-- Link to the image -->
<a href="photo.jpg" rel="lightbox">Click me</a>

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

<script>
 $(function()
 {
    $('.lightbox').lightbox();
 });
</script>
</body>

Options

    $('.lightbox').lightbox({ margin: 20, nav: false, blur: true, minSize: 480,CloseButtonText: 'Close',PreviousButtonText: 'Previous', NextButtonText: 'Next'});
  • 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.
  • CloseButtonText - text - User can define Close Button Text
  • PreviousButtonText - text - User can define Previous Button Text
  • NextButtonText - text - User can define Next Button Text

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.

License

Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/

Free for use in both personal and commercial projects. Attribution requires leaving author name, author homepage link, and the license info intact.

githalytics.com alpha