废话不多说，进入正题。这次要向大家介绍的在Blogger上使用Highslide JS，使得图片能以更好的形式向读者展示。
具体效果是这样的——点击Blogger上的图片后，它会自动放大悬浮显示：
(此图仅为展示放大后的效果，要体验实际效果请点下方的测试网页)
或者你也可以进入1号测试网页和2号测试网页（2号效果比较好，但不保证长久）点下图片看看效果。
实现方法：
1.控制台-布局-修改HTML，在<head>和</head>标签内加入以下代码：
<script type="text/javascript" src="http://youke.xm.com/highslide/highslide4.js"></script>
<link rel="stylesheet" type="text/css" href="http://youke.xm.com/highslide/highslide4.css" />
<script type="text/javascript">
//<![CDATA[
hs.registerOverlay({
html: '<div class="closebutton" onclick="return hs.close(this)" title="Close"></div>',
position: 'top right',
fade: 2 // fading the semi-transparent overlay looks bad in IE
});
hs.graphicsDir = 'http://youke.xm.com/highslide/graphics/';
hs.wrapperClassName = 'borderless';
//]]>
</script>
至此Blogger方面的Hack已经完成，是不是相当简单？ （你们现在是简单了，当初Luke折腾了老半天来调试JS和CSS，T T）
2009.8.24更新：为避免外链空间失常导致Highslide无效，特提供分流外链地址，如果你发现Highslide不能使用了，请将上面红色部分的地址分别换成下面的地址：
http://youke007.bluechiphosting.com/highslide/highslide4.js
http://youke007.bluechiphosting.com/highslide/highslide4.css
http://youke007.bluechiphosting.com/highslide/graphics/
当然，最保险的是将修改后的文件传到你自己的服务器上，下面会说道。
2.以后在发图片时，如果想使用Highslide效果，可以通过以下形式来发布图片：
<a href="要展示的图片地址" class="highslide" onclick="return hs.expand(this)">
<img src="要展示的图片的缩略图地址" alt="Highslide JS" title="Click to enlarge" height="120" width="120" /></a>
其中：
“要展示的图片网络地址”是放大后的图片地址
“要展示的图片的缩略图网络地址”是图片默认样子的地址，可以和放大后的图片网络地址一致
缩略图大小可以根据个人网页显示效果调整height和width参数。
ps：你可以在Blogger的日志模板内加入这段代码，以后调用起来就方便了。
3.如果你想让图片在放大后能显示一段说明，那么可以使用下面的代码来发布图片：
<div>
<a href="要展示的图片网络地址" class="highslide" onclick="return hs.expand(this)">
<img src="要展示的图片的缩略图网络地址" alt="Highslide JS" title="Click to enlarge" height="120" width="107" /></a>
<div class="highslide-caption">这里可以写上对图片的说明</div>
</div>
没了，就这几步，很方便吧？自己试试去吧~
写在最后：其实这个图片展示方法不光光可以用在Blogger上，由于是在网页头部中调用了外部的js文件，所以任何网页通过编辑后都能拥有这种效果，Wordpress还有专门的插件支持Highslide，感兴趣的可以搜一搜。
在步骤1中，你可以看到红色部分的地址引用的是我存储在个人主机上的文件，如果你也拥有可以外链的网上空间的话（这里已经介绍了很多免费空间了），可以尝试下载相关文件（下载：uushare），传到自己的空间上（记得修改相关代码以及js、css文件中的文件引用地址），以防Luke的空间不能使用时导致这个Hack实效。如果你仅仅拥有Blogger而没有空间的话也没问题，尽管使用Luke提供的外链好了，这篇文章就是献给所有仍旧在坚持使用Blogger的朋友们的！
这次的文章介绍的是单个图片使用Highslide效果，如果你想知道多个图片如何同时使用Highslide效果（更酷的相册显示效果）的话，请点击这里。
-------------------------------------------------------------------------------------
以上图片和文字均为原创，转载请注明转自Luke瞎折腾！
14 评论:
文本文档还有Iframe with form等效果怎么实现也说说吧～～
今天刚刚看到这个插件，刚准备试验，网上搜索居然有人发了教程，看日期，正好今天……
@小天
你可以查看相关效果网页的源代码，然后把head部分的代码（步骤1）换成相应的代码就行了，文件地址仍旧可以引用我的：）
GoodLuck
@Luke
它有一个很方便的编辑器，好爽～～
@小天
是啊，基本只要复制黏贴就行了，唯一要解决的就是文件的远程调用问题了。
为什么我按官方的搞的脚本不工作呢？？？
@小天
很有可能是JS、CSS和Graphics文件夹的引用出现了问题，我当初弄也搞了很长时间，定下心来，慢慢弄，肯定没问题的。实在不高兴弄的话也可以使用我提供的外链。
帮忙看一下，为什么http://fancybox.net/example
这个我在blogger上也做不出来？
@小天
HighSlide你在Blogger做不出来？
为什么要使用fancybox...感觉完全没有Highslide效果好啊...看了下example和usage，觉得你安装失败可能是文件引用错误。
代码中的path-to-file/jquery.js那些path-to-file是要换成你自己的文件外链目录的，而且还要改js，css文件里面的外链目录地址。
@Luke
全部都改了，highside的脚本太大了。fancybox是共享jquery，还能做些别的效果。
都改了，还是不行呢，你看我的测试页面：
http://ceshi12.blogspot.com/
问题主要是最后一项ajax调用
@小天
我看你测试Blogger是直接点开图片，应该是js文件的调用出现了问题（根本没有调用成功，文件直接以超链接形式打开）。
PS：我也只尝试过Highslide，暂时对别的js没有研究的意向...还有fancybox的问题的话，尝试google下吧...我相信比我懂的人肯定很多：）
其实fancybox比highside 简单很多，目前没有人用呢……图片，内链，iframe都成功了，就是ajax失败……
帮忙研究下拉～～
似乎是因为不支持ajax异步，只能ajax同一个服务器上的文件……
有解决办法吗？
@小天
额。。。如果不能远程调用的话。。。那blogger是没用办法使用了。。。
发表评论
有问题请留言，Luke帮你解决。问了方便回答，请尽量不要匿名。