非插件将Lightbox最新版整合到wordpress主题

Lightbox是一款原生图片灯箱脚本插件,已有8年历史,功能和性能越来越强大,外观也是可圈可点。目前网上整合的方法已经不再适用新版的Lightbox,本文将会教大家如何集成最新版Lightbox。

起步

1、下载Lightbox最新版

资源名称:Lightbox最新版
下载地址:高速下载
相关密码:无密码

2、解压下载的文件,Lightbox实例在/examples文件夹可以看到。

3、在你的主题头部文件中(如header.php)文件中引入js和css文件,这些文件可在/dist文件夹下面找到。

<link href="<?php get_template_directory_uri(); ?>/css/lightbox.css" rel="stylesheet">
<script src="<?php get_template_directory_uri(); ?>/js/lightbox.js"></script>

4、注意,lightbox.js文件确保在jquery.js文件后面,如果你的主题没有引入jquery文件,可以这样写:

<link href="<?php get_template_directory_uri(); ?>/css/lightbox.css" rel="stylesheet">
<script src="http://cdn.staticfile.org/jquery/2.2.1/jquery.min.js"></script>
<script src="<?php get_template_directory_uri(); ?>/js/lightbox.js"></script>

5、lightbox规定的html结构有两种:

  1. 如果是单一的图片,那么把data-lightbox属性设置唯一
    <a href="images/image-1.jpg" data-lightbox="image-1" data-title="My caption">Image #1</a>
  2. 如果是一组图片,那么把data-lightbox属性设置成一样
    <a href="images/image-2.jpg" data-lightbox="roadtrip">Image #2</a>
    <a href="images/image-3.jpg" data-lightbox="roadtrip">Image #3</a>
    <a href="images/image-4.jpg" data-lightbox="roadtrip">Image #4</a>

6、下面就要通过add_filter函数,为文章中的图片加上特定的结构,代码如下:

//对图片增加lightbox属性
function pirobox_gall_replace ($content){ 
	global $post;
	$pattern = "/<a(.*?)><img(.*?)alt=\"(.*?)\"(.*?)>(.*?)<\/a>/i";
	$replacement = '<a$1 data-lightbox="img-'.$post->ID.'" data-title="$3"><img$2alt=\"$3\"$4>$5</a>';
	$content = preg_replace($pattern, $replacement, $content);
	return $content;
}
add_filter('the_content', 'pirobox_gall_replace');

至此,你的wordpress主题已经拥有lightbox灯箱效果了。

选项

如果你想改变默认选项,可以使用如下方法:

<script>
    lightbox.option({
      'resizeDuration': 200,
      'wrapAround': true
    })
</script>

更多选项参数,请参照官方链接:http://lokeshdhakar.com/projects/lightbox2/

实例

\"清新摄影\" \"清新脱俗\"

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

标签:

分享到:

扫一扫在手机阅读

扫一扫 在手机阅读、分享本文

上一篇: 下一篇:
全部回复2人评论1,930人参与
  1. 1楼
    电动螺旋压力机

    您好,您的网站做的很不错,很漂亮,我已经收藏了,方便我随时访问.

    2017-06-08 04:36:33 回复
  2. 2楼
    灰常记忆

    这个集成到你做的主题不是很好。

    2017-03-31 02:58:28 回复

电子邮件地址不会被公开。 必填项已用*标注

loading