lightgallery 给你的网站快速实现图片灯箱效果

下面是编程之家 jb51.cc 通过网络收集整理的代码片段。编程之家小编现在分享给大家，也给大家做个参考。

对于图片站来说，有图片灯箱效果比没有要好得多。好在 wordpress 插件够多，图片灯箱插件还不少，但这些插件还是不能让所有站长满意。这里我找到一款 lightgallery 图片灯箱，个人觉得效果最好，写下这篇快速集成到 WordPress 的教程，帮助大家快速实现自己想要的效果。ightGallery 是一款轻量级、可定制、响应式、模块化的 jQuery LightBox 图片画廊插件。它支持移动触摸设备，支持键盘控制，带 20 多种动画过渡效果，是一款非常优秀的 LightBox 插件。集成方法很简单，如果你有心，也可以做成一款 WordPress 灯箱插件。

这款灯箱插件不仅支持自动播放、上下页导航还有缩放功能，并且移动端还支持手势翻页，功能相当的强大。

WordPress 集成办法

首先下载文末的资源文档，里面有一个 js、一个 css，这两个是 lightgallery 的核心文件，还有一些字体文件，没有只会影响美观，不影响功能。在你的主题 header.php 文件中，加入 lightgallery 的 css 文件引用。

<link type='text/css' rel='stylesheet' href='".get_stylesheet_directory_uri()."/css/lightgallery.min.css'/>

然后在 footer.php 中加入 lightgallery 的 js 引用。

<script type='text/javascript' src='".get_stylesheet_directory_uri()."/js/lightgallery-all.min.js'></script>

这个时候并没有完成 lightgallery 的集成，当然如果你使用的是我的 DMD 主题的话，就已经完成了，lightgallery 已经能够正常工作，点开一篇文章试试效果吧。正常操作应该打开 lightgallery-all.min.js 文件，找到里面 run_lightgaller 方法，修改里面的 css 选择器名称。

function run_lightgallery(){

var matching = new RegExp("[.](?:gif|png|jpg|jpeg|webp)($|[?])"),image_popup = false;

 

$(".article-content a").each(function(){

if( matching.test( $(this).attr('href') ) && $(this).children('img').length == 1 ){

$(this).addClass('dmd-light-gallery-item');

image_popup = true;

}

 

});

 

if( image_popup ){

 

$('.article-content').lightGallery({

selector: '.dmd-light-gallery-item',

share: false,

exThumbImage: 'href'

});

 

}

}

将.article-content 改成包裹你文章内容的标签即可，上面这段 js 的作用是，找到 class 名为 article-content 的标签下的 a 标签对象。然后遍历匹配图片并取地址。如果找到就给该 a 标签加上一个 class 名为 dmd-light-gallery-item 的 css。第二段就是 lightGallery 的初始化了，初始化对象是包裹文章内容的标签，并选择刚刚我们添加了 class 的对象。

整个过程还是非常简单的，不过官方的文档比较坑爹，并没有提供 lightgallery-all.min.js 与 lightgallery.min.css 这两个文件，使用他们提供的文件与示例代码直接报错，初始化都不行….

最重要的是必须使用 jquery，别忘了！

以上是编程之家(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。