How do I make an image full screen on click?
Question
I'm making a gallery and I want each photo to go fullscreen when you click on it like this:
Currently, I have a click handler on each image that adds a class zoom to the clicked image. The CSS selectors I wrote only blow the image up and don't have it centered on the full page like in the example. Here is my code:
.gallery img { width: 100%; height: 100%; object-fit: cover; align-content: center; object-position: center; transition: transform ease-in-out 0.5s; }.zoom { z-index: 1; transform: scale(1.5); display: block; margin-left: auto; margin-right: auto; }
<body onload="getPics()"> <div class="container"> <h1>Photo Gallery</h1> <div class="gallery"> <img src="https://images.unsplash.com/photo-1543517515-d6ff15a98642?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjQ0NDc3fQ&s=493802e93ec426171750ac2291e2867e" /><img src="https://images.unsplash.com/photo-1543517515-d6ff15a98642?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjQ0NDc3fQ&s=493802e93ec426171750ac2291e2867e" /><img src="https://images.unsplash.com/photo-1543517515-d6ff15a98642?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjQ0NDc3fQ&s=493802e93ec426171750ac2291e2867e" /> </div> </div> </body>
How can I change the zoom CSS so the image goes into a full screen mode?
3 answers
solution1
2 2022-11-20 01:46:53
Here's a jQuery "one-liner" that makes all images on the page clickable to go fullscreen:
$(document).ready(function(){$("img").click(function(){this.requestFullscreen()})});
solution2
1 2021-06-03 05:38:09
I suggest look at intensejs library: https://github.com/tholman/intense-images
It's fast and easy implementation that will fit your needs.
solution3
1 ACCPTED 2021-06-03 06:14:02
It's difficult to do this with zoom - you have to calculate depending on the current viewport etc dimensions and reposition the image.
Another way of doing it is by having an element that fills the whole viewport and has a high z-index but is normally not displayed. When the user clicks on an image it is set as the background of this large element, with background-size contain so it always exactly fits.
In this snippet clicking on the enlarged image gets rid of it.
function getPics() {} //just for this demo const imgs = document.querySelectorAll('.gallery img'); const fullPage = document.querySelector('#fullpage'); imgs.forEach(img => { img.addEventListener('click', function() { fullPage.style.backgroundImage = 'url(' + img.src + ')'; fullPage.style.display = 'block'; }); });
#fullpage { display: none; position: absolute; z-index: 9999; top: 0; left: 0; width: 100vw; height: 100vh; background-size: contain; background-repeat: no-repeat no-repeat; background-position: center center; background-color: black; }
<body onload="getPics()"> <div class="container"> <h1>Photo Gallery</h1> <div class="gallery"> <img src="https://images.unsplash.com/photo-1543517515-d6ff15a98642?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjQ0NDc3fQ&s=493802e93ec426171750ac2291e2867e" /><img src="https://images.unsplash.com/photo-1543517515-d6ff15a98642?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjQ0NDc3fQ&s=493802e93ec426171750ac2291e2867e" /><img src="https://images.unsplash.com/photo-1543517515-d6ff15a98642?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjQ0NDc3fQ&s=493802e93ec426171750ac2291e2867e" /> </div> </div> <div id="fullpage" onclick="this.style.display='none';"></div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.