再谈东方之门建设进展照片之Gallery

鉴于上篇讲到了照片展示,拿了别人的照片,总要介绍下自己用来做什么,不然觉得心不安。

用于实现gallery的代码不少。有javascript的也不乏flash的。相关的介绍与汇总google下会有不少,比如:33 Most Beautiful Javascript and Flash Galleries20 Best jQuery Slideshow / Photo Gallery Plugins等。javascript代码框架(例如JQuery)一般都实现了更基础的一些代码,比如滑块、鼠标滚动等等,因此许多开发者比较喜欢基于现有代码框架来实现gallery。相比于完全从零实现的gallery,我认为常用的框架里对于交互操作的代码实现会相对更稳健,后期维护也更具延续性。

基于上述考虑,我选了几个作了候选,其中一个是3D-Wall-Gallery,一个基于JQuery实现的javascript photo gallery。支持滚动、缩略图、滑块拉动等效果。我比较喜欢它的一个重要原因是它实现了照片的预加载,也就是不用在每次切换照片时都有一个停顿感。现在用户的体验要求越来越高,一个loading…符号并不能让用户满意,最好就是不需要等待!照片按时序排列并辅以时间标签,当然,拖动滑块和选中缩略图时的交互体验还可以做得更进步一些。下面是效果图。

基于3D-Wall-Gallery实现照片展示
基于3D-Wall-Gallery实现的照片展示

html实现部分可以有多种方式,例如我的照片是这样组织的:

因此在具体实现时,我使用javascript动态创建<li>标签。当然,后台动态代码来实现,亦可。

实际效果参考3D-Wall-Gallery的例子