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

网站特别社交类，经常用到图片浏览或相册集。对于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"></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>

</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参照开头列出的官网。
欢迎批评帮助请留言。

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

网络编程懒人入门(三)：快速理解TCP协议一篇就够
1.前言本系列文章的前两篇<网络编程懒人入门(一):快速理解网络通信协议(上篇)>.<网络编程懒人入门(二):快速理解网络通信协议(下篇)>快速介绍了网络基本通信协议及理论基 ...
网络编程懒人入门(二)：快速理解网络通信协议（下篇）
1.前言本文上篇<网络编程懒人入门(一):快速理解网络通信协议(上篇)>分析了互联网的总体构思,从下至上,每一层协议的设计思想.基于知识连贯性的考虑,建议您先看完上篇后再来阅读本文. 本 ...
网络编程懒人入门(一)：快速理解网络通信协议（上篇）
1.写在前面论坛和群里常会有技术同行打算自已开发IM或者消息推送系统,很多时候连基本的网络编程理论(如网络协议等)都不了解,就贸然定方案.写代码,显得非常盲目且充满技术风险. 即时通讯网论坛里精心整 ...
网络编程懒人入门(七)：深入浅出，全面理解HTTP协议
转自即时通讯网:http://www.52im.net/ 本文引用了自简书作者"涤生_Woo"的文章,内容有删减,感谢原作者的分享. 1.前言 HTTP(全称超文本传输协议,英文全 ...
网络编程懒人入门(十二)：快速读懂Http/3协议，一篇就够！
本文中文译文由作者"ably.io"发布于公众号"高可用架构",译文原题:<深入解读HTTP3的原理及应用>.英文原题:<HTTP/3 dee ...
网络编程懒人入门(六)：史上最通俗的集线器、交换机、路由器功能原理入门
1.前言即时通讯网整理了大量的网络编程类基础文章和资料,包括<TCP/IP协议卷1>.<[通俗易懂]深入理解TCP协议>系列.<网络编程懒人入门>系列.< ...
网络编程懒人入门(九)：通俗讲解，有了IP地址，为何还要用MAC地址？
1.前言标题虽然是为了解释有了 IP 地址,为什么还要用 MAC 地址,但是本文的重点在于理解为什么要有 IP 这样的东西.本文对读者的定位是知道 MAC 地址是什么,IP 地址是什么. (本文同步 ...
网络编程懒人入门(八)：手把手教你写基于TCP的Socket长连接
转自即时通讯网:http://www.52im.net/ 本文原作者:"水晶虾饺",原文由"玉刚说"写作平台提供写作赞助,原文版权归"玉刚说" ...
网络编程懒人入门系列目录集合
原文链接:https://yq.aliyun.com/articles/633630 收起本文原作者:"水晶虾饺",原文由"玉刚说"写作平台提供写作赞助,原文 ...

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

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

最新文章

热门文章