image enlarging javascript complete
This commit is contained in:
parent
3d70493606
commit
ea7e533e01
|
@ -7,16 +7,32 @@ const header = document.querySelector("header");
|
||||||
// after script tag. defer makes sure the script is loaded after
|
// after script tag. defer makes sure the script is loaded after
|
||||||
// everything else on the page has loaded
|
// everything else on the page has loaded
|
||||||
const footer = document.querySelector("footer");
|
const footer = document.querySelector("footer");
|
||||||
|
|
||||||
enlargeImg.forEach((img) => {
|
enlargeImg.forEach((img) => {
|
||||||
img.style.cursor = "pointer";
|
img.style.cursor = "pointer";
|
||||||
|
|
||||||
img.addEventListener("click", () => {
|
img.addEventListener("click", () => {
|
||||||
// make background for image
|
// make background for image
|
||||||
let div = document.createElement("div");
|
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.height = "100vh";
|
||||||
div.style.width = "auto";
|
div.style.width = "auto";
|
||||||
div.style.backgroundColor = "#000000";
|
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
|
// hide current page contents
|
||||||
main.style.display = "none";
|
main.style.display = "none";
|
||||||
nav.style.display = "none";
|
nav.style.display = "none";
|
||||||
|
@ -26,16 +42,22 @@ enlargeImg.forEach((img) => {
|
||||||
// remove display: grid from body and append div with enlarged image
|
// remove display: grid from body and append div with enlarged image
|
||||||
body.style.display = "block";
|
body.style.display = "block";
|
||||||
body.append(div);
|
body.append(div);
|
||||||
|
|
||||||
div.addEventListener("click", () => {
|
const removeDiv = () => {
|
||||||
// remove div and restore elements contained in body
|
|
||||||
// to their original display properties
|
|
||||||
div.remove();
|
div.remove();
|
||||||
body.style.display = "grid";
|
body.style.display = "grid";
|
||||||
main.style.display = "block";
|
main.style.display = "block";
|
||||||
nav.style.display = "block";
|
nav.style.display = "block";
|
||||||
header.style.display = "flex";
|
header.style.display = "flex";
|
||||||
footer.style.display = "flex";
|
footer.style.display = "flex";
|
||||||
});
|
};
|
||||||
|
|
||||||
|
div.addEventListener("click", removeDiv);
|
||||||
|
|
||||||
|
body.addEventListener("keydown", (e) => {
|
||||||
|
if (e.key === "x") {
|
||||||
|
removeDiv();
|
||||||
|
}
|
||||||
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue