Add images and thumbnails, and lightbox code
Images generated with this:
for file in *.jpg; do magick $file -resize 600x600 -quality 80 thumbs/$file; done
BIN
images/alans.jpg
Normal file
|
After Width: | Height: | Size: 6.4 MiB |
BIN
images/castle.jpg
Normal file
|
After Width: | Height: | Size: 4.9 MiB |
BIN
images/eastbarrel.jpg
Normal file
|
After Width: | Height: | Size: 6.4 MiB |
BIN
images/fridge.jpg
Normal file
|
After Width: | Height: | Size: 5.1 MiB |
BIN
images/hummock.jpg
Normal file
|
After Width: | Height: | Size: 6.3 MiB |
BIN
images/ironcastle.jpg
Normal file
|
After Width: | Height: | Size: 6.9 MiB |
BIN
images/irontree.jpg
Normal file
|
After Width: | Height: | Size: 6.6 MiB |
BIN
images/ladder.jpg
Normal file
|
After Width: | Height: | Size: 6.3 MiB |
BIN
images/point.jpg
Normal file
|
After Width: | Height: | Size: 4.9 MiB |
BIN
images/ridge.jpg
Normal file
|
After Width: | Height: | Size: 6 MiB |
BIN
images/sofa.jpg
Normal file
|
After Width: | Height: | Size: 4.9 MiB |
BIN
images/threeleggedbarrel.jpg
Normal file
|
After Width: | Height: | Size: 5.7 MiB |
BIN
images/thumbs/alans.jpg
Normal file
|
After Width: | Height: | Size: 78 KiB |
BIN
images/thumbs/castle.jpg
Normal file
|
After Width: | Height: | Size: 56 KiB |
BIN
images/thumbs/eastbarrel.jpg
Normal file
|
After Width: | Height: | Size: 79 KiB |
BIN
images/thumbs/fridge.jpg
Normal file
|
After Width: | Height: | Size: 57 KiB |
BIN
images/thumbs/hummock.jpg
Normal file
|
After Width: | Height: | Size: 74 KiB |
BIN
images/thumbs/ironcastle.jpg
Normal file
|
After Width: | Height: | Size: 84 KiB |
BIN
images/thumbs/irontree.jpg
Normal file
|
After Width: | Height: | Size: 79 KiB |
BIN
images/thumbs/ladder.jpg
Normal file
|
After Width: | Height: | Size: 76 KiB |
BIN
images/thumbs/point.jpg
Normal file
|
After Width: | Height: | Size: 58 KiB |
BIN
images/thumbs/ridge.jpg
Normal file
|
After Width: | Height: | Size: 81 KiB |
BIN
images/thumbs/sofa.jpg
Normal file
|
After Width: | Height: | Size: 55 KiB |
BIN
images/thumbs/threeleggedbarrel.jpg
Normal file
|
After Width: | Height: | Size: 74 KiB |
BIN
images/thumbs/tupperware.jpg
Normal file
|
After Width: | Height: | Size: 74 KiB |
BIN
images/tupperware.jpg
Normal file
|
After Width: | Height: | Size: 6.6 MiB |
79
map.html
|
|
@ -56,12 +56,89 @@
|
||||||
#popupcontainer .leaflet-popup-content {
|
#popupcontainer .leaflet-popup-content {
|
||||||
width: initial;
|
width: initial;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* BEGIN lightbox */
|
||||||
|
|
||||||
|
/* simplified from https://jekyllcodex.org/without-plugin/lightbox/ */
|
||||||
|
#lightbox {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
background: rgba(0,0,0,0.85);
|
||||||
|
z-index: 9999999;
|
||||||
|
line-height: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#lightbox .img {
|
||||||
|
position: relative;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%,-50%);
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
}
|
||||||
|
#lightbox .img img {
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 1200px) {
|
||||||
|
#lightbox .img {
|
||||||
|
max-width: 1200px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (min-height: 1200px) {
|
||||||
|
#lightbox .img {
|
||||||
|
max-height: 1200px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#lightbox #close {
|
||||||
|
height: 50px;
|
||||||
|
width: 50px;
|
||||||
|
position: fixed;
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: none;
|
||||||
|
z-index: 99;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
#lightbox #close:after, #lightbox #close:before {
|
||||||
|
position: absolute;
|
||||||
|
margin-top: 22px;
|
||||||
|
margin-left: 14px;
|
||||||
|
content: "";
|
||||||
|
height: 3px;
|
||||||
|
background: white;
|
||||||
|
width: 23px;
|
||||||
|
transform-origin: 50% 50%;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
}
|
||||||
|
#lightbox #close:after {
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
#lightbox, #lightbox * {
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
/* END lightbox */
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="map"></div>
|
<div id="map"></div>
|
||||||
<div id="popupcontainer" class="leaflet-container"></div>
|
<div id="popupcontainer" class="leaflet-container"></div>
|
||||||
|
<div id="lightbox" onclick="this.style.display = 'none';"></div>
|
||||||
<script>
|
<script>
|
||||||
|
function displayLightboxOnClick(target, event) {
|
||||||
|
event.preventDefault();
|
||||||
|
document.getElementById('lightbox').innerHTML = `
|
||||||
|
<a id="close"></a>
|
||||||
|
<div class="img" style="background: url('${target.getAttribute('href')}') center center / contain no-repeat;">
|
||||||
|
<img src="${target.getAttribute('href')}">
|
||||||
|
</div>`;
|
||||||
|
document.getElementById('lightbox').style.display = 'block';
|
||||||
|
}
|
||||||
(async function() {
|
(async function() {
|
||||||
const map = L.map('map', {
|
const map = L.map('map', {
|
||||||
minZoom: 12,
|
minZoom: 12,
|
||||||
|
|
@ -134,7 +211,7 @@
|
||||||
attributesString += '</dl>';
|
attributesString += '</dl>';
|
||||||
popupContentWrapper.innerHTML = `
|
popupContentWrapper.innerHTML = `
|
||||||
<h2>${stand.name}</h2>
|
<h2>${stand.name}</h2>
|
||||||
<img style="width: min(80vw, 300px);" src="images/${stand.image}">
|
<a href="images/${stand.image}" onclick="displayLightboxOnClick(this, event)"><img style="width: min(80vw, 300px);" src="images/thumbs/${stand.image}"></a>
|
||||||
${attributesString}
|
${attributesString}
|
||||||
`;
|
`;
|
||||||
let popupOptions = {};
|
let popupOptions = {};
|
||||||
|
|
|
||||||