懒人图片浏览（image galleries，相册）功略——highslide篇

网站特别社交类，经常用到图片浏览或相册集。对于FLASH不是很懂的我来说，只好寻求网络，还真让我找到两个相当易用，又酷炫的组件。基于脚本的highslide和基于FLASH的Simpleviewer。

 

因为我的相册在每张图片下面还要删除按钮，所以选择用前者，这篇就先介绍，下篇再讲后者。

先看官网上例子：http://highslide.com/#examples下载下来后有完整的DEMO
还有个FULL API：http://highslide.com/ref/

 

以我实现点击小图后，锁屏，然后放大图，再利用功能条前后张浏览。为例：

1、引入包：
<script type="text/javascript" src="/Include/highslide/highslide-with-gallery.packed.js"></script>
<script type="text/javascript" src="/Include/highslide/highslide-config.js"></script>
<link rel="stylesheet" type="text/css" href="/include/highslide/highslide.css" />

其中，前者highslide-with-gallery.packed.js是highslide打包好的压缩版本，后个是我扩展的中文翻译，原版为英文：内容：
hs.lang.cssDirection= 'ltr'; hs.lang.loadingText = '请稍候...'; hs.lang.loadingTitle = '关闭'; hs.lang.focusTitle = 'Click to bring to front'; hs.lang.fullExpandTitle = '实际大小'; hs.lang.creditsText = 'Powered by <i>*****网</i>'; hs.lang.creditsTitle = ''; hs.lang.previousText = '上一张'; hs.lang.nextText = '下一张'; hs.lang.moveText = '移动'; hs.lang.closeText = '关闭'; hs.lang.closeTitle = '关闭 (esc键)'; hs.lang.resizeTitle = '还原'; hs.lang.playText = '开始'; hs.lang.playTitle = '幻灯片播放(空格键)'; hs.lang.pauseText = '暂停'; hs.lang.pauseTitle = 'Pause slideshow (spacebar)'; hs.lang.previousTitle = '上一张 (←键)'; hs.lang.nextTitle = '下一张 (→键)'; hs.lang.moveTitle = '移动'; hs.lang.fullExpandText = '满屏'; hs.lang.number= '第 %1 张/共 %2 张'; hs.lang.restoreTitle = '点击关闭, 点击并拖动可移动图片'; hs.creditsHref = 'javascript:void(0);';

 

2、定义参数：
<mce:script type="text/javascript"><!-- hs.graphicsDir = '/Include/highslide/graphics/'; hs.align = 'center'; hs.transitions = ['expand', 'crossfade']; hs.fadeInOut = true; hs.dimmingOpacity = 0.8; hs.outlineType = 'rounded-white'; hs.captionEval = 'this.thumb.alt'; hs.marginBottom = 105; // make room for the thumbstrip and the controls hs.numberPosition = 'caption'; // Add the slideshow providing the controlbar and the thumbstrip hs.addSlideshow({ //slideshowGroup: 'group1', interval: 4000, repeat: true, useControls: true, overlayOptions: { className: 'text-controls', position: 'bottom center', relativeTo: 'viewport', offsetY: -60 }, thumbstrip: { position: 'bottom center', mode: 'horizontal', relativeTo: 'viewport' } }); // --></mce:script>

 

3、在页面上放置一组图片（相片）

 

可以使用HS自带的相册集样式(highslide-gallery)：
<div class="highslide-gallery" style="width: 600px; margin: auto">
 <a class='highslide' href='../images/thumbstrip01.jpg' οnclick="return hs.expand(this)">
  <img src='../images/thumbstrip01.thumb.png' alt='Mountain valley'/></a>

 <a class='highslide' href='../images/thumbstrip02.jpg' οnclick="return hs.expand(this)">
  <img src='../images/thumbstrip02.thumb.png' alt='Windy landscape'/></a>

</div>

 

你也可以自已写CSS样式，但要注意缩略图外包围A的class='highslide' 不可缺。
使用配置hs.captionEval = 'this.thumb.alt';则放大图后，缩略图的ALT将显示为图片名称。
另外：IE6下，在锁屏显示蒙板即配置：hs.dimmingOpacity = 0.8;时，我在本地OK，在服务器上大部份时间取不到高度值（刷新很多次偶尔会成功），导致锁屏失败。
查到HS在IE6下，使用语句height: expression( ( ( ignoreMe4 = document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) ) + 'px' ，获取全屏高度，不知何故。
谷歌一下，有个简单的办法是把，HTML页顶部的<!DOCTYPE 去掉，真的可以，但又引起页面其他版面出错，抓狂，望有高手指点。

此三步就能完成一个相册功能，真是过瘾。具体DEMO和API参照开头列出的官网。
欢迎批评帮助请留言。