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>
|
||
|
|
|