SEO学习

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

时间：2021-08-30 丨作者：SEO优化知识丨关键词：WordPress

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"]/js/fancybox/jquery.fancybox.css" />

[/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图片弹出效果，喜欢的朋友可以试试。

在线随机小姐姐图片换一批