加载中 ... ...
七月 12 2009

Highslide 使用手记 hits

作者:山顶洞羊1981简洁查看


Highslide是一款很好用的图片、画廊、多媒体展示效果代码。

说到Highslide,不得不先说一下这款代码也有用到的让人印象深刻的效果----Lightbox,一种相当流行的突出显示要展示内容的方式。当然,也有叫thickbox或者其它名字的,再译成中文,就更多千奇百怪的叫法了。
其典型的做法就是,点击页面上的链接时,弹出一个类似于对话框的居中区域,用于展示主要的内容;除去屏幕中心位置的这个对话框,其他的区域都以淡出的方式逐渐变暗。这和Windows操作系统的注销/关机对话框出现时的效果差不多。也许,最早使用这种展示效果的设计师正是从这里汲取灵感的吧。
一般讨论到Lightbox就是指这种效果,这种除滚动、书签式切换外用于交互显示页面可隐藏内容的广泛流行的方式。
但Lightbox最早的时候是指Lokesh Dhakar制作的一个用来放大显示图片覆盖于当前页面之上的效果代码:http://www.huddletogether.com/projects/lightbox2/
这个代码也同样是相当流行的,还和Highslide做成wordpress的插件。

早些时候也自己实现过这种效果,但扩展性和功能就太差了。想想还是直接用别人的吧。

对比之下,Highslide的功能就强大不少了,代码也整理得比较好。但如果用Lightbox的话还得同时载入prototype和scriptaculous两个库,想想都让人头疼。

以下是Highslide的官方介绍:

What is Highslide JS?

Highslide JS is an open source image, media and gallery viewer written in JavaScript. These are some of it's advantages:

  • Quick and elegant looking.
  • No plugins like Flash or Java required.
  • Popup blockers are no problem. The content opens within the active browser window.
  • Single click. After opening the image or HTML popup, the user can scroll further down or leave the page without closing it.
  • Lots of configuration options and scalability without compromizing on simplicity. A component system lets you strip away unused features down to a filesize of 10kB.
  • Outstanding, unconditional and free user support for both commercial and non-commercial users.
  • Compatibility and safe degrading. If the user has disabled JavaScript or is using an old browser, the browser redirects directly to the image itself or to a given HTML page.



用了下,其中最为喜欢的特点有:

1,灵活的组件式功能配置
2,完善的展示解决方案
3,丰富的参数和控制函数
4,详尽的配置例子、使用说明和参考文档

这里随便举些例子吧:

蒲公英  <strong>顺峰山公园灯展</strong><br />2007年10月,南方秋夜。<br />看好多大叔都端着高级单反架着三角架,自己这消费级的相机还真是相形见拙。不过在那样熙攘的人群里手持拍摄的夜景能这样,也算满足了。<br /><br />Photo by KEVIN SHEEP<br />Canon PowerShot S3 IS<br />f/3.2 1/60s

flash展示与highslide结合的应用:
http://www.ks-pe.com/Skin/ksAlbum.html

实际上,highslide的功能和可配置的内容还远不止这些。下载回来试试吧!

http://highslide.com/

我顶19人顶)
我踩8人踩)
评论
  • [wing]
    很好啊,虽然看不懂,我就要你的评论了!
profile picture