57 lines
2.1 KiB
JavaScript
57 lines
2.1 KiB
JavaScript
let icon = document.querySelectorAll(".clickable-image");
|
|
|
|
icon.forEach((item) => {
|
|
item.addEventListener("click", () => {
|
|
|
|
|
|
let desktop = document.querySelector("body");
|
|
|
|
let imageWindow = document.createElement("div");
|
|
imageWindow.classList.add("window");
|
|
|
|
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);
|
|
|
|
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 = "1.5rem";
|
|
figure.appendChild(image);
|
|
|
|
let figureCaption = document.createElement("figcaption");
|
|
figureCaption.textContent = `${item.querySelector("figcaption").textContent}`;
|
|
figureCaption.style.textAlign = "center";
|
|
figure.appendChild(figureCaption);
|
|
|
|
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);
|
|
});
|
|
}); |