WordPress非插件使用fancybox

WordPress非插件使用fancybox

WordPress非插件使用fancybox

——独立观察员 2014.04.20

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

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

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

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

 

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

042014_0737_WordPressf1.png

代码如下:

 

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

<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”文件夹:

 

%title插图%num

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

%title插图%num

 

%title插图%num

 

四、接下来是在主题的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>

 

我还是添加在尾部:

%title插图%num

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

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

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

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

 

如果没有Jquery,可在头部(普通主题在header.php文件)添加:

%title插图%num

 

最后看看效果吧:

042014_0737_WordPressf7.png

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

原创文章,转载请注明: 转载自 独立观察员(dlgcy.com)

本文链接地址: [WordPress非插件使用fancybox](https://dlgcy.com/wordpress-noplugin-use-fancybox/)

关注微信公众号 独立观察员博客(DLGCY_BLOG) 第一时间获取最新文章

%title插图%num

8条评论

张静媛 发布于20:43 - 2014年11月5日

已经成功了 我上次给你回复的时候 不知道怎么打不出汉子来了 哈哈~ 我缺少了wp-head(), 添上去就好了

    独立观察员 发布于09:29 - 2014年11月6日

    恭喜。你有没有研究一下其它细节?

      张静媛 发布于10:25 - 2014年11月6日

      我的网站是自己写的 没有修改别人的模板 所以刚开始做的时候 就发现很多插件不能用,slider 这样的插件都没有效果,最后试了很多,有一个插件报错了 说是缺少<?php wp_footer(); ?>。然后添加了这句话在页尾,slider插件可以用了,等到要用lightbox效果的时候 又没有效果,最后又去插别人的代码 看有没有特殊语句,结果发现少了一个<?php wp_head(); ?>,添加后 果然插件起效果了。百度一下:“这两个函数会生成一些程序自身的信息,而很多插件也是通过这两个函数来应用的。”~

      独立观察员 发布于20:12 - 2014年11月6日

      自己写的……佩服佩服!网址是?

张静媛 发布于11:12 - 2014年10月28日

weishenme wo an zhao nishuo de keshi haishi meixiaoguo haoyousang

    独立观察员 发布于13:04 - 2014年10月28日

    zhege queshi butaihao nong, ni youxingqu dehua jiu duoshishi .

晓午林枫 发布于17:25 - 2014年10月17日

想问一下博主有没有一个插件直接实现这样效果的,越小越好只是想要灯箱效果。

    独立观察员 发布于10:14 - 2014年10月18日

    我文章里有说,如果你习惯在后台编辑器插入图片,那么很多插件都可以,具体请自己到插件库搜索“lightBox”。

发表评论