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

image enlarging javascript complete

This commit is contained in:
emma 2024-12-19 15:36:50 -05:00
parent 3d70493606
commit ea7e533e01
1 changed files with 28 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
script/image-enlarger.js
View File

@ -7,16 +7,32 @@ const header = document.querySelector("header");
// 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";
@ -27,15 +43,21 @@ enlargeImg.forEach((img) => {
body.style.display = "block";
body.append(div);
div.addEventListener("click", () => {
// remove div and restore elements contained in body
// to their original display properties
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();
}
});
});
});