86 lines
4.1 KiB
JavaScript
86 lines
4.1 KiB
JavaScript
const 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.",
|
|
"baxter-box.png": "Baxter loves his boxes, and can often be found relaxing or sleeping in one. We had quite a few at one point!",
|
|
"baxter-flop.png": "Baxter shows ultimate comfiness by flopping upside down. A sign that he is very happy and very cozy.",
|
|
"baxter-grumpy.png": "Baxter rarely gives this look and this photo was awhile ago. I'm not sure what he might've been upset about",
|
|
"baxter-kitten.png": "Baxter as a kitten was a lot of fun and work. I do really get a kick out of how big his paws were though!",
|
|
"baxter-looking.png": "Baxter is quite good at noticing the camera. Sometimes that means I miss good pictures, but sometimes you get great ones!",
|
|
"baxter-sitting.png": "This is just overall a good photo. Seems like Baxter might be making a run for office with this one!",
|
|
"baxter-wall.png": "In the apartment he often liked to stretch against this wall. I think he liked the sunlight on his stomach. Typical cat!",
|
|
};
|
|
|
|
let icons = document.querySelectorAll(".clickable-image");
|
|
|
|
icons.forEach((icon) => {
|
|
icon.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 = icon.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/${icon.querySelector("figcaption").textContent}`;
|
|
image.style.height = "500px";
|
|
image.style.width = "auto";
|
|
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[icon.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";
|
|
});
|
|
});
|
|
}); |