dece
cbe0446382
EMLG does not generate the HTML file anymore, users are invited to copy the provided index.html and use it as they see fit.
106 lines
3.6 KiB
HTML
106 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title></title>
|
|
<style>
|
|
body { background: black; }
|
|
/* 4 columns by default */
|
|
.masonry { margin: auto; width: 1470px; }
|
|
.masonry-item img { margin-bottom: 10px; width: 360px; }
|
|
/* 3 columns on small desktop screens */
|
|
@media only screen and (max-width: 1500px) { .masonry { width: 1100px; } }
|
|
/* 2 columns on medium-size screens */
|
|
@media only screen and (max-width: 1200px) { .masonry { width: 730px; } }
|
|
/* 1 column on mobile */
|
|
@media only screen and (max-width: 768px) {
|
|
.masonry { width: 100%; }
|
|
.masonry-item { width: 100%; }
|
|
.masonry-item img { width: 100%; }
|
|
}
|
|
</style>
|
|
<!-- Replace the following link with your own if you do not wish to use CDNs. -->
|
|
<link rel="stylesheet"
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css"
|
|
integrity="sha512-ZKX+BvQihRJPA8CROKBhDNvoc2aDMOdAlcm7TUQY+35XYtrd3yh95QOOhsPDQY9QnKE0Wqag9y38OIgEvb88cA=="
|
|
crossorigin="anonymous"
|
|
referrerpolicy="no-referrer" />
|
|
</head>
|
|
<body>
|
|
<div class="masonry"></div>
|
|
|
|
<!-- Replace the following links with your own if you do not wish to use CDNs. -->
|
|
|
|
<!-- jQuery -->
|
|
<script
|
|
src="https://code.jquery.com/jquery-3.6.1.min.js"
|
|
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
|
|
crossorigin="anonymous"></script>
|
|
<!-- Masonry & ImagesLoaded -->
|
|
<script src="https://unpkg.com/masonry-layout@4.2.2/dist/masonry.pkgd.min.js"></script>
|
|
<script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script>
|
|
<!-- Lightbox2 -->
|
|
<script
|
|
src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"
|
|
integrity="sha512-k2GFCTbp9rQU412BStrcD/rlwv1PYec9SNrkbQlo6RZCf75l6KcC3UwDY8H5n5hl4v77IDtIPwOk9Dqjs/mMBQ=="
|
|
crossorigin="anonymous"
|
|
referrerpolicy="no-referrer"></script>
|
|
|
|
<script>
|
|
function initMasonry(json, baseUrl) {
|
|
var $grid = $('.masonry');
|
|
for (var i = 0; i < json.length; i++) {
|
|
var entry = json[i];
|
|
var $img = $(document.createElement('img'));
|
|
var imageSrc = baseUrl + entry.src;
|
|
var thumbSrc = entry.thumb ? baseUrl + entry.thumb : imageSrc;
|
|
$img.attr('src', thumbSrc);
|
|
|
|
var $link = $(document.createElement('a'));
|
|
$link.attr({
|
|
'href': imageSrc,
|
|
'data-lightbox': 'gallery',
|
|
'data-title': entry.title,
|
|
});
|
|
$link.append($img);
|
|
|
|
var $container = $(document.createElement('div'));
|
|
$container.addClass('masonry-item');
|
|
$container.append($link);
|
|
|
|
$grid.append($container);
|
|
}
|
|
|
|
$grid.masonry({
|
|
itemSelector: '.masonry-item',
|
|
columnWidth: 360,
|
|
gutter: 10,
|
|
});
|
|
|
|
$grid.imagesLoaded().progress(() => $grid.masonry('layout'));
|
|
}
|
|
|
|
$(document).ready(() => {
|
|
// Uncomment this block to load image data remotely, using the URL
|
|
// in the current URL fragment.
|
|
/*/
|
|
var dataUrl = location.hash.substring(1);
|
|
var dirUrl = dataUrl.substring(0, dataUrl.lastIndexOf("/") + 1);
|
|
fetch(location.hash.substring(1))
|
|
.then(response => response.json())
|
|
.then(json => initMasonry(json, dirUrl));
|
|
//*/
|
|
|
|
// Uncomment this block to use embed data.
|
|
/*/
|
|
var data = {}; // set this to the content of data.json.
|
|
var dirUrl = ""; // set this to the directory where images are stored.
|
|
initMasonry(data, dirUrl);
|
|
//*/
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|