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

昨天Luke介绍了在Blogger上使用Highslide显示单个图片的方法，今天来介绍下显示多个图片（即相册功能）的方法，效果更酷哦~

演示（点下面的图片看看吧~）：

潜艇U盘

蜡制彩杯

木制挂钟

实现方法：

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瞎折腾！

收藏本文