如何使用 HTML CSS 和 JavaScript 创建图像灯箱画廊?
在当今计算技术时代，视觉媒体在吸引和留住观众注意力方面的作用不容小觑。在网页上展示图像的灯箱画廊是一种有效的机制，它通过提供用户友好且简单的界面来促进用户互动。为什么不尝试一下这个工具，亲自了解它如何提升您网站的性能呢?借助 HTML、CSS 和 JavaScript，您可以制作一个定制的图像灯箱画廊，并可轻松集成到网站中。在本篇博文中，我们将采用渐进式流程来打造一个基本的图像灯箱画廊，并可根据您的个人需求进行微调。无论您是初出茅庐的 Web 开发人员还是经验丰富的 Web 开发人员，本指南都将为您提供入门的基本知识。
图片灯箱图库
图片灯箱图库是网站上使用的功能，用于在网页上叠加显示更大尺寸的图片，并可选择在多张图片之间导航。用户通常通过单击缩略图来触发灯箱，然后全尺寸图片就会出现在灯箱中。灯箱通常包括一些控件，例如用于在图片之间导航的箭头、用于退出灯箱的关闭按钮，以及可能的图片标题。图片灯箱图库的目的是为用户提供一种简洁、优雅的方式来查看网站上的图片，而无需离开主页。图片灯箱画廊通常用于显示产品图片、图片库和其他类型的视觉内容。
方法
我们将使用 HTML、CSS 和 JavaScript 创建图片灯箱画廊。HTML 结构分为两个主要部分 - 画廊和灯箱。画廊部分包含一组显示为缩略图的图像，包裹在"a"标签内，而灯箱部分是一个覆盖页面并显示完整图像的容器。CSS 设置画廊和灯箱的样式。画廊部分设置为显示为弹性，并在超出容器宽度时环绕。灯箱部分设置为深色背景颜色，并将其内容水平和垂直居中。灯箱图像的最大宽度和高度设置为灯箱容器的 90%。关闭按钮具有绝对定位，设置为距离灯箱顶部和右侧 20 像素，字体大小为 30 像素，背景颜色为白色。 JavaScript 代码在画廊和关闭按钮上设置事件侦听器，分别用于打开和关闭灯箱。单击图像缩略图时，将显示灯箱，并将全尺寸图像设置为灯箱图像的来源。单击关闭按钮时，灯箱再次隐藏。
要理解这个密码，我们将仔细研究代码的 HTML、CSS 和 JavaScript 部分。描述元素使用网格布局中的弹性框样式进行构造，单击后，灯箱将显示为一个包裹整个屏幕的实体。它由一个特定的图像和一个关闭按钮组成，显示半透明的背景。在用户选择画廊中的图像后，JavaScript 会监听点击事件并在灯箱中显示相关图像，使用统一资源定位器作为图像标识符。单击关闭按钮会启动额外的单击事件，最终导致灯箱消失，用户恢复到画廊。
示例
以下是我们将在此示例中介绍的完整代码 -
<!DOCTYPE html>
<html>
<head>
<style>
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.gallery a {
display: block;
margin: 10px;
}
.gallery img{
height: 120px;
width: 120px;
}
.lightbox {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
justify-content: center;
align-items: center;
}
.lightbox img {
max-width: 90%;
max-height: 90%;
}
.close {
position: absolute;
top: 20px;
right: 20px;
font-size: 30px;
background-color: white;
border: none;
padding: 10px 15px;
cursor: pointer;
}
</style>
</head>
<body>
<h4>How to Create Image Lightbox Gallery using HTML CSS and JavaScript?</h4>
<div class="gallery">
<a href="image1.jpg">
<img src="https://picsum.photos/seed/picsum/200/300" alt="Image 1">
</a>
<a href="image2.jpg">
<img src="https://picsum.photos/id/237/200/300" alt="Image 2">
</a>
</div>
<div class="lightbox">
<img src="">
<button class="close">X</button>
</div>
<script>
const gallery = document.querySelector('.gallery');
const lightbox = document.querySelector('.lightbox');
const close = document.querySelector('.close');
const lightboxImg = lightbox.querySelector('img');
gallery.addEventListener('click', function (event) {
event.preventDefault();
lightbox.style.display = 'flex';
lightboxImg.src = event.target.src || event.target.parentNode.href;
});
close.addEventListener('click', function () {
lightbox.style.display = 'none';
});
</script>
</body>
</html>
结论
总之，使用 HTML、CSS 和 JavaScript 建立视觉灯箱画廊是一项相对简单的任务，可提供充足的个性化前景。通过实施本文中列出的指令，您可以快速制作一个视觉灯箱画廊，以满足您网站的需求。HTML、CSS 和 JavaScript 的融合为建立动态、交互式图像画廊奠定了坚实的基础，这将增强您网站的吸引力和可访问性。无论您是新手还是经验丰富的网站设计师，我都希望本指南为您提供必要的启发和独创性，以设计您自己的独家图像灯箱画廊。因此，今天就开始您的旅程，为您的网站赋予全新的视觉影响力!
