jquery相关文章列表 | 皇家元林

jQuery为每张图片链接自动加上class属性

皇家元林 — Tue, 29 Mar 2011 06:08:02 +0000

先上码：

/* 用 jQuery 为每张图片链接自动加上 class="thickbox" */
$('#content p a').each(function(){ //根据主题内容区的 id 设置选择器
var a_href = $(this).attr('href').toLowerCase();
var file_type = a_href.substring(a_href.lastIndexOf('.'));
if (file_type == '.jpg' || file_type == '.png' || file_type == '.gif'){$(this).addClass('thickbox')};
});

这个再配合lightbox之类的图片展示代码用起来不错。
此代码发现于ZWW-http://zww.me/archives/25196

还有一个
[warning]$('.entry a:has(img)').addClass("thickbox");[/warning]

版权声明: 本文采用 BY-NC-SA 协议进行授权，如无注明均为原创，转载请注明转自皇家元林
本文链接: jQuery为每张图片链接自动加上class属性

用jQuery给WP加上lightbox特效

皇家元林 — Sat, 26 Mar 2011 05:34:34 +0000

我找了很多关于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标签里加上这句：

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

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

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

2011年3月28日，即今天，我杯具地发现一款Slimbox插件，跟这效果一样，JS体积小到只有几KB，可惜没有自适应窗口大小功能！

版权声明: 本文采用 BY-NC-SA 协议进行授权，如无注明均为原创，转载请注明转自皇家元林
本文链接: 用jQuery给WP加上lightbox特效

给朕的博客图片增加点效果

皇家元林 — Thu, 08 Apr 2010 01:14:24 +0000

今天朕到处逛了一下，想给朕博客的图片添加一些效果，朕博客的图片都是外链flickr的，这点是为了防止搬家麻烦。看到一款插件叫Overlay4WP，听说可以给图片一点效果，但是朕安装之后没一点反应，不知道怎么回事，难道需要上传到自己的空间才可以？
然后就没管了。突然看到一篇文章《利用jquery实现图片显隐特效》，是那只知更鸟写的，操作很简单，效果还不错。下面做个记号：
演示：见本博客(把鼠标放在图片上试试)
操作：1、首先需要在header.php中加载jquery，可以使用外链也可以内链。
外链可以利用google为我们提供的JS库，据说可以提高js加载速度，格式如下：

内链格式为：

然后再在header.php中添加：

OK，你刷新下你的博客看看效果把。
还有一种是鼠标悬停到图片上时，图片变得清晰。就是把后面的代码换成下面的即可：

采用哪种图片显隐特效就看你喜好了，这一特效支持所有浏览器。

版权声明: 本文采用 BY-NC-SA 协议进行授权，如无注明均为原创，转载请注明转自皇家元林
本文链接: 给朕的博客图片增加点效果