欢迎光临
我们一直在努力

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

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

前言

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

素材准备

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

代码部署

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

<!-- 加载 Fancybox JS文件 -->
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/fancybox/fancybox.js"></script>
<!-- 加载 jQuery 文件,如果已经加载了,可以删除 -->
<!--<script src="https://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标签而已

如果是添加外链的话也可以的,选择图片URL就可以了

简单吧,而且你第一次添加之后,以后都是默认添加到图片的,不需要每次都设置的

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

预览

点击这里查看flash视频

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

相关链接

文件下载

赞(0) 打赏
未经允许不得转载:NixonLi博客 » Fancybox:简单好用的看图jQuery插件

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏