got lightbox working on .clickSpan

This commit is contained in:
Jonas Leder 2021-03-24 23:19:18 +01:00
parent ad31076b67
commit 5a06eaec9e
2 changed files with 5 additions and 6 deletions

View file

@ -1,15 +1,14 @@
import * as basicLightbox from 'basiclightbox' import * as basicLightbox from 'basiclightbox'
let images = document.getElementsByTagName("img"); let images = document.querySelectorAll("img, .clickSpan");
for(let i = 0; i < images.length; i++){ for(let i = 0; i < images.length; i++){
let element = images[i]; let element = images[i];
if(!(element.getAttribute("data-noPreview") === "true")) { if(!(element.getAttribute("data-noPreview") === "true")) {
element.onclick = () => { element.onclick = () => {
console.log("render");
const instance = basicLightbox.create(` const instance = basicLightbox.create(`
<img src="${element.src}"> <img src="${element.getAttribute("src")}">
`); `);
instance.show(() => console.log('lightbox now visible')) instance.show();
} }
} }
} }

View file

@ -6,8 +6,8 @@ include "internal/comments.php";
getHeader("Bildquellen", ""); getHeader("Bildquellen", "");
?> ?>
<ul> <ul>
<li><span class="clickSpan" onclick="createDialogImage('/img/bannerHome.webp')">Bild oben</span>: Photo by <a href="https://unsplash.com/@hishahadat?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Shahadat Rahman</a>&nbsp;on&nbsp;<a href="https://unsplash.com/s/photos/programmer?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></li> <li><span class="clickSpan" src='/img/bannerHome.webp'>Bild oben</span>: Photo by <a href="https://unsplash.com/@hishahadat?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Shahadat Rahman</a>&nbsp;on&nbsp;<a href="https://unsplash.com/s/photos/programmer?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></li>
<li><span class="clickSpan" onclick="createDialogImage('/img/bildHome.webp')">Bild Startseite</span>: Photo by&nbsp;<a href="https://unsplash.com/@grohsfabian?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Fabian Grohs</a>&nbsp;on&nbsp;<a href="https://unsplash.com/s/photos/programmer?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></li> <li><span class="clickSpan" src='/img/bildHome.webp'>Bild Startseite</span>: Photo by&nbsp;<a href="https://unsplash.com/@grohsfabian?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Fabian Grohs</a>&nbsp;on&nbsp;<a href="https://unsplash.com/s/photos/programmer?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></li>
</ul> </ul>
<?php <?php
getFooter(); getFooter();