• 国庆快乐,放假三天

  • 准备增加一个免登录支付功能

  • 微信扫码登录功能已经 ok 了

  • 主题更新一下,修复了头像挂掉的问题

  • 后羿更新网站文章可能不会那么闲了

  • 不得不说,美国贴吧的界面真是难看到死

  • 看到网上新闻美国的贴吧将成为中国公司

  • 推送试试

  • 睡觉之前测试一下

  • 发现了一个非常不错的插件

Fancybox:简单好用的看图jQuery插件

网络技术 云落 5年前 (2014-11-08) 1525次浏览 12个评论
文章目录[隐藏]

使用 jQuery 给自己的 WordPress 添加看图功能,这个 fancybox 插件功能还是不错的,添加的时候也简单

Fancybox:简单好用的看图jQuery插件

前言

在我们网站经常会添加图片文件,由于版面的问题,图片经常会被缩放,如果是大图的话可能无法看清楚,在这里,我们使用这个弹出层插件就可以查看完整图了

素材准备

下载文章底部的素材文件,解压之后放在主题的根目录,就是主题根目录/fancybox/ 这样的结构,里面是一个 CSS 文件和一个 JS 文件,以及四个小图片

代码部署

在主题footer.php文件里面body标签前面添加以下代码

<!-- 加载 Fancybox JS 文件 -->
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/fancybox/fancybox.js"></script> 
<!-- 加载 jQuery 文件,如果已经加载了,可以删除 -->
<!--<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>-->
<script type="text/javascript">
	$(document).ready(function() {
		$(".fancybox").fancybox();
                $("#showdiv").fancybox({'centerOnScroll':true});
	});
</script>

然后再header.php文件的header标签内,引入插件的样式

<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/fancybox/fancybox.css" />

然后结束了吗?还没呢,接下来在主题的函数文件function.php里面添加代码

//fancybox 图片灯箱效果
add_filter('the_content', 'fancybox');
function fancybox ($content)
{ global $post;
$pattern = "/<a(.*?)href=('|")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|")(.*?)>(.*?)</a>/i";
$replacement = '<a$1href=$2$3.$4$5 rel="box" class="fancybox"$6>$7</a>';
$content = preg_replace($pattern, $replacement, $content);
return $content;
}

然后,OVER

使用

使用的时候非常简单,在插入图片的时候选择媒体文件就可以了,其实就是给图片添加个 A 标签而已
Fancybox:简单好用的看图jQuery插件
如果是添加外链的话也可以的,选择图片 URL 就可以了
Fancybox:简单好用的看图jQuery插件
简单吧,而且你第一次添加之后,以后都是默认添加到图片的,不需要每次都设置的 :razz: :razz: :razz:

强烈注意,代码部署完毕,然后清理网站缓存!!!!!!!!!!

预览

Fancybox:简单好用的看图jQuery插件

Fancybox:简单好用的看图jQuery插件

Fancybox:简单好用的看图jQuery插件

Fancybox:简单好用的看图jQuery插件

Fancybox:简单好用的看图jQuery插件

Fancybox:简单好用的看图jQuery插件

点击这里查看 flash 视频

点击这里加载本页中一个隐藏的 DIV。

相关链接

文件下载
-- 完 --
Fancybox:简单好用的看图jQuery插件
扫码订阅,第一时间获得更新
微信扫码二维码,订阅我们网站的动态,另外不定时发送 WordPress 小技巧,你可以随时退订,欢迎订阅哦~

极客公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:Fancybox:简单好用的看图jQuery插件

极客公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:Fancybox:简单好用的看图jQuery插件
喜欢 (7)
云落
关于作者:
无折腾,不生活,我是一个WordPress菜鸟,一个玩淘宝的卖家,欢迎你认识我,我是云落!
发表我的评论
取消评论
表情 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(12)个小伙伴在吐槽
  1. 这个已经实现了,发现云落的有些问题,点开图片后,那个关闭的x,按钮没了,不知道是不是七牛缓存的原因
    同盟源2015-01-11 12:45 回复 Windows 7 | Chrome 39.0.2171.95
    • 云落
      一般是缓存
      云落2015-01-11 15:51 回复 未知操作系统 | Firefox浏览器 37.0
  2. 照做了,可是图片上没有左右和关闭按钮,咋解决呢
    6882014-12-17 16:50 回复 Windows 8.1 | 搜狗浏览器 2.X
    • 可以用插件的:Auto Highslide
      同盟源2014-12-17 18:04 回复 Windows 7 | Chrome 39.0.2171.95
      • 云落
        知道,但是没代码简单
        云落2014-12-18 14:55 回复 Android 4.4.4 | WordPress客户端 android
    • 是不是压缩js代码了
      同盟源2015-01-11 12:56 回复 Windows 7 | Chrome 39.0.2171.95
      • 云落
        和那个没关系
        云落2015-01-11 15:55 回复 未知操作系统 | Firefox浏览器 37.0
  3. 完全照做了,怎么不行呢
    滕然凌若2014-12-09 15:44 回复 Windows XP | Chrome 39.0.2171.71
    • 云落
      刷新缓存
      云落2014-12-10 00:05 回复 Android 4.4.4 | WordPress客户端 android
  4. 完全照做了,怎么不行呢
    乐趣2014-11-10 01:40 回复 Windows 8.1 | Chrome 31.0.1650.63
    • 云落
      哪里不行?
      云落2014-11-10 16:11 回复 Windows 8.1 | Firefox浏览器 31.0