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 {
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<div id="popupcontainer" class="leaflet-container"></div>
|
||||
<div id="lightbox" onclick="this.style.display = 'none';"></div>
|
||||
<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() {
|
||||
const map = L.map('map', {
|
||||
minZoom: 12,
|
||||
|
|
@ -134,7 +211,7 @@
|
|||
attributesString += '</dl>';
|
||||
popupContentWrapper.innerHTML = `
|
||||
<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}
|
||||
`;
|
||||
let popupOptions = {};
|
||||
|
|
|
|||