点击图片全屏(Wordpress Image )
点击图片全屏(Wordpress Image )
提问于 2022-02-10 11:29:49
我也有类似的问题(link)。我想编辑我的图像旋转木马在我的wordpress页面，以便当我点击一个图像，它将显示在全屏。如果可能的话，用关闭按钮。HTMl是：
<html>
<head>
<title>Fullscreen Image</title>
</head>
<body>
<div class="swiper-slide">
<img class="swiper-slide-image" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Lichtenstein_img_processing_test.png">
</div>
<div class="swiper-slide">
<img class="swiper-slide-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/1_aerial_yangshuo_panorama_2017.jpg/500px-1_aerial_yangshuo_panorama_2017.jpg">
</div>
</body>
</html>
有人能给我举一个CSS或JS的例子吗?我怎么能做到(我对JS或jQuery不太了解)？
提前感谢
回答 1
Stack Overflow用户
发布于 2022-02-10 12:54:20
您需要执行一些棘手的操作。首先，你需要能够在全屏上显示东西.为此，我设置了backgroundImage of body，并在body获得fullscreen类后隐藏了其他所有内容。但是我们需要避免传播事件，因此，如果在全屏模式下单击图像，那么我们可以恢复正常的视图。
function makeFullScreen(event, image) {
event.stopPropagation();
event.source;
document.body.style.backgroundImage = `url("${image.src}")`;
document.body.classList.add("fullscreen");
}
function hideFullScreen() {
document.body.style.backgroundImage = '';
document.body.classList.remove("fullscreen");
}body.fullscreen {
background-size: cover;
background-repeat: no-repeat;
}
body.fullscreen * {
display: none;
}<html onclick="hideFullScreen()">
<head>
<title>Fullscreen Image</title>
</head>
<body>
<div class="swiper-slide">
<img class="swiper-slide-image" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Lichtenstein_img_processing_test.png" onclick="makeFullScreen(event, this);">
</div>
<div class="swiper-slide">
<img class="swiper-slide-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/1_aerial_yangshuo_panorama_2017.jpg/500px-1_aerial_yangshuo_panorama_2017.jpg" onclick="makeFullScreen(event, this);">
</div>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71064319
复制相关文章
相似问题
腾讯云开发者
