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

发布时间:2020-03-19 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了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)为你收集整理的全部代码内容,希望文章能够帮你解决所遇到的程序开发问题。如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

总结

以上是脚本之家为你收集整理的lightgallery 给你的网站快速实现图片灯箱效果全部内容,希望文章能够帮你解决lightgallery 给你的网站快速实现图片灯箱效果所遇到的程序开发问题。

其他人正在看

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入脚本之家官方QQ群:1065694478
标签: