医管攻略

首页 > 医管攻略 > 其他

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

14年09月30日阅读：10963 来源： 王发利原创

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

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

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

　　首先，下载FancyBox文件

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

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

　　其次，修改你的文件

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

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

　　[cc]

　　//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]

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

本文（图片）由作者（投稿人）自主发布于 @华夏医界网，其内容仅代表作者个人观点，并不代表本站同意其说法或描述，其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性和及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容（包含文中图片的版权来源），本站仅提供信息存储服务，不承担前述引起的任何责任。根据《信息网络传播权保护条例》，如果此作品侵犯了您的权利，请在一个月内通知我们（文章来源下方“侵权申诉”按钮）或将本侵权页面网址发送邮件到535905836@qq.com，我们会及时做删除处理。欢迎网友参与讨论及转载，但务必注明"来源于www.hxyjw.com"。