Image LightBox

A lightbox without bells and whistles.

View a demo here: https://victorhaggqvist.github.io/touch-imagelightbox/

View full docs: https://touch-imagelightbox.readthedocs.org

Version 0.2.0

The original Imagelightbox and up to version 0.1.5 of touch-imagelightbox was a jQuery plugin.

Version 0.2.0 is a major rewrite of the original Imagelightbox to change it’s architecture and remove the jQuery dependency.

How to get it

Via bower

bower install touch-imagelightbox

Or with git

git clone https://github.com/victorhaggqvist/touch-imagelightbox.git

Requirements

As of version 0.2.0 there are no additional requirements.

For versions <= 0.1.5 jQuery is required.

NOTE: The bower install will not get jQuery for you, if you want to get jQuery from bower too use bower install jquery

Compatibility

Version 0.2.0 and continuing aims to support modern browsers. If you need more then 0.2.0 can provide go for 0.1.5.

0.2.0 have (so far) been tested in

  • Firefix 43.0.4
  • Chrome 47 (including Android)
  • iOS 9.2

Usage

To only utilize the LightBox Core, with no plugins. At this point both Core and Plugins CSS is bundled.

<link rel="stylesheet" href="touch-imagelightbox.css">
<script src="LightBox.Core.js"></script>
<script>
   new LightBox.Core('a[lightbox="foo"]');
</script>

Plugins can be loaded all at once with LightBox.Plugins.js or individually LightBox.[plugin].js

<link rel="stylesheet" href="touch-imagelightbox.css">
<script src="LightBox.Core.js"></script>
<script src="LightBox.Plugins.js"></script>
<script>
   var box = new LightBox.Core('a[lightbox="bar"]');
   box.registerPlugin(new LightBox.ActivityIndicator());
   box.registerPlugin(new LightBox.Overlay());
</script>

Checkout the demos at https://victorhaggqvist.github.io/touch-imagelightbox/.

For more about plugins see Plugins.

Options

LightBox can be customised using options. To set custom options pass a options object as a second parameter.

var options = {
   preloadNext: false
};
new LightBox.Core('a[lightbox="foo"]', options);

Available options and defaults

Option Default type Description
selectorId imagelightbox string The id the lightbox image will get
allowedTypes png|jpg|jpeg|gif string Image types allowed
animationSpeed 250 integer How fast images would fade away
preloadNext true bool Silently preload the next image
enableKeyboard true bool Enable keyboard shortcuts (arrows Left/Right and Esc)
quitOnEnd false bool Quit after viewing the last image
quitOnImgClick false bool Quit when the viewed image is clicked
quitOnDocClick true bool Quit when anything but the viewed image is clicked

Building

git clone https://github.com/victorhaggqvist/touch-imagelightbox.git
cd touch-imagelightbox
npm install
gulp build

Credits

Imagelightbox was originally created by Osvaldas Valutis.

License

MIT

Contents:

Indices and tables