Skip to content

Commit 3be7c4f

Browse files
biati-digitalbiati-digital
committed
Updated demo site
1 parent f442266 commit 3be7c4f

File tree

5 files changed

+68
-25
lines changed

5 files changed

+68
-25
lines changed

‎demo/css/style.css

+10
Original file line numberDiff line numberDiff line change
@@ -702,3 +702,13 @@ footer a {
702702
transition: opacity 0.5s;
703703
}
704704
}
705+
706+
707+
/* path {
708+
stroke-opacity: 0;
709+
}
710+
711+
path.hw {
712+
stroke-opacity: 1;
713+
}
714+
*/

‎demo/img/large/gm1.jpg

69.4 KB
Loading

‎demo/img/large/gm122.jpg

43 KB
Loading

‎demo/js/site.js

+29
Original file line numberDiff line numberDiff line change
@@ -83,4 +83,33 @@
8383
});
8484
}
8585
specifics();
86+
87+
88+
const letters = _('svg').children('g');
89+
function animateLetter(index = 0) {
90+
if (index > letters.length - 1) {
91+
return false;
92+
}
93+
94+
let nextIndex = index + 1;
95+
let paths = _(letters[index]).find('path');
96+
let duration = (index > 0 ? 390 : 1000);
97+
98+
anime({
99+
targets: paths.toArray(),
100+
strokeDashoffset: [anime.setDashoffset, 0],
101+
easing: 'easeInOutSine',
102+
duration: duration,
103+
begin: () => {
104+
paths.addClass('hw');
105+
},
106+
complete: () => {
107+
animateLetter(nextIndex);
108+
}
109+
});
110+
}
111+
animateLetter(0);
112+
113+
114+
86115
}());

‎index.html

+29-25
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
<li><a href="#examples">EXAMPLES</a></li>
2727
<li><a href="#specifications">INFO</a></li>
2828
<li><a href="#license">LICENSE</a></li>
29-
<li><a href="https://github.com/biati-digital/glightbox/releases/download/2.0.2/glightbox-master.zip">DOWNLOAD</a></li>
29+
<li><a href="https://github.com/biati-digital/glightbox/releases/download/2.0.3/glightbox-master.zip">DOWNLOAD</a></li>
3030
</ul>
3131
</div>
3232
</div>
@@ -44,7 +44,7 @@ <h1 style="font-family: 'Lobster', cursive;">GLightbox.</h1>
4444
video support.</p>
4545

4646
<div class="download">
47-
<a class="mcbutton primary" href="https://github.com/biati-digital/glightbox/releases/download/2.0.2/glightbox-master.zip">
47+
<a class="mcbutton primary" href="https://github.com/biati-digital/glightbox/releases/download/2.0.3/glightbox-master.zip">
4848
<i class="fa fa-download" aria-hidden="true"></i>
4949
<span>Download</span>
5050
</a>
@@ -132,37 +132,38 @@ <h3><i class="fa fa-address-card heading-icon" aria-hidden="true"></i>Images wit
132132
<ul class="box-container three-cols">
133133
<li class="box">
134134
<div class="inner">
135-
<a href="demo/img/large/gm7.jpg" class="glightbox2" data-glightbox="title:Description Bottom; description: You can set the position of the desciption &lt;a href=&quot;http://google.com&quot;&gt;with a link to Google&lt;/a&gt;">
135+
<a href="demo/img/large/gm7.jpg" class="glightbox2" data-glightbox="title:Description Bottom; description: You can set the position of the description &lt;a href=&quot;http://google.com&quot;&gt;with a link to Google&lt;/a&gt;">
136136
<img src="demo/img/small/gm7.jpg" alt="image">
137137
</a>
138138
</div>
139139
</li>
140140
<li class="box">
141141
<div class="inner">
142-
<a href="demo/img/large/gm8.jpg" class="glightbox2" data-glightbox="title: Description Right; descPosition: right;">
142+
<a href="demo/img/large/gm8.jpg" class="glightbox2" data-glightbox="title: Description Right; description: .custom-desc1; descPosition: right;">
143143
<img src="demo/img/small/gm8.jpg" alt="image">
144-
<div class="glightbox-desc">
145-
<p>You can set the position of the desciption in different ways for example <strong style="text-decoration: underline;">top, bottom, left or right</strong></p>
146-
<p>
147-
Duis quis ipsum vehicula eros ultrices lacinia. Vestibulum ante ipsum primis in faucibus orci luctus
148-
et ultrices posuere
149-
cubilia Curae Duis quis ipsum vehicula eros ultrices lacinia. Vestibulum ante ipsum primis in faucibus
150-
orci luctus et ultrices posuere</p>
151-
</div>
152144
</a>
145+
146+
<div class="glightbox-desc custom-desc1">
147+
<p>You can set the position of the description in different ways for example <strong style="text-decoration: underline;">top, bottom, left or right</strong></p>
148+
<p>
149+
<a href="http://google.com" target="_blank" style="text-decoration: underline; font-weight: bold;">Example Google link</a> ipsum vehicula eros ultrices lacinia Vestibulum ante ipsum primis in faucibus orci luctus
150+
et ultrices posuere
151+
cubilia Curae Duis quis ipsum vehicula eros ultrices lacinia. Vestibulum ante ipsum primis in faucibus
152+
orci luctus et ultrices posuere</p>
153+
</div>
153154
</div>
154155
</li>
155156
<li class="box">
156157
<div class="inner">
157-
<a href="demo/img/large/gm9.jpg" class="glightbox2" data-glightbox="title: Description Left; descPosition: left;">
158+
<a href="demo/img/large/gm9.jpg" class="glightbox2" data-glightbox="title: Description Left; description: .custom-desc2; descPosition: left;">
158159
<img src="demo/img/small/gm9.jpg" alt="image">
159-
<div class="glightbox-desc">
160-
<p>You can set the position of the desciption in different ways for example top, bottom, left or right</p>
161-
<p>Duis quis ipsum vehicula eros ultrices lacinia. Vestibulum ante ipsum primis in faucibus orci luctus
162-
et ultrices posuere
163-
cubilia Curae</p>
164-
</div>
165160
</a>
161+
<div class="glightbox-desc custom-desc2">
162+
<p>You can set the position of the description in different ways for example top, bottom, left or right</p>
163+
<p>Duis quis ipsum vehicula eros ultrices lacinia. Vestibulum ante ipsum primis in faucibus orci luctus
164+
et ultrices posuere
165+
cubilia Curae</p>
166+
</div>
166167
</div>
167168
</li>
168169
</ul>
@@ -194,14 +195,14 @@ <h3><i class="fa fa-video-camera heading-icon" aria-hidden="true"></i>Videos Gal
194195
</li>
195196
<li class="box">
196197
<div class="inner">
197-
<a href="https://www.youtube.com/watch?v=Ga6RYejo6Hk" class="glightbox3">
198+
<a href="https://www.youtube-nocookie.com/embed/Ga6RYejo6Hk" class="glightbox3">
198199
<img src="demo/img/small/gm11.jpg" alt="image">
199200
</a>
200201
</div>
201202
</li>
202203
<li class="box">
203204
<div class="inner">
204-
<a href="./demo/BigBuckBunny_320x180.mp4" class="glightbox3">
205+
<a href="./demo/pexels-video-1550080.mp4" class="glightbox3">
205206
<img src="demo/img/small/gm12.jpg" alt="image">
206207
</a>
207208
</div>
@@ -263,14 +264,16 @@ <h4>Animations</h4>
263264

264265
<h4>Features</h4>
265266
<ul>
266-
<li>Small - only 9KB Gzipped</li>
267+
<li>Small - only 11KB Gzipped</li>
267268
<li>Responsive - works with any screen size</li>
268269
<li>Gallery Support - Create multiple galleries</li>
269270
<li>Video Support - Youtube, Vimeo and self hosted videos with autoplay</li>
270271
<li>Inline content support - display any inline content</li>
271272
<li>Iframe support - need to embed an iframe? no problem</li>
272273
<li>Keyboard Navigation - esc, arrows keys, tab and enter is all you need</li>
273274
<li>Touch Navigation - mobile touch events like swipe, move, pinch, etc.</li>
275+
<li>Zoomable images - zoom and drag images on mobile and desktop</li>
276+
<li>Retina ready - svg icons for controls.</li>
274277
<li>Api - control the lightbox with the provided methods</li>
275278
</ul>
276279

@@ -298,7 +301,7 @@ <h4>License</h4>
298301
</div>
299302

300303
<p class="text-center footer-btns">
301-
<a class="mcbutton primary" href="https://github.com/mcstudios/glightbox/releases/download/2.0.2/glightbox-master.zip">
304+
<a class="mcbutton primary" href="https://github.com/mcstudios/glightbox/releases/download/2.0.3/glightbox-master.zip">
302305
<i class="fa fa-download"></i>
303306
Download
304307
</a>
@@ -324,17 +327,18 @@ <h4 class="text-center">Example of inline content</h4>
324327

325328
<footer class="text-center">
326329
<div class="wrap copyright">
327-
made with love by <a href="https://www.biati.digital" target="_blank">biati digital</a> | photos by <a href="http://unsplash.com" target="_blank">unsplash.com</a>
330+
made with love by <a href="https://www.biati.digital" target="_blank">biati digital</a> | photos by <a href="http://unsplash.com" target="_blank">unsplash.com</a> | video by <a href="https://www.pexels.com/video/a-rocky-coast-1550080/" target="_blank">pexels</a>
328331
</div>
329332
</footer>
330333

334+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js"></script>
331335
<script src="demo/js/valde.min.js"></script>
332336
<script src="dist/js/glightbox.js"></script>
333337
<script src="demo/js/site.js"></script>
334338
<script>
335339
var lightbox = GLightbox();
336340
var lightboxDescription = GLightbox({
337-
selector: 'glightbox2'
341+
selector: 'glightbox2',
338342
});
339343
var lightboxVideo = GLightbox({
340344
selector: 'glightbox3',

0 commit comments

Comments
 (0)