wp网页中的图片弹出效果怎么做?

  • 11,000 views

wp网页中的图片弹出效果怎么做

一直以来本博客的图片都是取消超链接的,因为之前没做特效,点击进去就是一个图片,今天特意为图片添加了一个弹出效果。那么,对于网页中的图片弹出效果怎么做?对于我这个做网站优化的半拉子技术还是有点难度的,不过功夫不负有心人,经过折腾还是实现了。下面来看看,如果你也有需要就直接照着做吧。

wp网页中的图片弹出效果怎么做? 我选择利用fancybox 实现弹出效果。网上很多资料都使用lightbox,但是我使用了之后发现弹出图片的大小无法随着屏幕的大小而该改变,而我的事响应式主题,当然这就有点不完美了。也有人推荐使用Fancybox这款相册插件,但是本人一向不怎么喜欢用插件,除非无法更改或者非插件不可。

网页中的图片弹出效果怎么做教程

下面来介绍非插件实现弹出功能:

首先,下载FancyBox文件

下载地址:http://fancyapps.com/fancybox/

下载下来以后解压出来文件,把文件中的source文件夹的文件放在你的空间,建议独立建立一个文件夹放在根目录,我的直接是改source为fancybox然后上传到了根目录。当然,你想怎么给文件夹怎么起名都可以。

其次,修改你的文件

需要修改的文件是functions.php和header.php

1、打开你的函数文件functions.php,在 ?> 之前添加如下代码:

[cc lang="php"]
//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';
$content = preg_replace($pattern, $replacement, $content);
return $content;
}
[/cc]

解析:此功能在添加文章后,会对文章中的图片自动加上一个rel=fancybox的属性,用来初始化筛选图片。

再打开你的header.php文件,在<head> </head> 调用js或者css的link处添加如下代码:
[cc lang="js"]


[/cc]

解析:这个不用说都知道吧,加载所需的文件。操作到这里就已经完成了,可以去发布文章看看效果了。

再次,必须注意的细节事项

注意事项A:忽略了服务器主机类型不出现效果,比如刚下载下来的文件名是fancyBox,但是在文件中调用的url中是fancybox,不出现效果。

处理方法:若是linux或unix主机,检查路径文件名和实际文件夹名是否一致(包括大小写),因为这两种主机中大小写是有区别的。(博主在做的时候就犯了这个错,呵呵)

注意事项B:使用jQuery(“a[@rel*=fancybox]“)作为选择器条件时出现“Syntax error, unrecognized expression: a[@rel*=fancybox]”错误

处理方法:将”a[@rel*=lightbox]“替换成”a[rel=fancybox]“即可,出现原因是因为jquery的版本导致的

注意事项C:使用$(“.gallery a”)和$(“a[rel=fancybox]“)提示找不到对象错误

处理方法:将“$”替换成”jQuery”即可

本文小结:

wp网页中的图片弹出效果怎么做?经过一番鼓捣,终于做好了这个非插件实现wordpress图片弹出效果,喜欢的朋友可以试试。

weinxin
我的微信
分享SEO优化、SEM营销、新媒体知识,交流营销运营经验,提供网站制作、SEO、竞价托管和公众号代运营服务。
王发利
  • 本文由 发表于 2014 年 9 月 30 日
  • 转载请务必保留本文链接:http://wangfali.com/seo/3929.html
什么事千人千面?详解百度千人千面算法! SEO知识

什么事千人千面?详解百度千人千面算法!

什么事千人千面?详解百度千人千面算法!在2020年的时候,百度搜索引擎官方开始上线千人千面算法,其实这个千人千面算法就是根据个人的喜好来展现搜索结果,这算法涉及到了个人的搜索习惯、个人的爱好、个人感兴...
SEO行业名词解释大全 SEO知识

SEO行业名词解释大全

优化网站做SEO,了解seo行业名词必看seo名词解释,明白seo行业、读懂seo名词解释能够帮助我们更好地工作和指导网站优化。在做SEO前先搞清楚这些seo行业名词,我想是很有必要的,今天借助王发利...
B2B网站上Ttitle应该怎么写? SEO知识

B2B网站上Ttitle应该怎么写?

B2B网站上Ttitle应该怎么写?很多中小企业卖家,选择b2b平台做关键词优化在当前来说,是省钱又有效的方法。因为,可以通过利用b2b网站的高权优势,帮助企业快速获得关键词排名和流量,从而提升产品销...
新手如何做好医疗SEO?该怎么做? SEO知识

新手如何做好医疗SEO?该怎么做?

新手如何做好医疗SEO?该怎么做?曾有人问医疗SEO该怎么做,尤其是新手。我想很多老鸟都是从新人走过来的,虽然医疗SEO相对来说是男一点,不过只要有一颗恒心,多学习、选好方向坚持新人也能做好医疗SEO...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: