WordPress 无插件实现优雅的灯箱效果

在网页设计中,灯箱效果是一种非常常见且受欢迎的展示图片或视频的方式。它能够为用户提供沉浸式的浏览体验,让内容更加突出和引人注目。通常实现灯箱效果需要借助第三方插件,但如果你的网站是基于 WordPress 搭建的,其实也可以不使用任何插件,通过纯 CSS 和 JavaScript 来实现这一功能。

WordPress 无插件灯箱效果的实现

要在 WordPress 网站上实现无插件灯箱效果,主要需要以下几个步骤:

1. HTML 结构设计:在页面中添加一个包含图片的容器,并在其外层添加一个遮罩层容器。
2. CSS 样式设置:为容器设置初始样式,包括定位、尺寸、背景色等;为遮罩层设置初始样式,包括定位、尺寸、背景色等。
3. JavaScript 交互实现:为图片容器添加点击事件,当点击时显示遮罩层并放大图片;当点击遮罩层时隐藏遮罩层并还原图片。

HTML 结构设计

首先,我们需要在页面中添加一个包含图片的容器,并在其外层添加一个遮罩层容器。HTML 结构如下:

<div class="lightbox-container">
  <img src="image.jpg" alt="Image" class="lightbox-image">
</div>
<div class="lightbox-overlay"></div>

CSS 样式设置

接下来,我们需要为这些容器设置初始样式。CSS 代码如下:

.lightbox-container {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.lightbox-image {
  display: block;
  max-width: 100%;
  height: auto;
}

.lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

JavaScript 交互实现

最后,我们需要使用 JavaScript 来实现图片的放大和遮罩层的显示/隐藏。JavaScript 代码如下:

const lightboxContainer = document.querySelector('.lightbox-container');
const lightboxOverlay = document.querySelector('.lightbox-overlay');
const lightboxImage = document.querySelector('.lightbox-image');

lightboxContainer.addEventListener('click', () => {
  lightboxOverlay.style.display = 'flex';
  lightboxImage.style.maxWidth = '90%';
  lightboxImage.style.maxHeight = '90%';
});

lightboxOverlay.addEventListener('click', () => {
  lightboxOverlay.style.display = 'none';
  lightboxImage.