blob: 5d8b26e6fc9a46bc84b9e03be06d1040edac0fbd (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
|
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
.. code-block:: bash
bower install touch-imagelightbox
Or with git
.. code-block:: bash
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 :code:`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.
.. code-block:: html
<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 :code:`LightBox.Plugins.js` or individually :code:`LightBox.[plugin].js`
.. code-block:: html
<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.
.. code-block:: js
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
--------
.. code-block:: bash
git clone https://github.com/victorhaggqvist/touch-imagelightbox.git
cd touch-imagelightbox
npm install
gulp build
Credits
-------
Imagelightbox was originally created by `Osvaldas Valutis`_.
.. _Osvaldas Valutis: http://osvaldas.info/image-lightbox-responsive-touch-friendly
License
-------
MIT
|
