Image Gallery

2b:null 2c:["$","title",null,{"children":"Untitled | Hamed Barzamini | Observable"}] 31:T43f,32:Tb51,{ const images = [ "https://apod.nasa.gov/apod/image/2105/GegenscheinBolide_Casado_1080.jpg", "https://apod.nasa.gov/apod/image/2105/UluruOrion_Liu_1080.jpg", "https://apod.nasa.gov/apod/image/1910/ClayCache_Curiosity_9990.jpg", "https://apod.nasa.gov/apod/image/2011/IC1848_Guenzel_960.jpg", "https://apod.nasa.gov/apod/image/1906/M13_and_HR_diag_updated6_1024.jpg", "https://apod.nasa.gov/apod/image/1709/LastRingPortrait_Cassini_4472.jpg", "https://apod.nasa.gov/apod/image/1707/AntarcticEclipse_bruenjes_650.jpg", "https://apod.nasa.gov/apod/image/1703/JWSTlightsout1024.jpg", "https://apod.nasa.gov/apod/image/1703/M42kaltseis_Cedic1024.jpg", "https://apod.nasa.gov/apod/image/1701/pinky_sun_beletsky1024y.jpg", "https://apod.nasa.gov/apod/image/1612/LowerMtSharp_Curiosity_1080_annotated.jpg" // Add more image URLs here ]; const captions = [ "It is commonly stated that the gegenschein was It is commonly stated that the gegenschein was .", "Uluru and Orion", "Clay Cache on Mars", "IC 1848: The Soul Nebula", "M13: The Great Globular Cluster in Hercules", "The Last Portrait of Saturn's Rings", "The 2017 Antarctic Eclipse", "JWST: Lights Out", "The Orion Nebula in Infrared from Hubble", "A Pink Sun Rising", "Curiosity Rover: Lower Mount Sharp on Mars" // Add corresponding captions here ]; const gallery = document.getElementById('gallery'); const overlay = document.getElementById('overlay'); const modalImage = document.getElementById('modal-image'); const modalCaption = document.getElementById('modal-caption'); // Create and append image elements to the gallery images.forEach((imageUrl, index) => { const imageContainer = document.createElement('div'); imageContainer.className = 'image-container'; const image = document.createElement('img'); image.className = 'image'; image.src = imageUrl; image.alt = captions[index]; const caption = document.createElement('div'); caption.className = 'caption'; caption.textContent = captions[index]; imageContainer.appendChild(image); imageContainer.appendChild(caption); // Add a click event listener to each image for enlarging imageContainer.addEventListener('click', () => { modalImage.src = imageUrl; modalCaption.textContent = captions[index]; overlay.style.display = 'flex'; }); gallery.appendChild(imageContainer); }); // Close the overlay when clicking anywhere outside the image overlay.addEventListener('click', (event) => { if (event.target === overlay) { overlay.style.display = 'none'; } }); // Close the overlay when clicking on the enlarged image modalImage.addEventListener('click', () => { overlay.style.display = 'none'; }); }33:[] 2f:{"id":"0842629b18952e7f","slug":null,"title":"Untitled","thumbnail":"17ab4a1c8cc03f2df3738390109d78c25c66f79b396853999b72fbffd078fdb0","access_level":"public","create_time":"$D2023-09-11T16:52:48.126Z","update_time":"$D2023-09-11T18:09:40.532Z","view_time":null,"first_public_time":"$D2023-09-11T16:52:48.126Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"6318f9ef8f09080d","login":"hbarzamini","name":"Hamed Barzamini","avatar_url":"https://avatars-next.observableusercontent.com/6bbe415c39c636d3bf25ce1f85d1e5b8844187d795884047ae18ee04d25a695a","tier":"starter_2024"},"version":64,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8259129fb117d602","login":"hbarzamini","name":"Hamed Barzamini","avatar_url":"https://avatars-next.observableusercontent.com/6bbe415c39c636d3bf25ce1f85d1e5b8844187d795884047ae18ee04d25a695a","tier":null}],"members":[{"type":"individual","id":"8259129fb117d602","login":"hbarzamini","name":"Hamed Barzamini","avatar_url":"https://avatars-next.observableusercontent.com/6bbe415c39c636d3bf25ce1f85d1e5b8844187d795884047ae18ee04d25a695a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Untitled","cells":[{"id":0,"value":"# Untitled","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":26,"value":"\n\n\n \n \n Image Gallery\n\n\n

\n \n

\n\n

\n \n

\n\n\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":32,"value":"$31","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":47,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"d3 = require('d3@6');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 30:"$2f:body"