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

2009/08/24

Highslide For Blogger——更酷的图片展示(2)

字体大小:| |
昨天Luke介绍了在Blogger上使用Highslide显示单个图片的方法,今天来介绍下显示多个图片(即相册功能)的方法,效果更酷哦~

演示(点下面的图片看看吧~):

实现方法:

1.控制台-布局-修改HTML,在和标签内加入以下代码:
<script src='http://youke,xm.com/highslide/highslide-with-gallery4.js' type='text/javascript'/>
<link href='http://youke,xm.com/highslide/highslide4.css' rel='stylesheet' type='text/css'/>

<!--
2) Optionally override the settings defined at the top
of the highslide.js file. The parameter hs.graphicsDir is important!
-->

<script type='text/javascript'>
hs.graphicsDir = 'http://youke.xm.com/highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.wrapperClassName = 'dark borderless floating-caption';
hs.fadeInOut = true;
hs.dimmingOpacity = .75;

// Add the controlbar
if (hs.addSlideshow) hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
opacity: .6,
position: 'bottom center',
hideOnMouseOut: true
}
});
</script>

至此Blogger方面的Hack已经完成。

PS:为避免外链空间失常导致Highslide无效,特提供分流外链地址,如果你发现Highslide不能使用了,请将上面红色部分的地址分别换成下面的地址:
http://youke007.bluechiphosting.com/highslide/highslide4.js
http://youke007.bluechiphosting.com/highslide/highslide4.css
http://youke007.bluechiphosting.com/highslide/graphics/

当然,最保险的是将修改后的文件传到你自己的服务器上,下面会说道。


2.以后在发多个图片时,如果想使用Highslide相册效果,可以通过以下形式来发布图片:
<div class="highslide-gallery">

<a href="图片一的网络地址" class="highslide" onclick="return hs.expand(this)">
<img src="图片一的缩略图网络地址" alt="Highslide JS" title="Click to enlarge" height="160" width="240" ></a>
<div class="highslide-caption"> 对图片一的说明</div>

<a href="图片二的网络地址" class="highslide" onclick="return hs.expand(this)">
<img src="图片二的缩略图网络地址" alt="Highslide JS" title="Click to enlarge" height="160" width="240" ></a>
<div class="highslide-caption">
对图片二的说明
</div>

<a href="图片三的网络地址" class="highslide" onclick="return hs.expand(this)">
<img src="图片三的缩略图网络地址" alt="Highslide JS" title="Click to enlarge" height="160" width="240" /></a>

<div class="highslide-caption">
对图片三的说明
</div>

</div>

...更多的图片以此类推...


其中:
“图片的缩略图网络地址”是图片默认样子的地址,可以和放大后的图片网络地址一致

缩略图大小可以根据个人网页显示效果调整height和width参数。

ps:你可以在Blogger的日志模板内加入这段代码,以后调用起来就方便了。



写在最后:其实这个图片展示方法不光光可以用在Blogger上,由于是在网页头部中调用了外部的js文件,所以任何网页通过编辑后都能拥有这种效果,Wordpress还有专门的插件支持Highslide,感兴趣的可以搜一搜。

在步骤1中,你可以看到红色部分的地址引用的是我存储在个人主机上的文件,如果你也拥有可以外链的网上空间的话(这里已经介绍了很多免费空间了),可以尝试下载相关文件(下载:uushare),传到自己的空间上(记得修改相关代码以及js、css文件中的文件引用地址),以防Luke的空间不能使用时导致这个Hack实效。如果你仅仅拥有Blogger而没有空间的话也没问题,尽管使用Luke提供的外链好了,这篇文章就是献给所有仍旧在坚持使用Blogger的朋友们的!



-------------------------------------------------------------------------------------
以上图片和文字均为原创,转载请注明转自Luke瞎折腾

收藏本文
相关文章:

5 评论:

小天 说... 回复此评论

说起来 ,highside可以异步ajax吗?

就是txt文件都可以异步出来?

Luke 说... 回复此评论

@小天

ajax我没有试过,你查看下实例文件的源代码,应该能看出来。

小天 说... 回复此评论

实例都是用的一个服务器的文件,怎么看得出来哦……

不过我又发现一个很酷的

http://nyromodal.nyrodev.com/

超强的,只要研究透,什么功能都有~~

Luke 说... 回复此评论

@小天

哇,果然功能很丰富,不过最近要开学了,不准备在折腾别的东西了,毕竟Highslide已经能满足我大部分的需求了。

江湖客 说... 回复此评论

代码添加到哪里??

发表评论

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