Files
Personal-Website-Project/static/script/image_viewer.js

69 lines
2.5 KiB
JavaScript

document.addEventListener("DOMContentLoaded", () => {
const images = Array.from(document.getElementsByTagName('img'));
images.forEach(image => {
image.style.cursor = 'pointer';
image.addEventListener("click", function (){
const fullScreenDiv = document.createElement("div");
fullScreenDiv.style.position = "fixed";
fullScreenDiv.style.top = 0;
fullScreenDiv.style.left = 0;
fullScreenDiv.style.width = "100%";
fullScreenDiv.style.height = "100%";
fullScreenDiv.style.backgroundColor = "rgba(0, 0, 0, 0.8)";
fullScreenDiv.style.display = "flex";
fullScreenDiv.style.justifyContent = "center";
fullScreenDiv.style.alignItems = "center";
fullScreenDiv.style.zIndex = 1000;
const fullScreenImage = document.createElement("img");
fullScreenImage.src = image.src;
fullScreenImage.style.maxWidth = "90%";
fullScreenImage.style.maxHeight = "90%";
fullScreenImage.style.boxShadow = "0 4px 10px rgba(0, 0, 0, 0.5)";
fullScreenImage.style.borderRadius = "10px";
fullScreenImage.style.cursor = 'pointer';
fullScreenDiv.appendChild(fullScreenImage);
fullScreenDiv.addEventListener("click", () => {
document.body.removeChild(fullScreenDiv);
});
document.body.appendChild(fullScreenDiv);
});
});
});
function copyToClipboard(button) {
// Find the <pre> block (the parent of the button)
const preBlock = button.closest('pre');
// Get the text content of the <code> inside the <pre> block
const codeContent = preBlock.querySelector('code').innerText;
// Create a temporary textarea to copy the content
const tempTextArea = document.createElement('textarea');
tempTextArea.value = codeContent;
// Append the textarea to the document (it needs to be in the DOM to work)
document.body.appendChild(tempTextArea);
// Select the text inside the textarea
tempTextArea.select();
// Execute the copy command
document.execCommand('copy');
// Remove the temporary textarea from the document
document.body.removeChild(tempTextArea);
// Optionally: Provide feedback to the user (e.g., change button text)
button.innerText = "Copied!";
// Reset the button text after 2 seconds
setTimeout(() => {
button.innerText = "Copy";
}, 2000);
}