Image Gallery with Full-Screen Viewer
himanshi Gupta
Posted on September 2, 2024
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:
`
`
viewFullScreen
<div class="image-item">
<img src="https://tse1.mm.bing.net/th?id=OIP.VyeGOidyaY2qOUtlJD55BgHaFE&pid=Api&P=0&h=180" alt="">
<button onclick="viewFullScreen('https://tse1.mm.bing.net/th?id=OIP.VyeGOidyaY2qOUtlJD55BgHaFE&pid=Api&P=0&h=180')">viewFullScreen</button>
</div>
<div class="image-item">
<img src="https://tse2.mm.bing.net/th?id=OIP._s4_i4HP9aomqEkBlQK8IgHaJQ&pid=Api&P=0&h=180" alt="">
<button onclick="viewFullScreen('https://tse2.mm.bing.net/th?id=OIP._s4_i4HP9aomqEkBlQK8IgHaJQ&pid=Api&P=0&h=180')">viewFullScreen</button>
</div>
<div class="image-item">
<img src="https://tse4.mm.bing.net/th?id=OIP.awCvJ1gReYh4tWseENeY8AHaE_&pid=Api&P=0&h=180" alt="">
<button onclick="viewFullScreen('https://tse4.mm.bing.net/th?id=OIP.awCvJ1gReYh4tWseENeY8AHaE_&pid=Api&P=0&h=180')">viewFullScreens</button>
</div>
`
sript.js
function viewFullScreen(imageSrc) {
const imageWindow = window.open("", "_blank", "width=800,height=600");
imageWindow.document.write(
<html>
<head>
<title>Full-Screen Image</title>
<style>
body, html {
margin: 0;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
}
img {
max-width: 100%;
max-height: 100%;
}
button {
position: absolute;
top: 20px;
right: 20px;
padding: 10px;
background-color: #fff;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<img src="${imageSrc}" alt="Full-Screen Image">
<button onclick="window.close()">Close</button>
</body>
</html>
}
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:
Posted on September 2, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.