最新消息:Excel无乱码转CSV,由于工作原因很少更新博客和回复大家的评论,非常抱歉。

用jQuery给WP加上lightbox特效

我找了很多关于wp图片特效的插件,WP FancyZoom、Lightbox 2等等,我的老板还是不满意,他需要那种跟QQ空间里的差不多,点开图片,放大,然后还可以上一个下一个图片预览的效果。折腾了这么久,我才发现在wp世界里,这个效果叫Lightbox特效。于是我就Google之。

在一外国网站发现用jQuery给网站加这个特效,我突然有了想法,把他用在wp里也不错的。具体操作如下:
1、下载素材,点这里
2、把里面的CSS文件夹、js文件夹和images文件夹上传到你的主题目录。
3、修改jquery.lightbox-0.5.js文件,在30行的位置,或者搜索“imageLoading:”后面有几个图片的路径,将其改成绝对路径,此图片也是第2步里images文件里面的。因为这个相对路径很容易出现无法显示图片的错误。比如images/lightbox-ico-loading.gif修改成http://hjyl.org/wp-content/themes/yleave/images/lightbox-ico-loading.gif。
4、在head标签里加上这句:

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.lightbox-0.5.js"></script>

如果你的主题有jQuery库,第一句就可以删掉。
接着下面加上:

<script type="text/javascript">
$(function() {
	$('a').lightBox(); //给所有的链接加上lightbox特效
          //或者......
	$('.wp-caption a').lightBox(); //给wp-caption标签加上lightbox特效
          //或者......
	$('.gallery a').lightBox(); //给gallery标签加上lightbox特效
});
</script>

这个根据需要选择。
5、忘了重要的一步,加上CSS样式,在style.css文件里加上这句即可:

@import "css/jquery.lightbox-0.5.css";

来源:http://hjyl.org/jquery-wp-lightbox/

转载请注明:嗨酷哥,有你更酷! » 用jQuery给WP加上lightbox特效

与本文相关文章

发表我的评论

取消评论
表情 插代码

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

  • 必填项
  • 必填项