Skip to content

Commit 53265cb

Browse files
solarsailersolarsailer
committed
Update docs
1 parent 157423f commit 53265cb

23 files changed

+133
-23
lines changed

‎docs/example/css/master.css

+31-1
Original file line numberDiff line numberDiff line change
@@ -365,7 +365,37 @@ a:hover {
365365
width: 100%;
366366
}
367367

368-
@media (min-width: 800px) {
368+
.gallery__item a[href$=".gif"] {
369+
position: relative;
370+
371+
display: block;
372+
}
373+
374+
.gallery__item a[href$=".gif"]::after {
375+
position: absolute;
376+
z-index: 1;
377+
top: 0;
378+
left: 0;
379+
380+
display: none;
381+
382+
width: 100%;
383+
height: 100%;
384+
padding: 20px;
385+
386+
background: rgba(0, 0, 0, 0.25);
387+
388+
content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAABGdBTUEAALGPC/xhBQAAAFFQTFRFAAAA/////////////////////////////Pz8/Pz8/Pz8/f39/f39/f39/f39/f39/f39/Pz8/Pz8/Pz8/Pz8/v7+/f39/f39/f39/f39/f395zF2nQAAABt0Uk5TAAEJCxQeIEpXYGFnc3V2d5WarK2/xNLb3N3m8ZFI2gAAAOlJREFUOMuVlckOgzAMRAdIWUrKUgK4/v8P7QWVLA64c0RPY9mxByBQ3U/LSrQuU18jKzM49uQGI2KVJY5Etkq5ZmNBWxNhheWMbOFz5cxZzaXnd8Exz6en5UvZXx98o6OjarsDtyop/Hrnixt/zm3x/AggGQCj/6UFHpLpAMBFICRTB9Qcg6JpjV4ABdMekwSmphMWGUTRBaYL1gwYma6gLBiYEvYr8HTZ9aXzzVDYjHo88sA7SgaufkJhKRI7Zgdg0K5ZtLiC3bG46lPQH5f6XPUBoI8UdUjpY08fpH9EMwAzqsL+5vfxBcKnb1vURTbUAAAAAElFTkSuQmCC");
389+
390+
align-items: center;
391+
justify-content: center;
392+
}
393+
394+
.gallery__item a[href$=".gif"].show-overlay::after {
395+
display: flex;
396+
}
397+
398+
@media (min-width: 500px) {
369399
.gallery__item {
370400
width: 50%;
371401
}

‎docs/example/images/header.jpg

-1.5 MB
Loading

‎docs/example/images/pizza-01.jpg.thumb.jpg

21.4 KB
Loading

‎docs/example/images/pizza-02.jpg.thumb.jpg

30.7 KB
Loading

‎docs/example/images/pizza-03.jpg.thumb.jpg

25.6 KB
Loading

‎docs/example/images/pizza-04.jpg.thumb.jpg

24.3 KB
Loading

‎docs/example/images/pizza-05.jpg.thumb.jpg

30.7 KB
Loading

‎docs/example/images/pizza.gif.thumb.jpg

30.5 KB
Loading

‎docs/example/index.html

+50-10
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@
66

77
<title>Pizza Burger Studio</title>
88

9-
<link rel="shortcut icon" href="images/favicon.ico?t=1533927023047">
9+
<link rel="shortcut icon" href="images/favicon.ico?t=1534256235802">
1010

1111
<link rel="stylesheet" href="./css/normalize.css">
1212
<link rel="stylesheet" href="./css/master.css">
1313

14-
<!-- Generated by presskit.html 0.10.0 (https://github.com/pixelnest/presskit.html). -->
14+
<!-- Generated by presskit.html 0.11.0 (https://github.com/pixelnest/presskit.html). -->
1515
</head>
1616
<body>
1717
<div class="page grid">
@@ -213,32 +213,32 @@ <h2 id="images">Images</h2>
213213
<div class="gallery clearfix" id="gallery">
214214
<div class="gallery__item">
215215
<a href="images/pizza-01.jpg">
216-
<img src="images/pizza-01.jpg" alt="pizza-01">
216+
<img src="images/pizza-01.jpg.thumb.jpg" alt="pizza-01">
217217
</a>
218218
</div>
219219
<div class="gallery__item">
220220
<a href="images/pizza-02.jpg">
221-
<img src="images/pizza-02.jpg" alt="pizza-02">
221+
<img src="images/pizza-02.jpg.thumb.jpg" alt="pizza-02">
222222
</a>
223223
</div>
224224
<div class="gallery__item">
225225
<a href="images/pizza-03.jpg">
226-
<img src="images/pizza-03.jpg" alt="pizza-03">
226+
<img src="images/pizza-03.jpg.thumb.jpg" alt="pizza-03">
227227
</a>
228228
</div>
229229
<div class="gallery__item">
230230
<a href="images/pizza-04.jpg">
231-
<img src="images/pizza-04.jpg" alt="pizza-04">
231+
<img src="images/pizza-04.jpg.thumb.jpg" alt="pizza-04">
232232
</a>
233233
</div>
234234
<div class="gallery__item">
235235
<a href="images/pizza-05.jpg">
236-
<img src="images/pizza-05.jpg" alt="pizza-05">
236+
<img src="images/pizza-05.jpg.thumb.jpg" alt="pizza-05">
237237
</a>
238238
</div>
239239
<div class="gallery__item">
240240
<a href="images/pizza.gif">
241-
<img src="images/pizza.gif" alt="pizza">
241+
<img src="images/pizza.gif.thumb.jpg" alt="pizza">
242242
</a>
243243
</div>
244244
</div>
@@ -380,8 +380,8 @@ <h2 id="contact">Contact</h2>
380380
<script src="./js/masonry.min.js"></script>
381381
<script src="./js/imagesloaded.min.js"></script>
382382
<script>
383-
// Add masonry layout on the galleries.
384383
document.addEventListener('DOMContentLoaded', function onContentLoaded() {
384+
// Add masonry layout on the galleries.
385385
var galleries = document.querySelectorAll('.gallery');
386386

387387
for (var i = 0; i < galleries.length; i++) {
@@ -395,7 +395,47 @@ <h2 id="contact">Contact</h2>
395395
});
396396
})(i);
397397
}
398-
})
398+
399+
// Add mini-player to gifs.
400+
var gifLinks = document.querySelectorAll('a[href$=".gif"]');
401+
for (var i = 0; i < gifLinks.length; i++) {
402+
(function (index) {
403+
var link = gifLinks[index];
404+
var img = link.querySelector('img');
405+
406+
// Don't add the mini-player if no thumbnail.
407+
// It's already a gif, so no need to turn it on.
408+
if (img.src.indexOf('.thumb.jpg') === -1) {
409+
return
410+
}
411+
412+
link.className = 'show-overlay'
413+
414+
link.onclick = function (e) {
415+
// Make it work on IE8.
416+
if (e.preventDefault) {
417+
const openLinkInBackground = e.ctrlKey || e.metaKey;
418+
419+
// Stop default behavior, except if ctrl/cmd modifier is used.
420+
// In this case, we want the link to go through and open
421+
// its target in a background tab.
422+
if (!openLinkInBackground) e.preventDefault();
423+
e.stopPropagation();
424+
} else {
425+
// We don't care for the special background tab behavior on old IE.
426+
e.returnValue = false;
427+
}
428+
429+
// Remove overlay and remove thumbnail section of the image.
430+
link.className = '';
431+
img.src = img.src.replace('.thumb.jpg', '');
432+
433+
// Remove event listener after first trigger.
434+
link.onclick = null;
435+
}
436+
}(i));
437+
}
438+
});
399439
</script>
400440

401441
<script src="./js/hamburger.js"></script>

‎docs/example/product/images/burger-01.jpg.thumb.jpg

23.3 KB
Loading

‎docs/example/product/images/burger-02.jpg.thumb.jpg

15.9 KB
Loading

‎docs/example/product/images/burger-03.jpg.thumb.jpg

17.8 KB
Loading

‎docs/example/product/images/burger-04.jpg.thumb.jpg

21.6 KB
Loading

‎docs/example/product/images/header.jpg

-582 KB
Loading

‎docs/example/product/images/wallpapers/bagel-01.jpg

-8.69 KB
Loading

‎docs/example/product/images/wallpapers/bagel-01.jpg.thumb.jpg

24.6 KB
Loading

‎docs/example/product/images/wallpapers/bagel-02.jpg

-6.3 KB
Loading

‎docs/example/product/images/wallpapers/bagel-02.jpg.thumb.jpg

16.3 KB
Loading

‎docs/example/product/images/wallpapers/bagel-03.jpg

-6.09 KB
Loading

‎docs/example/product/images/wallpapers/bagel-03.jpg.thumb.jpg

16.5 KB
Loading

‎docs/example/product/images/wallpapers/bagel-04.jpg

-5.66 KB
Loading

‎docs/example/product/images/wallpapers/bagel-04.jpg.thumb.jpg

17.4 KB
Loading

‎docs/example/product/index.html

+52-12
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@
66

77
<title>My Super Game - Pizza Burger Studio</title>
88

9-
<link rel="shortcut icon" href="images/favicon.ico?t=1533927022910">
9+
<link rel="shortcut icon" href="images/favicon.ico?t=1534256235503">
1010

1111
<link rel="stylesheet" href="../css/normalize.css">
1212
<link rel="stylesheet" href="../css/master.css">
1313

14-
<!-- Generated by presskit.html 0.10.0 (https://github.com/pixelnest/presskit.html). -->
14+
<!-- Generated by presskit.html 0.11.0 (https://github.com/pixelnest/presskit.html). -->
1515
</head>
1616
<body>
1717
<div class="page grid">
@@ -240,22 +240,22 @@ <h2 id="images">Images</h2>
240240
<div class="gallery clearfix" id="gallery">
241241
<div class="gallery__item">
242242
<a href="images/burger-01.jpg">
243-
<img src="images/burger-01.jpg" alt="burger-01">
243+
<img src="images/burger-01.jpg.thumb.jpg" alt="burger-01">
244244
</a>
245245
</div>
246246
<div class="gallery__item">
247247
<a href="images/burger-02.jpg">
248-
<img src="images/burger-02.jpg" alt="burger-02">
248+
<img src="images/burger-02.jpg.thumb.jpg" alt="burger-02">
249249
</a>
250250
</div>
251251
<div class="gallery__item">
252252
<a href="images/burger-03.jpg">
253-
<img src="images/burger-03.jpg" alt="burger-03">
253+
<img src="images/burger-03.jpg.thumb.jpg" alt="burger-03">
254254
</a>
255255
</div>
256256
<div class="gallery__item">
257257
<a href="images/burger-04.jpg">
258-
<img src="images/burger-04.jpg" alt="burger-04">
258+
<img src="images/burger-04.jpg.thumb.jpg" alt="burger-04">
259259
</a>
260260
</div>
261261
</div>
@@ -265,22 +265,22 @@ <h3 class="capitalize" id="gallery-wallpapers">wallpapers</h3>
265265
<div class="gallery clearfix">
266266
<div class="gallery__item">
267267
<a href="images/wallpapers/bagel-01.jpg">
268-
<img src="images/wallpapers/bagel-01.jpg" alt="bagel-01">
268+
<img src="images/wallpapers/bagel-01.jpg.thumb.jpg" alt="bagel-01">
269269
</a>
270270
</div>
271271
<div class="gallery__item">
272272
<a href="images/wallpapers/bagel-02.jpg">
273-
<img src="images/wallpapers/bagel-02.jpg" alt="bagel-02">
273+
<img src="images/wallpapers/bagel-02.jpg.thumb.jpg" alt="bagel-02">
274274
</a>
275275
</div>
276276
<div class="gallery__item">
277277
<a href="images/wallpapers/bagel-03.jpg">
278-
<img src="images/wallpapers/bagel-03.jpg" alt="bagel-03">
278+
<img src="images/wallpapers/bagel-03.jpg.thumb.jpg" alt="bagel-03">
279279
</a>
280280
</div>
281281
<div class="gallery__item">
282282
<a href="images/wallpapers/bagel-04.jpg">
283-
<img src="images/wallpapers/bagel-04.jpg" alt="bagel-04">
283+
<img src="images/wallpapers/bagel-04.jpg.thumb.jpg" alt="bagel-04">
284284
</a>
285285
</div>
286286
</div>
@@ -504,8 +504,8 @@ <h2 id="contact">Contact</h2>
504504
<script src="../js/masonry.min.js"></script>
505505
<script src="../js/imagesloaded.min.js"></script>
506506
<script>
507-
// Add masonry layout on the galleries.
508507
document.addEventListener('DOMContentLoaded', function onContentLoaded() {
508+
// Add masonry layout on the galleries.
509509
var galleries = document.querySelectorAll('.gallery');
510510

511511
for (var i = 0; i < galleries.length; i++) {
@@ -519,7 +519,47 @@ <h2 id="contact">Contact</h2>
519519
});
520520
})(i);
521521
}
522-
})
522+
523+
// Add mini-player to gifs.
524+
var gifLinks = document.querySelectorAll('a[href$=".gif"]');
525+
for (var i = 0; i < gifLinks.length; i++) {
526+
(function (index) {
527+
var link = gifLinks[index];
528+
var img = link.querySelector('img');
529+
530+
// Don't add the mini-player if no thumbnail.
531+
// It's already a gif, so no need to turn it on.
532+
if (img.src.indexOf('.thumb.jpg') === -1) {
533+
return
534+
}
535+
536+
link.className = 'show-overlay'
537+
538+
link.onclick = function (e) {
539+
// Make it work on IE8.
540+
if (e.preventDefault) {
541+
const openLinkInBackground = e.ctrlKey || e.metaKey;
542+
543+
// Stop default behavior, except if ctrl/cmd modifier is used.
544+
// In this case, we want the link to go through and open
545+
// its target in a background tab.
546+
if (!openLinkInBackground) e.preventDefault();
547+
e.stopPropagation();
548+
} else {
549+
// We don't care for the special background tab behavior on old IE.
550+
e.returnValue = false;
551+
}
552+
553+
// Remove overlay and remove thumbnail section of the image.
554+
link.className = '';
555+
img.src = img.src.replace('.thumb.jpg', '');
556+
557+
// Remove event listener after first trigger.
558+
link.onclick = null;
559+
}
560+
}(i));
561+
}
562+
});
523563
</script>
524564

525565
<script src="../js/hamburger.js"></script>

0 commit comments

Comments
 (0)