zepp/emmas.place
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

remove image enlarging script from project

Browse Source
This commit is contained in:
emma 2025-03-03 16:38:46 -05:00
parent ed91203119
commit be370cbbe9
2 changed files with 0 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/pages/life/self/entries/picrew.astro
View File

@ -85,7 +85,4 @@ const title = "emma's picrews"
<figcaption><a href=`${imageFourCreditUrl}` target="_blank">{imageFourCreditText}</a></figcaption>
</figure>
</div>
<script>
import "../../../../scripts/image-enlarger"
</script>
</BasicLayout>

64
src/scripts/image-enlarger.js
View File

@ -1,64 +0,0 @@
const enlargeImg = document.querySelectorAll(".enlarge");
const body = document.querySelector("body");
const main = document.querySelector("main");
const nav = document.querySelector("nav");
const header = document.querySelector("header");
// script tag needs defer attribute as footer is included by php
// after script tag. defer makes sure the script is loaded after
// everything else on the page has loaded
const footer = document.querySelector("footer");
enlargeImg.forEach((img) => {
img.style.cursor = "pointer";
img.addEventListener("click", () => {
// make background for image
let div = document.createElement("div");
div.style.display = "flex";
div.style.flexDirection = "column";
div.style.alignItems = "center";
div.style.justifyContent = "center";
div.style.height = "100vh";
div.style.width = "auto";
div.style.backgroundColor = "#000000";
// image element
let image = document.createElement("img");
image.src = img.src;
image.style.height = "80%";
image.style.width = "auto";
div.append(image);
let paragraph = document.createElement("p");
paragraph.textContent =
"Click anywhere on the image or the black background to close. You can also press the x key on your keyboard.";
paragraph.style.color = "#FFFFFF";
div.append(paragraph);
// hide current page contents
main.style.display = "none";
nav.style.display = "none";
footer.style.display = "none";
header.style.display = "none";
// remove display: grid from body and append div with enlarged image
body.style.display = "block";
body.append(div);
const removeDiv = () => {
div.remove();
body.style.display = "grid";
main.style.display = "block";
nav.style.display = "block";
header.style.display = "flex";
footer.style.display = "flex";
};
div.addEventListener("click", removeDiv);
body.addEventListener("keydown", (e) => {
if (e.key === "x") {
removeDiv();
}
});
});
});