网站特别社交类,经常用到图片浏览或相册集。对于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打包好的压缩版本,后个是我扩展的中文翻译,原版为英文:内容:
2、定义参数:
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参照开头列出的官网。
欢迎批评帮助请留言。