mootools做的一个相册，基于 SmoothGallery 和 LightWindow
姜俊友
之前用 SmoothGallery 和 LightWindow，虽然都不错，但是毕竟一个是mootools的东西，一个是prototype的东西，用起来难免不方便，所以动手用mootools重新实现了一下，风格和特效还是沿用它们的
演示demo地址：http://www.onshowing.net/demo(2009年9月后无效)
对js相册感兴趣的朋友可以看看
对 SmoothGallery 主要做了以下改进：
1. 对浏览器的前进、后退支持，不再依靠hash实现，所以在保留前进、后退的功能时，地址栏是干净的
2. 改进了渲染方式，多图间的切换不再重复渲染多余的层
3. 没有了 SmoothGallery 中的内存泄露问题
对 SmoothGallery 去除了以下功能：
1. 不支持通过html代码创建数据生成相册，而使用既定数组或者通过 ajax 调用返回数据生成相册。其实这更接近实际应用
2. 去除了“相册组”的应用，个人感觉多余
对于 LightWindow，我只沿用了其界面显示效果，及其窗口变换效果，其他的加载 flash，iframe功能通通去掉了
相册的使用方法如下：
下面贴出部分支持浏览器前进后退功能的源码：
演示demo地址：http://www.onshowing.net/demo(2009年9月后无效)
对js相册感兴趣的朋友可以看看
对 SmoothGallery 主要做了以下改进：
1. 对浏览器的前进、后退支持，不再依靠hash实现，所以在保留前进、后退的功能时，地址栏是干净的
2. 改进了渲染方式，多图间的切换不再重复渲染多余的层
3. 没有了 SmoothGallery 中的内存泄露问题
对 SmoothGallery 去除了以下功能：
1. 不支持通过html代码创建数据生成相册，而使用既定数组或者通过 ajax 调用返回数据生成相册。其实这更接近实际应用
2. 去除了“相册组”的应用，个人感觉多余
对于 LightWindow，我只沿用了其界面显示效果，及其窗口变换效果，其他的加载 flash，iframe功能通通去掉了
相册的使用方法如下：
<div id="gallery"></div>
window.addEvent('domready', function(){
myGallery = new onshowing.gallery('gallery', {
width: 620,
height: 507,
dataUrl: '/demo/data.html'
});
});
下面贴出部分支持浏览器前进后退功能的源码：
onshowing.historyManager = new Class({
Implements: [Events, Options],
initialize: function(options){
this.setOptions({
/*onStateChanged: $empty,*/
observeDelay: 100
}, options);
this.currentState = 'nothing';
this.frame = new Element('iframe', { width: 0, height: 0, id: 'historyFrame', styles: { display: 'none'}}).inject(document.body);
this.checkTimer = this.checkState.periodical(this.options.observeDelay, this);
},
add: function(title, state){
if(this.currentState == state) return;
this.currentState = state;
try {
var doc = this.frame.contentWindow.document;
doc.open();
doc.write('<html><head><title>' + title + '</title></head><body>' + state + '</body></html>');
doc.close();
} catch(e) {};
},
checkState: function(){
var state = this.frame.contentWindow.document.body.innerHTML;
if(state != this.currentState){
this.currentState = state;
this.fireEvent('stateChanged', state);
}
},
dispose: function(){
$clear(this.checkTimer);
this.removeEvents();
this.frame.dispose();
delete this.frame;
}
});
类似资料：