forked from nextapps-de/spotlight
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
345 lines (307 loc) · 17.5 KB
/
index.html
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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover, shrink-to-fit=no">
<meta name="robots" content="index, follow">
<title>Spotlight.js – Modern HTML5 Image Gallery</title>
<script src="dist/spotlight.bundle.js"></script>
<!--<script src="dist/js/spotlight.min.js"></script>-->
<!--<link rel="stylesheet" href="dist/css/spotlight.min.css">-->
<!-- Custom Control: -->
<style>
/*
* Custom Control:
* ---------------
*/
/* custom classes are always prefixed by "spl-" automatically */
.spl-like{
background-image: url(demo/gallery/heart-outline.svg);
background-size: 23px;
}
/* optionally, additional state to toggle the button: */
.spl-like.on{
background-image: url(demo/gallery/heart.svg);
}
/*
* Custom Animation:
* -----------------
*/
/* custom scene transition (slide effect) */
.only-this-gallery.show .spl-scene{
transition: transform 0.2s ease;
}
/* custom animation "visible state" (css context by custom classname "only-this-gallery" to apply these animation just on a specific gallery) */
.only-this-gallery.show .spl-pane > *{
clip-path: circle(100% at center);
}
.only-this-gallery.show .spl-pane, .only-this-gallery.show .spl-pane > *{
/* setting custom transition duration might mess up zoom animations */
/* one should set an identical transition duration for ".spl-pane" and ".spl-pane > *" */
transition: transform 0.35s ease,
opacity 0.65s ease,
clip-path 0.8s ease;
}
/* custom animation "hidden state" ("custom" is the name of the animation you pass as gallery option) */
.only-this-gallery .spl-pane .custom {
clip-path: circle(0px at center) ;
transition: transform 0.65s ease,
opacity 0.65s ease;
}
/* animation state when gallery is hidden */
#spotlight.only-this-gallery{
clip-path: circle(0px at center);
}
/* animation state when gallery will open */
#spotlight.only-this-gallery.show{
clip-path: circle(100% at center);
transition: clip-path 0.65s ease 0.15s;
}
</style>
<link rel="stylesheet" href="demo/style.css">
<meta name="format-detection" content="telephone=no">
<meta name="description" content="Web's most easy to integrate lightbox gallery library. Super-lightweight, outstanding performance, no dependencies.">
<meta name="keywords" content="gallery, lightbox, photo-gallery, javascript-library, image-viewer, lightbox-gallery-plugin, gallery-plugin, gallery-extension, gallery-widget, lightbox-gallery, gallery-template, gallery-viewer, gallery-simple, lightbox-plugin">
<meta name="thumbnail" content="https://nextapps-de.github.io/spotlight/demo/favicon.png">
<meta property="og:url" content="https://nextapps-de.github.io/spotlight/">
<meta property="og:site_name" content="Spotlight.js - Modern HTML5 Image Gallery">
<meta property="og:image" content="https://nextapps-de.github.io/spotlight/demo/og-image.png">
<meta property="og:title" content="Spotlight.js - Modern HTML5 Image Gallery">
<meta property="og:description" content="WinBox is the web's most easy to integrate lightbox gallery library. Super-lightweight, outstanding performance, no dependencies.">
<meta property="og:type" content="Software">
<meta property="og:url" content="https://nextapps-de.github.io/spotlight/">
<link rel="icon" sizes="16x16 32x32 48x48 64x64" type="image/png" href="https://nextapps-de.github.io/spotlight/demo/favicon.png">
<link rel="icon" sizes="512x512 1024x1024" type="image/png" href="https://nextapps-de.github.io/spotlight/demo/og-image.png">
</head>
<body>
<br>
<h1>
<img src="demo/spotlight.svg" alt="Spotlight.js: Modern HTML5 Image Gallery">
</h1>
<a href="https://github.com/nextapps-de/spotlight">Goto Github</a><br>
<hr>
<br>
<b>Anchors & Images</b>
<div class="spotlight-group" data-fit="cover" data-autohide="all">
<a class="spotlight" href="demo/gallery/brooklyn-bridge-1791001.jpg" data-button="Click Me!" data-button-href="javascript:alert('You can open an URL or execute some Javascript here.')" data-description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.">
<img src="demo/gallery/brooklyn-bridge-1791001-thumb.jpg" alt="Lorem ipsum dolor sit amet">
</a>
<a class="spotlight" href="demo/gallery/california-1751455.jpg" data-description="Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.">
<img src="demo/gallery/california-1751455-thumb.jpg" alt="At vero eos et accusam">
</a>
<a class="spotlight" href="demo/gallery/canada-2340312.jpg" data-description="In hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim.">
<img src="demo/gallery/canada-2340312-thumb.jpg" alt="Duis autem vel eum iriure dolor">
</a>
</div>
<br><br>
<b>Custom Elements, Videos & Node Fragments</b>
<div class="spotlight-group">
<div class="spotlight" data-media="image" data-src="demo/gallery/godafoss-1840758.jpg" data-description="In hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim.">
<img src="demo/gallery/godafoss-1840758-thumb.jpg" alt="Duis autem vel eum iriure dolor">
</div>
<a class="spotlight" data-media="video" data-src-webm="https://nextapps.de/video/spotlight/big_buck_bunny.webm" data-src-ogg="https://nextapps.de/video/spotlight/big_buck_bunny.ogv" data-src-mp4="https://nextapps.de/video/spotlight/big_buck_bunny.mp4" data-autoplay="false" data-poster="demo/gallery/poster.jpg">
<img src="demo/gallery/poster.jpg">
</a>
<a class="spotlight" data-media="node" data-src="#fragment">
<img src="demo/gallery/brooklyn-bridge-1791001-thumb.jpg">
<img src="demo/gallery/california-1751455-thumb.jpg">
<img src="demo/gallery/montana-1829251-thumb.jpg">
</a>
<div class="spotlight" data-src="demo/gallery/brooklyn-bridge-1791001.jpg"></div>
<div class="spotlight" data-media="node" data-src="#long"></div>
</div>
<br><br>
<b>Long Images</b>
<div class="spotlight-group long">
<a class="spotlight" href="demo/gallery/brooklyn-bridge-1791001.jpg" data-button="Click Me!" data-button-href="javascript:alert('You can open an URL or execute some Javascript here.')" data-description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.">
<img src="demo/gallery/brooklyn-bridge-1791001-thumb.jpg" alt="Lorem ipsum dolor sit amet">
</a>
<a class="spotlight" href="demo/gallery/Extract_from_the_Tale_of_the_Two_Brothers.jpg" data-description="A handwritten page of the original manuscript of Alice's Adventures Under Ground, illustrated by the author. Held and digitised by the British Library.">
<img src="demo/gallery/Extract_from_the_Tale_of_the_Two_Brothers-thumb.jpg" alt="Excerpt of Alice's Adventures Under Ground">
</a>
<a class="spotlight" href="demo/gallery/alice-underground-lewis-carroll.jpg" data-description="Extract from the Tale of the Two Brothers containing ancient Egyptian hieroglyphs.">
<img src="demo/gallery/alice-underground-lewis-carroll-thumb.jpg" alt="Extract from the Tale of the Two Brothers">
</a>
</div>
<!-- Hidden Backstore -->
<div style="display: none">
<div id="fragment" style="width: 100%">
<b>Embedded Node Fragment</b><br><br>
<img class="image" src="demo/gallery/brooklyn-bridge-1791001-thumb.jpg" width="500" height="334">
<img class="image" src="demo/gallery/california-1751455-thumb.jpg" width="500" height="333">
<img class="image" src="demo/gallery/montana-1829251-thumb.jpg" width="500" height="331">
</div>
<div id="long" style="width: 5em; height: 5em; overflow: scroll; background-color: pink; color: black">
L<br>O<br>N<br>G<br><br>C<br>O<br>N<br>T<br>E<br>N<br>T<br>
<pre style="word-wrap: no-wrap">-----W-----I-----D-----E-----</div>
</div>
</div>
<br>
<hr>
<br>
<b>API Call</b><br>
Choose Controls (Toolbar):<br><br>
<div id="control">
<label><input type="checkbox" value="page" checked>Page</label>
<label><input type="checkbox" value="theme" checked>Theme</label>
<label><input type="checkbox" value="fullscreen" checked>Fullscreen</label>
<label><input type="checkbox" value="autofit">Autofit</label>
<label><input type="checkbox" value="zoom-in">Zoom +</label>
<label><input type="checkbox" value="zoom-out">Zoom -</label><br>
<label><input type="checkbox" value="close" checked>Close</label>
<label><input type="checkbox" value="download" checked>Download</label>
<label><input type="checkbox" value="play" checked>Play</label>
<label><input type="checkbox" value="prev" checked>Page Prev</label>
<label><input type="checkbox" value="next" checked>Page Next</label>
</div>
<br>
Choose Modifier:<br><br>
<div id="modifier">
<label><input type="checkbox" value="autoplay" checked>Autoplay</label>
<label><input type="checkbox" value="infinite" checked>Infinite Slide</label>
<label><input type="checkbox" value="spinner" checked>Spinner</label>
<label><input type="checkbox" value="preload" checked>Preload Next</label><br>
<label><input type="radio" name="autohide" value="false" checked>Autohide: Off</label>
<label><input type="radio" name="autohide" value="true" checked>Autohide: Controls</label>
<label><input type="radio" name="autohide" value="all">Autohide: All</label><br>
<label><input type="radio" name="fit" value="cover" checked>Autofit: Cover</label>
<label><input type="radio" name="fit" value="contain">Autofit: Contain</label><br>
<label><input type="radio" name="theme" value="" checked>Theme: default</label>
<label><input type="radio" name="theme" value="white">Theme: white</label>
</div>
<br>
Choose Animation:<br><br>
<div id="animation">
<label><input type="checkbox" value="slide" checked>Slide</label>
<label><input type="checkbox" value="fade" checked>Fade</label>
<label><input type="checkbox" value="scale">Scale</label>
<label><input type="checkbox" value="custom">Custom</label>
</div>
<br><br>
<div class="image" style="height: auto; margin: 0 1vmin">
<button onclick="showGallery(1)">Show</button>
</div>
<div class="image" style="height: auto; margin: 0 1vmin">
<button onclick="showGallery(2)">Show</button>
</div>
<div class="image" style="height: auto; margin: 0 1vmin">
<button onclick="showGallery(3)">Show</button>
</div>
<div>
<div class="image" style="background-image:url(demo/gallery/london-1758181-thumb.jpg)"></div>
<div class="image" style="background-image:url(demo/gallery/sea-1975403-thumb.jpg)"></div>
<div class="image" style="background-image:url(demo/gallery/newport-beach-2089906-thumb.jpg)"></div>
</div>
<br><br>
<script>
/* Full example of API usage including "like button" as a custom control */
//import Spotlight from "./src/js/spotlight.js";
(function(){
const gallery = [{
title: "Lorem ipsum dolor sit amet",
description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
src: "demo/gallery/london-1758181.jpg",
button: "Download Image",
onclick: Spotlight.download,
like: false
},{
title: "At vero eos et accusam",
description: "Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
src: "demo/gallery/sea-1975403.jpg",
button: "Next Slide",
onclick: Spotlight.next,
like: false,
},{
title: "Duis autem vel eum iriure dolor",
description: "In hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim.",
src: "demo/gallery/newport-beach-2089906.jpg",
button: "Close Gallery",
onclick: Spotlight.close,
like: false
}/*,{
media: "node",
control: "next,prev,close",
src: (function(){
const iframe = document.createElement("iframe");
iframe.src = "https://www.youtube.com/embed/tgbNymZ7vqY";
return iframe;
}())
}*/];
window.showGallery = function(index){
const control = to_array(document.getElementById("control").getElementsByTagName("input"));
const animation = to_array(document.getElementById("animation").getElementsByTagName("input"));
const modifier = document.getElementById("modifier").getElementsByTagName("input");
// store the button element to apply dom changes to it
let like;
// store the current index
let slide = 0;
function handler(){
// get the current like state
// at this point we use the stored last index from the variable "slide"
const current_like_state = !gallery[slide].like;
// toggles the current like state
gallery[slide].like = current_like_state;
// assign the state as class to visually represent the current like state
this.classList.toggle("on");
if(current_like_state){
// do something if liked ...
}
else{
// do something if unliked ...
}
}
const options = {
class: "only-this-gallery",
index: index,
control: control,
animation: animation,
// fires when gallery opens
onshow: function(index){
// the method "addControl" returns the new created control element
like = Spotlight.addControl("like", handler);
},
// fires when gallery change to another page
onchange: function(index, options){
// store the current index for the button listener
// the slide index start from 1 (as "page 1")
slide = index - 1;
// initially apply the stored like state when slide is openened
// at this point we use the stored like element
like.classList.toggle("on", gallery[slide].like);
},
// fires when gallery is requested to close
onclose: function(index){
// remove the custom button, so you are able
// to open next gallery without this custom control
Spotlight.removeControl("like");
}
};
assign(options, modifier);
Spotlight.show(gallery, options);
};
/* helper functions to assign options for the demo page, so skip this part from here */
function to_array(nodelist){
const arr = [];
for(let i = 0, node; i < nodelist.length; i++){
node = nodelist[i];
node.checked && arr.push(node.value);
}
return arr;
}
function assign(options, nodelist){
for(let i = 0, node; i < nodelist.length; i++){
node = nodelist[i];
if(node.checked){
if(node.name){
options[node.name] = node.value;
}
else{
options[node.value] = node.checked;
}
}
}
}
}());
</script>
</body>
</html>