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 :doc:`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