很早的时候想着自己做个wp的主题，只是从来不去实现，现在越来越往后了，实际其实一直都有= = 但是感觉做之前的博客各方面都调试一下也许更好，所以尽量把插件这块配好。。。于是由此想到了博客图片的灯箱效果，也就是点击图片之后淡出放大并显示在整个页面之上。 然后还是经过搜索找到了自己想要的东西。一般大家都是通过安装plugin实现类似功能，而提供功能的插件也很多，比较之下在thickbox和slimbox时间选择了后者，原因是它的敏捷性–它只有我需要的一个功能。当然还有直接在主题内挂载jQuery库借助wp自身的一些设置自己实现类似的效果，自己还有待学习，先送上教程~ 忘了应该给出效果图的，这样，你点击这张图，试试吧~
——————————————————————————-
除此之外呢，还有一个更新就是图片的异步载入，说白了就是当你打开一个页面的时候，页面上的图片并不是一下子全部下载下来显示的，而是根据你的滑动条的位置来判断自己是否显示。而且，图片显示的时候带有淡入淡出的效果，很流畅。 其实这同样是有强大的jQuery驱动的，只是这次我们并不去安装神恶魔plugin，因为它本身的设置很简单。 具体实现如下： 1.下载lazyload.js并上传到主题相应的目录中 2.在header.php文件</head>标签前（最好在<?php wp_head(); ?>语句前）添加如下代码：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory');?>/js/jquery.lazyload.js"></script>
<script type="text/javascript">
$(function() {
$("img").lazyload({
placeholder : "<?php bloginfo('template_directory');?>/images/grey.gif",
effect : "fadeIn"
});
});
</script>
第1行是说明调用jQuery库 第2行是说明lazyload.js文件的载入位置，<?php bloginfo(‘template_directory’);?>是调用相应主题路径的语句。 第5行img是延迟加载所有图片，可根据实际情况更改，有时候我们并不想将侧边栏的留言者的头像延迟加载，而只是要实现文章中的图片使用该效果，则根据实际情况修改相应的img语句即可，比如#post img 第6行语句是在图片加载前先用一个透明的灰色1×1像素的图片进行占位。 第7行是实现图片“淡入”的效果 当然上述只是我目前网页中的实现效果，它其他可用的效果还有很多，我就简略说一下： 1.当图片没有看到之前先把图片载入200像素（不设置的话，默认载入像素是零）
2.在图片加载前先用一个透明的灰色1×1像素的图片进行占位
$("img").lazyload({ placeholder : "img/grey.gif" });
3.自定义触发事件进行载入：比如“click”（鼠标点击）和”mouseover”(鼠标滑过)等事件触发加载图片，使用自定义的事件, 如: sporty 和 foobar；默认情况下处于等待状态, 直到用户滚动到窗口上图片所在位置。 在灰色占位图片被点击之前阻止加载图片：
$("img").lazyload({ placeholder : "img/grey.gif", event : "click" });
4.通过定义effect 参数来定义一些图片显示效果，比如fadeIn
$("img").lazyload({ placeholder : "img/grey.gif", effect : "fadeIn" });
5.图片在容器内显示：可以将插件用在可滚动容器的图片上, 例如带滚动条的 DIV 元素. 你要做的只是将容器定义为 jQuery 对象. CSS文件中：
#container { height: 600px; overflow: scroll; }
JavaScript 代码：
$("img").lazyload({ placeholder : "img/grey.gif", container: $("#container") });
6.当图片不连续时：当图片不是连续排列，我们滚动页面的时候，lazy load会循环加载图片。在循环加载中，它会检查图片是否在可见区域内，默认情况是在找到第一张不在可视区域内的图片后，会停止循环。图片被认为是流式分 布的, 图片在页面中的次序和 HTML 代码中次序相同. 但是在一些布局中, 这样的假设是不成立的. 不过你可以通过 failurelimit 选项来控制加载行为.
$("img").lazyload({ failurelimit : 10 });
设定failurelimint参数为10，它会当载入10张照片之后，停止寻找图片载入； 7.延迟载入图片：Lazy Load 插件的一个不完整的功能, 但是这也能用来实现图片的延迟加载. 下面的代码实现了页面加载完成后再加载. 页面加载完成 5 秒后, 指定区域内的图片会自动进行加载.
$(function() { $("img:below-the-fold").lazyload({ placeholder : "img/grey.gif", event : "sporty" }); }); $(window).bind("load", function() { var timeout = setTimeout(function() {$("img").trigger("sporty")}, 5000); });
具体文章参见《Lazy Load Plugin for jQuery》 这样，只有到你移动到那里，那里的图片才会在那是载入~ 今天就先这样吧~~ （刷了个有点失败的ROM，下午） 好好学习，天天向上~~
? ICP?