使用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="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标签而已
如果是添加外链的话也可以的,选择图片URL就可以了
简单吧,而且你第一次添加之后,以后都是默认添加到图片的,不需要每次都设置的 😛 😛 😛
强烈注意,代码部署完毕,然后清理网站缓存!!!!!!!!!!
预览
点击这里加载本页中一个隐藏的DIV。
相关链接
-- 完 --
这个已经实现了,发现云落的有些问题,点开图片后,那个关闭的x,按钮没了,不知道是不是七牛缓存的原因
@同盟源 一般是缓存
照做了,可是图片上没有左右和关闭按钮,咋解决呢
@688 可以用插件的:Auto Highslide
@同盟源 知道,但是没代码简单
@688 是不是压缩js代码了
@同盟源 和那个没关系
完全照做了,怎么不行呢
@滕然凌若 刷新缓存
完全照做了,怎么不行呢
@乐趣 哪里不行?