WordPress非插件使用fancybox

WordPress非插件使用fancybox

——独立观察员 2014.04.20

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

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

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

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

 

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

042014_0737_WordPressf1.png

代码如下:

 

 

 

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

 

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

 

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

 

 

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

 

 

 

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

 

我还是添加在尾部:

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

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

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

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

 

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

 

最后看看效果吧:

042014_0737_WordPressf7.png

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

打印本文

8 回复 to WordPress非插件使用fancybox

  1. 张静媛说道:

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

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

      • 张静媛说道:

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

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

  2. 张静媛说道:

    weishenme wo an zhao nishuo de keshi haishi meixiaoguo haoyousang

  3. 晓午林枫说道:

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

回复