智能摘要

前言：打造沉浸式图片浏览体验

在子比Zibll主题中，文章内页的图片展示方式直接影响用户阅读体验。默认的图片点击跳转或简单放大效果已无法满足现代网站需求。本教程将手把手教你实现一个完整的图片画廊与灯箱全屏浏览特效，包括缩略图网格布局、点击放大动画、全屏浏览、左右切换、键盘控制等功能。所有代码均适用于最新版子比Zibll主题，兼容Chrome、Firefox、Safari等主流浏览器。

本教程适合有一定CSS和JavaScript基础的站长，无需额外安装插件，纯代码实现，资源占用极小。

一张展示文章内页图片画廊效果的截图，左侧为缩略图网格，右侧为点击后全屏灯箱浏览的动画过渡，风格为科技感暗色调，构图为上下对比布局

第一步：理解图片画廊与灯箱的核心原理

图片画廊（Gallery）负责将文章中的多张图片组织成美观的网格或滑块，灯箱（Lightbox）则是点击图片后的全屏浏览模式。两者的核心交互流程如下：

缩略图网格：将图片按比例裁剪为统一尺寸，排列成响应式网格。
点击触发：点击缩略图时，通过JavaScript获取图片URL、标题等信息。
灯箱显示：创建一个全屏遮罩层，将图片居中显示，并支持左右切换、关闭、键盘操作。
动画过渡：利用CSS transition或animation实现平滑的缩放、透明度变化。

第二步：准备所需资源

本教程不需要第三方库，但推荐使用Font Awesome图标库（仅用于关闭、切换箭头图标）。如果你已内置Font Awesome，可直接使用；否则可替换为Unicode字符或SVG。以下为所需资源：

子比Zibll主题（最新版）已安装并配置好文章页面。
Font Awesome 5+（可选，用于图标）。
基础HTML/CSS/JavaScript知识。

第三步：编写HTML结构

首先，在子比主题的自定义HTML区域（或文章模板中）添加画廊容器。以下代码创建一个图片网格，每张图片包含缩略图和全屏数据属性：

<div class="gallery-container">
  <div class="gallery-item" data-src="https://example.com/img1.jpg" data-title="图片标题1">
    <img src="https://example.com/img1-thumb.jpg" alt="图片1">
    <div class="overlay"><span>点击查看</span></div>
  </div>
  <div class="gallery-item" data-src="https://example.com/img2.jpg" data-title="图片标题2">
    <img src="https://example.com/img2-thumb.jpg" alt="图片2">
    <div class="overlay"><span>点击查看</span></div>
  </div>
  <!-- 重复更多图片 -->
</div>
<!-- 灯箱结构 -->
<div id="lightbox" class="lightbox">
  <span class="close">&times;</span>
  <img class="lightbox-content" id="lightbox-img">
  <div class="caption" id="lightbox-caption"></div>
  <button class="prev">&#10094;</button>
  <button class="next">&#10095;</button>
</div>

将这段代码放入子比主题的“自定义HTML”或文章页面的适当位置（建议放在文章内容下方）。注意替换图片URL为实际路径。

第四步：编写CSS样式

在子比主题的“自定义CSS”区域添加以下样式。这些代码实现响应式网格、悬停效果和灯箱全屏样式：

/* 画廊容器 */
.gallery-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 15px;
  padding: 20px 0;
}

.gallery-item {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.gallery-item:hover {
  transform: scale(1.02);
}

.gallery-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  transition: opacity 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-item:hover .overlay {
  opacity: 1;
}

.overlay span {
  color: #fff;
  font-size: 16px;
  border: 2px solid #fff;
  padding: 8px 20px;
  border-radius: 30px;
}

/* 灯箱样式 */
.lightbox {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.9);
  backdrop-filter: blur(5px);
}

.lightbox-content {
  margin: auto;
  display: block;
  max-width: 90%;
  max-height: 85%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 5px;
  box-shadow: 0 0 30px rgba(255,255,255,0.2);
  animation: zoomIn 0.3s ease;
}

@keyframes zoomIn {
  from { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
  to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.caption {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 18px;
  text-align: center;
  background: rgba(0,0,0,0.6);
  padding: 10px 25px;
  border-radius: 30px;
}

.close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}

.close:hover {
  color: #f00;
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 30px;
  transition: 0.3s;
  border: none;
  background: rgba(0,0,0,0.3);
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev {
  left: 0;
}

.prev:hover, .next:hover {
  background: rgba(0,0,0,0.8);
}

/* 响应式 */
@media (max-width: 600px) {
  .gallery-container {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
  }
  .gallery-item img {
    height: 150px;
  }
  .prev, .next {
    font-size: 20px;
    padding: 10px;
  }
}

将上述CSS复制到子比主题的“自定义CSS”区域。这段代码定义了网格布局、悬停遮罩、灯箱全屏显示和动画效果。

第五步：编写JavaScript交互

在子比主题的“自定义JavaScript”区域添加以下代码，实现图片点击打开灯箱、左右切换、键盘控制等功能：

// 获取所有画廊项
const galleryItems = document.querySelectorAll('.gallery-item');
const lightbox = document.getElementById('lightbox');
const lightboxImg = document.getElementById('lightbox-img');
const lightboxCaption = document.getElementById('lightbox-caption');
const closeBtn = document.querySelector('.close');
const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');

let currentIndex = 0;

// 打开灯箱
galleryItems.forEach((item, index) => {
  item.addEventListener('click', function() {
    currentIndex = index;
    updateLightbox();
    lightbox.style.display = 'block';
    document.body.style.overflow = 'hidden'; // 禁止背景滚动
  });
});

// 更新灯箱内容
function updateLightbox() {
  const item = galleryItems[currentIndex];
  const src = item.getAttribute('data-src');
  const title = item.getAttribute('data-title');
  lightboxImg.src = src;
  lightboxCaption.textContent = title || '';
}

// 关闭灯箱
closeBtn.addEventListener('click', function() {
  lightbox.style.display = 'none';
  document.body.style.overflow = 'auto';
});

// 点击灯箱背景关闭
lightbox.addEventListener('click', function(e) {
  if (e.target === lightbox) {
    lightbox.style.display = 'none';
    document.body.style.overflow = 'auto';
  }
});

// 上一张
prevBtn.addEventListener('click', function(e) {
  e.stopPropagation();
  currentIndex = (currentIndex - 1 + galleryItems.length) % galleryItems.length;
  updateLightbox();
});

// 下一张
nextBtn.addEventListener('click', function(e) {
  e.stopPropagation();
  currentIndex = (currentIndex + 1) % galleryItems.length;
  updateLightbox();
});

// 键盘控制
document.addEventListener('keydown', function(e) {
  if (lightbox.style.display === 'block') {
    if (e.key === 'Escape') {
      lightbox.style.display = 'none';
      document.body.style.overflow = 'auto';
    } else if (e.key === 'ArrowLeft') {
      currentIndex = (currentIndex - 1 + galleryItems.length) % galleryItems.length;
      updateLightbox();
    } else if (e.key === 'ArrowRight') {
      currentIndex = (currentIndex + 1) % galleryItems.length;
      updateLightbox();
    }
  }
});

这段JavaScript代码实现了完整的交互逻辑：点击缩略图打开灯箱，左右箭头和键盘方向键切换图片，ESC或点击背景关闭灯箱，同时禁止页面滚动以提升体验。

第六步：测试与调试

保存所有代码后，在子比主题的文章页面中插入包含gallery-container的图片组，发布后访问文章，点击图片测试效果。检查以下要点：

缩略图网格是否响应式排列，图片是否裁剪整齐。
悬停时遮罩层是否平滑显示。
点击图片后灯箱是否全屏打开，动画是否流畅。
左右切换是否循环，标题是否显示正确。
键盘ESC、左右键是否正常工作。
移动端触摸操作是否兼容。

如果遇到问题，检查控制台是否有JavaScript错误，并确认CSS选择器与HTML类名一致。

进阶美化：添加渐变边框与光效

为了让画廊更具视觉冲击力，可以在缩略图悬浮时添加渐变边框和光效动画。在CSS中追加以下代码：

.gallery-item {
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: all 0.4s ease;
}

.gallery-item:hover {
  border-image: linear-gradient(135deg, #667eea, #764ba2) 1;
  box-shadow: 0 0 20px rgba(102, 126, 234, 0.6);
}

.gallery-item img {
  transition: transform 0.4s ease;
}

.gallery-item:hover img {
  transform: scale(1.1);
}

这样，鼠标悬停时图片会放大并带有渐变边框和发光阴影，提升交互质感。