Full-Screen Image

let's create an image gallery with full-screen viewer. for this topics you need to cover are: javascript basics javascript dom manipulation javascript window.open() and window.close() methods We'll be having a image gallery, having thumbnail images. and each thumbnail image will be having a 'view full screen' button' when the user will click on button a new screen will open showing the image on full screen. the user can close the full-screen and return to the gallery. below given is the implementation: ` > index.html: ` `

` > sript.js function viewFullScreen(imageSrc) { const imageWindow = window.open("", "_blank", "width=800,height=600"); imageWindow.document.write(` Full-Screen Image

`); } > style.css `#gallery{ display: flex; flex-wrap: wrap; gap: 10px; } .image-item{ position: relative; width: 150px; } .image-item img{ width: 100%; border-radius: 5px; } .image-item button{ position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); background-color: rgba(0,0,0,0.5); color: white; border: none; padding: 5px; cursor: pointer; } ` The result of the above implementation is: ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/atw6x0uoyvxqhx2gw98i.png) ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q4pw9o3ixdj0x8qbmbsu.png)

javascriptwindow

Image Gallery with Full-Screen Viewer

Join Our Newsletter. No Spam, Only the good stuff.