ebby/Bluewaterblog
1
0
Fork 0
Code Issues 10 Pull requests Projects Releases Packages Wiki Activity Actions

fix script not working
All checks were successful
Build and Deploy Astro App / build_and_deploy (push) Successful in 50s
Details

Browse source
This commit is contained in:
ebby 2026-08-22 07:51:18 +02:00
parent 9de57af445
commit d84c5a9973
2 changed files with 24 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
blog/public/scripts/image-modal.js Normal file
View file

@ -0,0 +1,23 @@
const backdrop = document.querySelector("#image-backdrop");
const preview = document.querySelector("#image-preview");
if (backdrop instanceof HTMLElement && preview instanceof HTMLImageElement) {
document.addEventListener("click", (event) => {
if (!(event.target instanceof Element)) return;
if (!backdrop.hidden && backdrop.contains(event.target)) {
backdrop.hidden = true;
document.body.style.overflow = "";
return;
}
const image = event.target.closest("article img");
if (!(image instanceof HTMLImageElement)) return;
preview.src = image.currentSrc || image.src;
preview.alt = image.alt;
backdrop.hidden = false;
document.body.style.overflow = "hidden";
});
}

26
blog/src/layouts/BlogPostLayout.astro
View file

@ -43,31 +43,7 @@ const localeDate = formatLocalizedDateString(frontmatter.date);
</div>
</Main>
<script>
const backdrop = document.querySelector("#image-backdrop");
const preview = document.querySelector("#image-preview");
if (backdrop instanceof HTMLElement && preview instanceof HTMLImageElement) {
document.addEventListener("click", (event) => {
if (!(event.target instanceof Element)) return;
if (!backdrop.hidden && backdrop.contains(event.target)) {
backdrop.hidden = true;
document.body.style.overflow = "";
return;
}
const image = event.target.closest("article img");
if (!(image instanceof HTMLImageElement)) return;
preview.src = image.currentSrc || image.src;
preview.alt = image.alt;
backdrop.hidden = false;
document.body.style.overflow = "hidden";
});
}
</script>
<script is:inline src="/scripts/image-modal.js"></script>
<style>
article {