@@ -0,0 +1,62 @@
+---
+title: 给博客添加了 Highslide 功能
+author: orzFly
+layout: post
+permalink: /html/integrate-highslide.html
+btc_post:
+ - 'a:6:{s:2:"ID";s:3:"138";s:13:"post_date_gmt";s:19:"2009-08-30 00:37:15";s:23:"initial_import_date_gmt";s:19:"2010-03-22 21:57:19";s:20:"last_import_date_gmt";s:19:"2010-03-22 21:57:19";s:4:"hits";s:1:"0";s:6:"misses";s:1:"1";}'
+btc_comment_counts:
+ - 'a:0:{}'
+btc_comment_summary:
+ - 'a:0:{}'
+yourls_shorturl:
+ - http://miv.im/t60p
+categories:
+ - Life
+---
+一直以来,在蓝蓝小雪的博客上展示图片都是个问题。不过,现在好了,我给博客安装了 [Highslide4WP][1] 插件,于是,现在点击图片会有很炫的效果喔。几个实例,快点点看:
+
+[img s="http://images.homezz.com?i=aHR0cDovL2Zhcm0zLnN0YXRpYy5mbGlja3IuY29tLzI2NjAvMzg2ODQ3OTM3MV81ZDY3MDM1M2E1X20uanBn" l="http://images.homezz.com?i=aHR0cDovL2Zhcm0zLnN0YXRpYy5mbGlja3IuY29tLzI2NjAvMzg2ODQ3OTM3MV9iZWM0ZmIzNTZhX28uanBn" id="200908300819cosbeta1"][Cosbeta][2](此图来源:[Kenengba][3])[/img]
+[img s="http://images.homezz.com?i=aHR0cDovL2Zhcm0zLnN0YXRpYy5mbGlja3IuY29tLzI1MjMvMzg2OTI2MDc3OF9iZTNjNWQ1NjQwX20uanBn" l="http://images.homezz.com?i=aHR0cDovL2Zhcm0zLnN0YXRpYy5mbGlja3IuY29tLzI1MjMvMzg2OTI2MDc3OF85YzAyMWJiMzQ4X28uanBn" id="200908300821cosbeta2"][Cosbeta][2](此图来源:[Showfom][4])[/img]
+[img s="http://images.homezz.com?i=aHR0cDovL2Zhcm0zLnN0YXRpYy5mbGlja3IuY29tLzI1NjMvMzg2ODQ3OTA4OV8yNGI4ZjJlZGExX20uanBn" l="http://images.homezz.com?i=aHR0cDovL2Zhcm0zLnN0YXRpYy5mbGlja3IuY29tLzI1NjMvMzg2ODQ3OTA4OV81NWMwNDY4NTkxX28uanBn" id="200908300821cosbeta3"][Cosbeta][2](此图来源:[Showfom][4])[/img]
+[img s="http://images.homezz.com?i=aHR0cDovL2Zhcm0zLnN0YXRpYy5mbGlja3IuY29tLzI0MjkvMzg2ODQ3ODg2MV8xZWQ2MmI1ZGIzX20uanBn" l="http://images.homezz.com?i=aHR0cDovL2Zhcm0zLnN0YXRpYy5mbGlja3IuY29tLzI0MjkvMzg2ODQ3ODg2MV9lMTY5MzQzMzNhX28uanBn" id="200908300821cosbeta4"][Cosbeta][2](此图来源:[Showfom][4])[/img]
+
+哈哈,以上图片就是蓝蓝小雪的主机服务商 [HomeZZ][5] 的老大 [Cosbeta][2] 的照片。效果很好吧?
+
+最初是在 [Showfom][4] 的博客上看到的这个效果,看到了很喜欢,很像放到自己博客上用。看了一下他的代码,发现用了 Highslide 这个东西。于是在主机群里面问了一下,[Eplie][6] 告诉我,有个插件叫做 [Highslide4WP][1]。
+
+兴冲冲地来到 WP 后台安装,不料安装成功之后在文章中插入的图片还是点击之后在新窗口打开。蓝蓝小雪研究了一下,发现 WPMU 竟然把所有 JavaScript 都过滤了!早知如此,我就不用 WPMU,直接用 WP 了。[Eplie][6] 说这种情况就用 [Shortcode][7] 吧。
+
+最终,根据官方手册的说明,写出了一段代码,放到了 functions.php 中。于是这堆问题终于解决了,所以上面的实例才会有效。
+
+呃,我还是把这个代码贴出来吧,免得有人有同样的问题而找不到方法解决:
+
+<pre class="brush: php">function snow518_img($atts, $content = null)
+{
+extract(shortcode_atts(array(
+"l" => 'http://', /**默认值**/
+"s" => 'http://', /**默认值**/
+"id" => '43523324', /**默认值**/
+), $atts));
+return '<div><a href="'.$l.'" onclick="return hs.expand(this, {captionId:'caption_'.$id.''});"><img src="'.$s.'" alt="image" title="Click to enlarge" /></a></div><div id="caption_'.$id.'">'.$content.'</div>';
+}
+add_shortcode("img", "snow518_img");
+</pre>
+
+使用的时候在文章中插入如下代码即可(请把“【】”换成“[]”):
+
+<pre class="brush: html">【img s="缩略图地址" l="大图地址" id="唯一ID(不要和已有图片重复)"】说明内容【/img】</pre>
+
+————————碎碎念的分割线————————
+
+早上两同学([Lois Guo][8]、[Yanrong Jin][9])发短信,问我是否应该今日报道(实际上应该是明天),只是因为 [Yanrong Jin][9] 看到一年级(对,是一年级)有同学去学校,认为我们初三也得去……
+
+ [1]: http://wordpress.org/extend/plugins/highslide4wp/
+ [2]: http://orzfly.com/weblog/people/cosbeta/
+ [3]: http://www.kenengba.com/post/1617.html/2
+ [4]: http://showfom.com/wordcamp-2009-ends/
+ [5]: http://homezz.com/?d3ouYmx1ZXNub3dAZ21haWwuY29t
+ [6]: http://orzfly.com/weblog/people/Epile
+ [7]: http://codex.wordpress.org/Shortcode_API
+ [8]: http://orzfly.com/weblog/people/lois-guo/
+ [9]: http://orzfly.com/weblog/people/yanrong-jin/
\ No newline at end of file