WordPress非插件使用fancybox

WordPress非插件使用fancybox

——独立观察员 2014.04.20

本文参考《为WordPress加入Fancybox相册功能免插件实现》一文以及网上其它文章。

本人想在自己的博客中启用点击图片弹出”灯箱”效果，而不是毫无效果（没有链接）或是图片在新页面打开（默认效果）。

由于我一般是用Word来写文章并直接发布的，所以导致文章里的图片都只是单纯的图片（<img>标签），没有链接指向（没有<a>标签包裹），这样就导致在启用相关灯箱(lightBox)插件时，只有通过后台编辑器插入的图片（有<a>标签），才能有相关效果，我试用过很多类似插件，都是这样。后来我找到了自动为图片添加链接的方法（后面会给出），但不知为什么，不关其它图片还是没效果，连原来有效果的图片也没效果了，难道是Jquery文件的问题？反正尝试了很多次，我决定找找不用插件来实现的方法。

最终我找到了上文说的那篇文章，现在就来搬运一下，有些地方做些修改。

 

一、首先，要给图片包裹上<a></a>标签，并指向图片源地址。一般是将代码添加到主题的header.php文件中，不过由于我用的是HeadWay主题，所以就添加到这里了：

代码如下：

 

<!--图片链接到原图-->

<script type="text/javascript">

$(function() {

    $('.entry-content img').each(function(i){

        if (! this.parentNode.href) {

            $(this).wrap("<a href='"+this.src+"'></a>");

        }

    });

});

</script>

 

（2019年1月15日 更新，因为换 SpicePress 主题了）

或者使用如下代码，可省略步骤四：

<!-- 图片链接到原图并添加 fancybox 标记 -->
 
$(function() {
 
    $('.entry-content img').each(function(i){
 
        if (! this.parentNode.href) {
 
            $(this).wrap("<a rel='fancybox' href='"+this.src+"'></a>");
 
        }
 
    });
 
});

另外，推荐使用 Simple Custom CSS and JS 插件来添加这些代码。

 

二、下载相关文件——fancybox（比如https://github.com/fancyapps/fancyBox/zipball/v2.1.5 ），如果你的主题没有Jquery或你不知道有没有，你最好再下个Jquery，注意版本。

 

三、上传文件到网站目录下。其实放哪里都可以，只要到时候改动代码中相关链接即可。你可以在网站内容的根目录下新建个个性化的文件夹，将文件放进去。比如，我建了个”dlgcy”文件夹：

 

然后把Jquery文件传上去，再建个fancybox文件夹，将下载的fancybox压缩包中的source文件夹里的文件放进去：

 

 

四、接下来是在主题的function.php文件中加入以下代码，对图片链接添加rel=fancybox属性，以方便之后JQuery进行选取元素：

 

//fancybox 自动对图片链接添加rel=fancybox属性

add_filter('the_content', 'pirobox_gall_replace');

function pirobox_gall_replace ($content){

global $post;

$pattern = "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>(.*?)<\/a>/i";

$replacement = '<a$1href=$2$3.$4$5 rel="fancybox"$6>$7</a>';

$content = preg_replace($pattern, $replacement, $content);

return $content;

}

 

 

五、在主题header.php文件或其它能在Header或Footer中添加脚本的地方添加如下代码：

<link rel="stylesheet" type="text/css" href="/dlgcy/fancybox/jquery.fancybox.css" />

<script src="/dlgcy/fancybox/jquery.fancybox.pack.js"></script>

<script type="text/javascript">

$(function() {

jQuery("a:has(img)").attr({rel: "fancybox"});

jQuery("a[rel=fancybox]").fancybox();

});

</script>

 

我还是添加在尾部：

注意修改css和js文件的路径；另外，原文中

jQuery(“a:has(img)“).attr({rel: “fancybox”}); 这句是

jQuery(“.gallery a“).attr({rel: “fancybox”});

好像不太对，我改成了选取a:has(img)，就是只选择包含了图片的链接。

 

如果没有Jquery，可在头部（普通主题在header.php文件）添加：

 

最后看看效果吧：

暂时就这样，其它细节以后再研究。