mootools做的一个相册，基于 SmoothGallery 和 LightWindow

最新推荐文章于 2020-08-04 19:55:31 发布

mplive112

最新推荐文章于 2020-08-04 19:55:31 发布

阅读量118

点赞数

文章标签： Mootools Ajax 浏览器 JavaScript Flash ViewUI

之前用 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功能通通去掉了

相册的使用方法如下：


<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;
	}
});