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

以下代码由PHP站长网 52php.cn收集自互联网现在PHP站长网小编把它分享给大家，仅供参考

对于图片站来说，有图片灯箱效果比没有要好得多。好在 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，别忘了！

以上内容由PHP站长网【52php.cn】收集整理供大家参考研究如果以上内容对您有帮助，欢迎收藏、点赞、推荐、分享。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!