78 lines
3.2 KiB
JavaScript
78 lines
3.2 KiB
JavaScript
let icon = document.querySelectorAll(".clickable-image");
|
|
|
|
let descriptions = {
|
|
"baxter-stare.png": "Baxter lovingly staring at the camera on a sunny day in the apartment. One of my favorite photos of him. He would have been 6 or 7 around this time.",
|
|
};
|
|
|
|
icon.forEach((item) => {
|
|
item.addEventListener("click", () => {
|
|
|
|
let desktop = document.querySelector("body");
|
|
|
|
// begin creation of window that will display image
|
|
let imageWindow = document.createElement("div");
|
|
imageWindow.classList.add("window");
|
|
|
|
// titlebar creation
|
|
let titleBar = document.createElement("div");
|
|
titleBar.classList.add("title-bar");
|
|
|
|
let closeButton = document.createElement("button");
|
|
closeButton.ariaLabel = "Close";
|
|
closeButton.classList.add("close");
|
|
|
|
titleBar.appendChild(closeButton);
|
|
|
|
let windowTilte = document.createElement("h2");
|
|
windowTilte.classList.add("title");
|
|
windowTilte.textContent = item.querySelector("figcaption").textContent;
|
|
titleBar.appendChild(windowTilte);
|
|
|
|
let separator = document.createElement("div");
|
|
separator.classList.add("separator");
|
|
imageWindow.appendChild(titleBar);
|
|
imageWindow.appendChild(separator);
|
|
|
|
// image will reside in this part of the window
|
|
let windowPane = document.createElement("div");
|
|
windowPane.classList.add("window-pane");
|
|
windowPane.style.display = "flex";
|
|
windowPane.style.justifyContent = "center";
|
|
|
|
let figure = document.createElement("figure");
|
|
let image = document.createElement("img");
|
|
image.src = `img/${item.querySelector("figcaption").textContent}`;
|
|
image.height = "700";
|
|
figure.style.marginTop = "0.75rem";
|
|
figure.style.display = "flex";
|
|
figure.style.flexDirection = "column";
|
|
figure.style.alignItems = "center";
|
|
figure.appendChild(image);
|
|
|
|
let figureCaption = document.createElement("figcaption");
|
|
figureCaption.textContent = `${descriptions[item.querySelector("figcaption").textContent]}`;
|
|
figureCaption.style.textAlign = "center";
|
|
figureCaption.style.marginTop = "1rem";
|
|
figure.appendChild(figureCaption);
|
|
|
|
// add everything together backwards and hide the window
|
|
// with the image icons in it, then set the gird properties
|
|
// for the image viewing window so it is in the right place
|
|
// the dialog on the right needs set otherwise it will
|
|
// move itself over
|
|
// append image window to body to show image at larger size
|
|
windowPane.appendChild(figure);
|
|
imageWindow.appendChild(windowPane);
|
|
document.querySelector(".window").style.display = "none";
|
|
imageWindow.style.gridColumn = "1";
|
|
imageWindow.style.gridRow = "1";
|
|
let = aboutThisCat = document.querySelector(".site-info");
|
|
aboutThisCat.style.gridColumn = "2";
|
|
desktop.appendChild(imageWindow);
|
|
|
|
closeButton.addEventListener("click", () => {
|
|
imageWindow.remove();
|
|
document.querySelector(".window").style.display = "block";
|
|
});
|
|
});
|
|
}); |