最近给博客文章页面添加了图片灯箱功能,主要基于以下几点考虑:
- b2自带的图片查看功能过于简单，不支持浏览整篇文章的图片浏览
- 需要更好的移动端支持
- 支持付费文章中的图片浏览
- 提供更流畅的浏览体验
主要功能
- 支持键盘快捷键操作
- 左右方向键切换图片
- ESC 键关闭灯箱
- 移动端手势支持
- 左右滑动切换图片
- 下滑关闭灯箱
- 流畅的过渡动画效果
- 图片操作
- 图片下载功能
- 显示当前图片序号
- 支持图片懒加载
- 其他功能
- 适配付费内容区域的图片
- 图片预加载,更流畅的浏览体验
- PC端显示左右切换按钮
- 优化的移动端交互体验
- 效果展示
使用方法
一、创建灯箱 js 文件
在子主题目录中创建post-lightbox.js，并将以下代码复制进去
二、引入js文件
在子主题的functions.php中找到这段代码
wp_enqueue_script( 'b2-child-main', B2_CHILD_URI.'/child.js', array('jquery'), B2_VERSION , true );在他的下方，引入post-lightbox.js文件
wp_enqueue_script( 'b2-child-post-lightbox', B2_CHILD_URI.'/post-lightbox.js', array('jquery'), B2_VERSION , true );三、添加样式
在子主题根目录创建post-lightbox.css文件，并将下方代码复制进去
.b2-lightbox-wrap {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999999;
transition: opacity 0.3s;
}
.b2-lightbox-mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
transition: opacity 0.3s;
}
.b2-lightbox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
transition: transform 0.3s;
}
.lightbox-header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 44px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 15px;
color: #fff;
z-index: 2;
background: linear-gradient(to bottom, rgba(0,0,0,0.4), transparent);
}
.header-actions {
display: flex;
gap: 10px;
}
.action-btn {
background: none;
border: none;
color: #fff;
padding: 8px;
cursor: pointer;
border-radius: 4px;
transition: background-color 0.3s;
}
.action-btn:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.current-info {
font-size: 14px;
}
.close-btn {
padding: 8px;
cursor: pointer;
}
.lightbox-content {
flex: 1;
position: relative;
overflow: hidden;
touch-action: none;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-wrapper {
display: flex;
height: 100%;
will-change: transform;
}
.swiper-slide {
flex-shrink: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.img-wrap {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.lightbox-img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
user-select: none;
-webkit-user-drag: none;
}
/* PC端导航按钮样式 */
.nav-btn {
position: absolute;
top: 50%;
/*transform: translateY(-50%);*/
width: 44px;
height: 44px;
background: rgba(0, 0, 0, 0.5);
border: none;
border-radius: 50%;
color: #fff;
font-size: 24px;
cursor: pointer;
display: none;
align-items: center;
justify-content: center;
z-index: 2;
transition: all 0.3s;
}
.nav-btn:hover {
background: rgba(0, 0, 0, 0.8);
}
.prev-btn {
left: 20px;
}
.next-btn {
right: 20px;
}
/* PC端特定样式 */
@media (min-width: 769px) {
.nav-btn {
display: flex;
}
.lightbox-content:hover .nav-btn {
opacity: 1;
}
.lightbox-header {
height: 60px;
padding: 0 20px;
}
.current-info {
font-size: 16px;
}
}
/* 移动端隐藏导航按钮 */
@media (max-width: 768px) {
.nav-btn {
display: none;
}
}四、引入css文件
在functions.php中找到这段代码
wp_enqueue_style( 'child-style-main', B2_CHILD_URI.'/style.css' , array() , B2_VERSION, 'all');在他的下方引入post-lightbox.css文件
wp_enqueue_style( 'child-style-post-box', B2_CHILD_URI.'/post-lightbox.css' , array() , B2_VERSION, 'all');五、添加禁用父主题放大图片方法
在functions.php中找到这段代码
define( 'B2_CHILD_URI', get_stylesheet_directory_uri() );在他的下方添加代码
add_action('wp_footer', function() {
if (is_single()) { // 判断是否是单篇文章页面
?>
<script>
// 移除父主题的图片点击事件绑定
document.removeEventListener('DOMContentLoaded', b2ImgZooming);
// 清空原有的函数
window.b2ImgZooming = function(){};
</script>
<?php
}
}, 99);六、完成安装
- 保存所有文件
- 返回网站
- 清除网站缓存
- 刷新页面查看效果
注意事项
- 如果文章中包含付费内容,灯箱会自动适配付费区域的图片
- 未解锁时只显示免费区域的图片
- 解锁后自动更新灯箱内容,包含付费区域的图片
- 图片会进行预加载,保证浏览体验
- 针对移动端做了专门的交互优化
至此，新版文章灯箱功能已经完全实现，支持更流畅的图片浏览体验和更好的移动端适配，包括对隐藏内容中图片的浏览体验。
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
