回到首页
订阅Luke瞎折腾
找资源前务必先看这里!!
Blogger技巧
免费空间推荐
Luke的网络收藏夹
Luke的网络硬盘
控制台
新建日志

2009/08/23

Highslide For Blogger——更酷的图片展示

字体大小:| |
真的很久很久没有发布有关Blogger Hack的文章了,不是Luke放弃了Blogger,实在是伟大的G^F*W搞得我很没脾气!先是Blogger被封,接着又是.net.ru的域名被封,让我原本想将lukexzt.net.ru这个域名绑定到Blogger以重回Blogger的愿望都落空,真的很无奈啊~现在的情况就是Luke瞎折腾在国内以 lukexzt.net.ru这个域名更新,在国外则以 lukexzt.blogger.com 来更新,麻烦啊...

废话不多说,进入正题。这次要向大家介绍的在Blogger上使用Highslide JS,使得图片能以更好的形式向读者展示。

具体效果是这样的——点击Blogger上的图片后,它会自动放大悬浮显示:

highslide for 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 评论:

Unknown 说... 回复此评论

文本文档还有Iframe with form等效果怎么实现也说说吧~~

Unknown 说... 回复此评论

今天刚刚看到这个插件,刚准备试验,网上搜索居然有人发了教程,看日期,正好今天……

Luke 说... 回复此评论

@小天

你可以查看相关效果网页的源代码,然后把head部分的代码(步骤1)换成相应的代码就行了,文件地址仍旧可以引用我的:)

GoodLuck

Unknown 说... 回复此评论

@Luke
它有一个很方便的编辑器,好爽~~

Luke 说... 回复此评论

@小天

是啊,基本只要复制黏贴就行了,唯一要解决的就是文件的远程调用问题了。

Unknown 说... 回复此评论

为什么我按官方的搞的脚本不工作呢???

Luke 说... 回复此评论

@小天

很有可能是JS、CSS和Graphics文件夹的引用出现了问题,我当初弄也搞了很长时间,定下心来,慢慢弄,肯定没问题的。实在不高兴弄的话也可以使用我提供的外链。

Unknown 说... 回复此评论

帮忙看一下,为什么http://fancybox.net/example

这个我在blogger上也做不出来?

Luke 说... 回复此评论

@小天

HighSlide你在Blogger做不出来?
为什么要使用fancybox...感觉完全没有Highslide效果好啊...看了下example和usage,觉得你安装失败可能是文件引用错误。

代码中的path-to-file/jquery.js那些path-to-file是要换成你自己的文件外链目录的,而且还要改js,css文件里面的外链目录地址。

Unknown 说... 回复此评论

@Luke

全部都改了,highside的脚本太大了。fancybox是共享jquery,还能做些别的效果。

都改了,还是不行呢,你看我的测试页面:
http://ceshi12.blogspot.com/

问题主要是最后一项ajax调用

Luke 说... 回复此评论

@小天

我看你测试Blogger是直接点开图片,应该是js文件的调用出现了问题(根本没有调用成功,文件直接以超链接形式打开)。

PS:我也只尝试过Highslide,暂时对别的js没有研究的意向...还有fancybox的问题的话,尝试google下吧...我相信比我懂的人肯定很多:)

Unknown 说... 回复此评论

其实fancybox比highside 简单很多,目前没有人用呢……图片,内链,iframe都成功了,就是ajax失败……

帮忙研究下拉~~

Unknown 说... 回复此评论

似乎是因为不支持ajax异步,只能ajax同一个服务器上的文件……

有解决办法吗?

Luke 说... 回复此评论

@小天

额。。。如果不能远程调用的话。。。那blogger是没用办法使用了。。。

发表评论

有问题请留言,Luke帮你解决。问了方便回答,请尽量不要匿名。