缩略图预览mini库

这是一个依赖jquery的mini库文件，主要用于缩略图的预览：
如下一张缩略图，实际图片大小比这个要大许多

利用这个jquery插件，只需将要缩略图、原图切换的元素使用$('jquery选择器image').viewImage();就可以点击切换显示这张图片。
简单易用。点击效果图如下：

下面贴出完整代码：极其剪短
(function($,factory){
	if(typeof define === 'object' && typeof require === 'object'){
		define([
			'jquery'
		],function($){
			factory()
		});
	}else{
		factory($);
	}
})(jQuery,function(){

	var ImageViewer = function(element){
		var naturalHeight,
			naturalWidth;
		this.$element = $(element);
		this.naturalWidth = element.naturalWidth;
		this.naturalHeight = element.naturalHeight;
		this.$viewerContainer = $('.viewer-container');
		this.$viewerContainer.on('click',this.hide.bind(this));
		this.$element.on('click',this.show.bind(this));
	};

	ImageViewer.prototype.show=function(){
		this.$viewerContainer.empty()
			.css({
				'zIndex':1,
				'height',this.naturalHeight+'px'
			}).append(this.$element.get(0).outerHTML)
			.show().find('img').css({
				'cursor':'zoom-out',
				'maxHeight':'100%'
			});
	};

	ImageViewer.prototype.hide=function(){
		this.$viewerContainer.empty().hide();
	};

	function Plugin(){
		var $viewerContainer = $('<div class="viewer-container"></div>');
		$viewerContainer.css({
			position:'fixed',
			left:0,
			right:0,
			top:0,
			bottom:0,
			margin:'auto',
			'textAlign':'center',
			'maxHeight':'100%',
			'zIndex':-1
		});
		$viewerContainer.appendTo(document.body);
		return this.each(function(){
			new ImageViewer(this);
		});
	}

	$.fn.viewImage = Plugin;
});

希望对任何需要的人有所帮助。。。。啦啦啦