当前位置:网站首页 > 源码 > 网站源码 > 正文

wordpress给文章添加图片灯箱/暗箱功能,点击图片弹出|支持dux最新主题

作者:流年风月日期:2019-10-30浏览:169分类:网站源码

折腾了三个小时,终于把所有有关于wordpress图片灯箱或者暗箱特效的问题全部搞定了,支持dux主题以及各种wordpress主题。wordpress文章图片暗箱功能

增加这个功能大家可以通过代码或者插件的形式,都可以解决,不过麻烦很多,比如很多主题之家添加插件,无效果。

经过几个小时的折腾,缘聚岛完美解决了各种灯箱代码教程还有插件无效的问题。

这里以dux为例,大家都知道dux代码比较整齐,而修改dux主题麻烦就在于它把代码都写到一起了,试用其他大部分主题的教程dux不一定适用。

问题:
1、主题不兼容,直接使用网上教程无效,安装插件无效。
2、修改过主题,比如给主题添加了外链自动go转跳的功能,导致图片灯箱功能失效。

解答:
不管是什么问题,我们放心过去的总总,直接开始教程,没有任何冲突!

给文章页增加图片Fancybox灯箱效果/支持放大自动播放等

教程分两种,一种是没修改过主题的,另一种是给主题添加了外链转跳功能的。

这里直接推荐方法二,因为你现在不修改难保以后不修改主题,所以方法二统一搞定。

FancyBox 简单介绍

Fancybox 是一个 JavaScript 库,用于以优雅的方式呈现图像,视频和任何 HTML 内容。它具有您期望的所有功能 – 触摸启用,响应和完全可定制。

依赖

  • jQuery 3+ 是首选,但 fancyBox 适用于 jQuery 1.9.1+ 和 jQuery 2+

兼容性

  • fancyBox 包括对触控手势的支持,甚至支持缩放手势。它非常适合手机和桌面浏览器。

特点

  • 移动第一:每个设备上看起来不错;支持最常见的触控手势-双击,捏放和捏出来的图像浏览; 水平滑动进行导航。

  • 多个实例:它可以打开一个模式,而另一种是仍然可见。

  • 快速和简易安装:就在两个文件,无需编写 JavaScript 代码一行来实现。

  • 自动内容识别:支持最流行的网站诸如 YouTube,Vimeo 的和谷歌地图的开箱。

  • GPU 加速:硬件加速的动画有更好的表现。

  • 响应:设置使用任何 CSS 单位,浏览器将完成剩下的内容维度;所有的图形,包括加载图标,仅与 CSS 创建。

官方使用教程

<!-- 1. Add latest jQuery and fancyBox files -->
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js">
</script><!-- 2. Create links -->
<a data-fancybox="gallery" href="big_1.jpg"><img src="small_1.jpg"></a>
<a data-fancybox="gallery" href="big_2.jpg"><img src="small_2.jpg"></a>
<!-- 3. Have fun! -->
FancyBox 简单介绍

Fancybox 是一个 JavaScript 库,用于以优雅的方式呈现图像,视频和任何 HTML 内容。它具有您期望的所有功能 – 触摸启用,响应和完全可定制。

依赖

  • jQuery 3+ 是首选,但 fancyBox 适用于 jQuery 1.9.1+ 和 jQuery 2+

兼容性

  • fancyBox 包括对触控手势的支持,甚至支持缩放手势。它非常适合手机和桌面浏览器。

特点

  • 移动第一:每个设备上看起来不错;支持最常见的触控手势-双击,捏放和捏出来的图像浏览; 水平滑动进行导航。

  • 多个实例:它可以打开一个模式,而另一种是仍然可见。

  • 快速和简易安装:就在两个文件,无需编写 JavaScript 代码一行来实现。

  • 自动内容识别:支持最流行的网站诸如 YouTube,Vimeo 的和谷歌地图的开箱。

  • GPU 加速:硬件加速的动画有更好的表现。

  • 响应:设置使用任何 CSS 单位,浏览器将完成剩下的内容维度;所有的图形,包括加载图标,仅与 CSS 创建。

官方使用教程

<!-- 1. Add latest jQuery and fancyBox files --><script src="//code.jquery.com/jquery-3.2.1.min.js"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css" /><script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js"></script><!-- 2. Create links --><a data-fancybox="gallery" href="big_1.jpg"><img src="small_1.jpg"></a><a data-fancybox="gallery" href="big_2.jpg"><img src="small_2.jpg"></a><!-- 3. Have fun! -->



方法一:如果你没修改过主题,可以直接使用

1、在文件头(如主题内的 header.php 文件)中引入 jquery.fancybox.min.css 和 jquery.fancybox.min.js 两个文件(可以使用以上代码中的链接,或者直接下载后上传到所使用主题文件夹内再添加),而 jquery-3.2.1.min.js 文件一般不用理会,因为大部分 WordPress 站点都已经引入有 jQuery 库了。

大白话:这是功能代码,添加了就有功能了!
在主题内的 header.php 文件加入如下代码:

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" rel="nofollow" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js"></script>

2、接着只需要给我们站点文章内图片的链接添加 data-fancybox 属性即可,还可以使用 data-caption 属性添加标题。例如:

<a href="image.jpg" data-fancybox data-caption="My caption">
    <img src =“thumbnail.jpg” alt =“My caption”/>
</a>

大白话:这是调用代码
为文章页内的图片链接添加 data-fancybox 属性可以使用函数自动添加,只需要将以下代码添加到当前主题的functions.php 文件最后一个 ?> 的前面即可。

/*
==================================================
fancybox图片灯箱效果,自动给图片添加图片链接
==================================================
*/
add_filter('the_content', 'fancybox1');
add_filter('the_content', 'fancybox2');
function fancybox1($content){ 
    global $post;
    $pattern = "/<img(.*?)src=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>/i";
    $replacement = '<a$1href=$2$3.$4$5 data-fancybox="images"><img$1src=$2$3.$4$5$6></a>';
    $content = preg_replace($pattern, $replacement, $content);
    return $content;
}
function fancybox2($content){ 
    global $post;
    $pattern = "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>(.*?)<\/a>/i";
    $replacement = '<a$1href=$2$3.$4$5 data-fancybox="images"$6>$7</a>';
    $content = preg_replace($pattern, $replacement, $content);
    return $content;
}

到此就完美搞定了。

方法二:网站添加“自动给文章的外部链接添加nofollow属性”这种功能

这样会导致图片的链接被识别为外链,所以灯箱失效,这里我们只需要在代码的判断处添加了对外链图片的过滤规则。

大白话:只可意会不可言传
我们直接吧之前的转跳功能代码删除,用缘聚岛提供的即可,或者根据缘聚岛给出的规则大家自己改你们的代码!

1、把下面代码添加到主题文件的function.php中:
其中“&& !preg_match(‘/\.(jpg|jepg|png|ico|bmp|gif|tiff)/i’,$val)”是排除图片外链的规则。

// 自动给文章的外部链接添加nofollow属性(纠正外链图片暗箱功能失效by缘聚岛) 
add_filter('the_content','web589_the_content_nofollow',999);
function web589_the_content_nofollow($content){
 preg_match_all('/href="(http.*?)"/',$content,$matches);
 if($matches){
 foreach($matches[1] as $val){
 if( strpos($val,home_url())===false && !preg_match('/\.(jpg|jepg|png|ico|bmp|gif|tiff)/i',$val)) 
 
 $content=str_replace("href=\"$val\"", "rel=\"nofollow\" href=\"" . get_bloginfo('wpurl'). "/link?url=" .base64_encode($val). "\"",$content);
 }
 }
 return $content;
 }
 // 给图片自动添加链接
 add_filter('the_content', 'fancybox1');
 add_filter('the_content', 'fancybox2');
 function fancybox1($content){ 
 global $post;
 $pattern = "/<img(.*?)src=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>/i";
 $replacement = '<a$1href=$2$3.$4$5 data-fancybox="images"><img$1src=$2$3.$4$5$6></a>';
 $content = preg_replace($pattern, $replacement, $content);
 return $content;
 }
 function fancybox2($content){ 
 global $post;
 $pattern = "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>(.*?)<\/a>/i";
 $replacement = '<a$1href=$2$3.$4$5 data-fancybox="images"$6>$7</a>';
 $content = preg_replace($pattern, $replacement, $content);
 return $content;
 }

2、然后在网站根目录下新建个 link 的文件夹,在其中写个 index.php 的文件,内容如下(请保存为UTF-8):

<?php 
$url = $_GET['url'];
$a = '';
if( $a==$url ) { 
$b = "http://yuanjudao.com/";
// echo 'true';
} else { 
$b = $url; 
$b = base64_decode($b);
}
//Template Name:链接跳转(有过度)
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="refresh" content="0.1;url=<?php echo $b; ?>">
<title>正在跳转....</title>
</head>
<body>
</body>
</html>

3、在主题内的 header.php 文件加入如下代码:

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" rel="nofollow" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js"></script>

教程结束,大家自己刷新网站,点开图片就会有灯箱效果了。

欢迎 发表评论:

请填写验证码
享受更多资源下载可加入本站VIP会员!登录注册
登录
用户名
密码
注册
用户名
密码
确认密码
昵称
邮箱
QQ
验证码
找回密码
用户名
邮箱
※ 重置链接将发送到邮箱
请先 登录 再评论,若不是会员请先 注册