改写ExtCore的lightbox

/*！
 * Ext Core Library 3.0
 * http://extjs.com/
 * Copyright(c) 2006-2009, Ext JS, LLC.
 * 
 * MIT Licensed - http://extjs.com/license/mit.txt
 */
Ext.ns('Ext.ux');

Ext.ux.Lightbox = Ext.extend(Ext.util.Observable,{
	els : {},
	images : [],
	params : {},
	activeImage : 0,
	initialized : false,
	selectors : [],
	width : 600,
	height : 530,
	overlayOpacity: 0.35,
	animate: true,
	dragable : false,
	resizeSpeed: 8,
	model : false,
	loadpage : false,
	borderSize: 10,
	group : false,
	labelImage: "Image",
	labelOf: "of",

	constructor : function(config) {
		this.activeImage = 0;this.els = {};this.selectors = [];
		config = config || {};
        Ext.apply(this, config);
		Ext.ux.Lightbox.superclass.constructor.call(this, config);
		var sel = config.sel;
		this.resizeDuration = this.animate ? ((11 - this.resizeSpeed) * 0.15) : 0;
		this.overlayDuration = this.animate ? 0.2 : 0;
		
		this.addEvents('open', 'close');
		if(this.selectors.indexOf(sel) === -1) {
			this.selectors.push(sel);

			Ext.fly(document).on('click', function(ev){
				var target = ev.getTarget(sel);
				if (target) {
					ev.preventDefault();
					this.open(target, sel, this.group);
				}
			}, this);
		}
	},

	initMarkup: function() {
		this.els.shim = Ext.DomHelper.append(document.body, {
			tag: 'iframe',
			id: 'ux-lightbox-shim'
		}, true);
		this.els.overlay = Ext.DomHelper.append(document.body, {
			id: 'ux-lightbox-overlay'
		}, true);
		
		var lightboxTpl = new Ext.Template(this.getTemplate());
		this.els.lightbox = lightboxTpl.append(document.body, {}, true);

		var ids =
			['outerImageContainer', 'imageContainer', 'target', 'hoverNav', 'navPrev', 'navNext', 'loading', 'loadingLink',
			'outerDataContainer', 'dataContainer', 'data', 'details', 'caption', 'imageNumber', 'bottomNav', 'navClose','container'];

		Ext.each(ids, function(id){
			this.els[id] = Ext.get('ux-lightbox-' + id);
		},this);

		Ext.each([this.els.overlay, this.els.lightbox, this.els.shim], function(el){
			el.setVisibilityMode(Ext.Element.DISPLAY)
			el.hide();
		});

		var size = (this.animate ? 250 : 1) + 'px';
		this.els.outerImageContainer.setStyle({
			width: size,
			height: size
		});
	},

	getTemplate : function() {
		return [
			'<div id="ux-lightbox">',
				'<div id="ux-lightbox-outerDataContainer">',
					'<div id="ux-lightbox-dataContainer">',
						'<div id="ux-lightbox-data">',
							'<div id="ux-lightbox-details">',
								'<span id="ux-lightbox-caption"></span>',
								'<span id="ux-lightbox-imageNumber"></span>',
							'</div>',
							'<div id="ux-lightbox-bottomNav">',
								'<a href="#" id="ux-lightbox-navClose"></a>',
							'</div>',
						'</div>',
					'</div>',
				'</div>',
				'<div id="ux-lightbox-outerImageContainer">',
					'<div id="ux-lightbox-imageContainer">',
						'<div id="ux-lightbox-container"><img id="ux-lightbox-target"></div>',
						'<div id="ux-lightbox-hoverNav">',
							'<a href="#" id="ux-lightbox-navPrev"></a>',
							'<a href="#" id="ux-lightbox-navNext"></a>',
						'</div>',
						'<div id="ux-lightbox-loading">',
							'<a id="ux-lightbox-loadingLink"></a>',
						'</div>',
					'</div>',
				'</div>',
			'</div>'
		];
	},

	initEvents: function() {
		var close = function(ev) {
			ev.preventDefault();
			this.close();
		};

		this.els.overlay.on('click', close, this);
		this.els.loadingLink.on('click', close, this);
		this.els.navClose.on('click', close, this);
		
		if(!this.model) {
			this.els.lightbox.on('click', function(ev) {
				if(ev.getTarget().id == 'ux-lightbox') {
					this.close();
				}
			}, this);
		}

		this.els.navPrev.on('click', function(ev) {
			ev.preventDefault();
			this.setImage(this.activeImage - 1);
		}, this);

		this.els.navNext.on('click', function(ev) {
			ev.preventDefault();
			this.setImage(this.activeImage + 1);
		}, this);
	},
	open: function(target, sel, group) {
		this.initMarkup();
		this.initEvents();
		this.initialized = true;
		this.setViewSize();
		this.els.overlay.fadeIn({
			duration: this.overlayDuration,
			endOpacity: this.overlayOpacity,
			callback: function() {
				this.targets = [];
				var index = 0;
				if(!this.group) {
					this.targets.push([target.href, target.title]);
				} else {
					var setItems = Ext.query(sel);
					Ext.each(setItems, function(item) {
							if(item.href) {
								this.targets.push([item.href, item.title]);
							}
						},this);
	
						while (this.targets[index][0] != target.href) {
							index++;
						}
					}
					
					var pageScroll = Ext.fly(document).getScroll();
	
					var lightboxTop = pageScroll.top + (Ext.lib.Dom.getViewportHeight() / 10);
					var lightboxLeft = pageScroll.left;
					this.els.lightbox.setStyle({
						top: lightboxTop + 'px',
						left: lightboxLeft + 'px'
					}).show();
	
					this.setImage(index);
					
					this.fireEvent('open', this.targets[index]);                                        
			},
			scope: this
		});
	},
	
	setViewSize: function(){
		var viewSize = this.getViewSize();
		this.els.overlay.setStyle({
			width: '100%',
			height: viewSize[1] + 'px'
		});
		this.els.shim.setStyle({
			width: '100%',				   
			height: viewSize[1] + 'px'
		}).show();
	},

	setImage: function(index){
		this.activeImage = index;
				  
		this.disableKeyNav();            
		if (this.animate) {
			this.els.loading.show();
		}

		this.els.target.hide();
		this.els.hoverNav.hide();
		this.els.navPrev.hide();
		this.els.navNext.hide();
		this.els.dataContainer.setOpacity(0.0001);
		this.els.imageNumber.hide();

		if(!this.loadpage)  {
			var preload = new Image();
			preload.onload = (function(){
				this.els.target.dom.src = this.targets[this.activeImage][0];
				this.resizeContaner(preload.width, preload.height);
			}).createDelegate(this);
			preload.src = this.targets[this.activeImage][0];
		} else {
			this.els.target.remove();
			this.ajaxload(this.targets[this.activeImage][0]);
			this.els.container.hide();
			this.els.hoverNav.remove();
			this.resizeContaner(this.width, this.height);
		}
	},
	ajaxload : function (url){
		//this.els.container.load({
		Ext.Ajax.request({
		   url: url,
		   success: function(response,opts){
			   //this.els.container.update('');
		   		var html = response.responseText;
				this.els.container.insertHtml('beforeEnd',html,true);
		   		this.els.container.setStyle({
		   			fontSize : '12px',
					width : '100%',
					height : '100%'
		   		});
		   },
		   failure: function(){this.els.container.insertHtml('beforeEnd','服务器忙，请稍候再试！',true);},
		   method : 'POST',
		   params : this.params,
		   timeout : 3000,
		   callback : this.callback,
		   disableCaching : false,
		   scope : this,
		   scripts : true
		});
	},
	resizeContaner: function(w, h){
		var wCur = this.els.outerImageContainer.getWidth();
		var hCur = this.els.outerImageContainer.getHeight();

		var wNew = (w + this.borderSize * 2);
		var hNew = (h + this.borderSize * 2);

		var wDiff = wCur - wNew;
		var hDiff = hCur - hNew;

		var afterResize = function(){
			if(!this.loadpage) {
				this.els.hoverNav.setWidth(this.els.imageContainer.getWidth() + 'px');
	
				this.els.navPrev.setHeight(h + 'px');
				this.els.navNext.setHeight(h + 'px');
			}
			this.els.outerDataContainer.setWidth(wNew + 'px');
			
			
			this.showContaner();
		};
		
		if (hDiff != 0 || wDiff != 0) {
			this.els.outerImageContainer.shift({
				height: hNew,
				width: wNew,
				duration: this.resizeDuration,
				scope: this,
				callback: afterResize,
				delay: 50
			});
		}
		else {
			afterResize.call(this);
		}
	},

	showContaner: function(){
		this.els.loading.hide();
		this.els.container.show();
		if(!this.loadpage){
			this.els.target.fadeIn({
				duration: this.resizeDuration,
				scope: this,
				callback: function(){
					this.updateDetails();
				}
			});
			this.preloadImages();
		}else {
			this.els.container.fadeIn({
				duration: this.resizeDuration,
				scope: this,
				callback: function(){
					this.updateDetails();
				}
			});
		}
	},

	updateDetails: function(){
		var detailsWidth = this.els.data.getWidth(true) - this.els.navClose.getWidth() - 10;
		this.els.details.setWidth((detailsWidth > 0 ? detailsWidth : 0) + 'px');
		
		this.els.caption.update(this.targets[this.activeImage][1]);

		this.els.caption.show();
		if (this.targets.length > 1) {
			this.els.imageNumber.update(this.labelImage + ' ' + (this.activeImage + 1) + ' ' + this.labelOf + '  ' + this.targets.length);
			this.els.imageNumber.show();
		}

		this.els.dataContainer.fadeIn({
			duration: this.resizeDuration/2,
			scope: this,
			callback: function() {
				var viewSize = this.getViewSize();
				this.els.overlay.setHeight(viewSize[1] + 'px');
				if(!this.loadpage)  this.updateNav();
			}
		});
	},

	updateNav: function(){
		this.enableKeyNav();

		this.els.hoverNav.show();

		// if not first target in set, display prev target button
		if (this.activeImage > 0)
			this.els.navPrev.show();

		// if not last target in set, display next target button
		if (this.activeImage < (this.targets.length - 1))
			this.els.navNext.show();
	},

	enableKeyNav: function() {
		Ext.fly(document).on('keydown', this.keyNavAction, this);
	},

	disableKeyNav: function() {
		Ext.fly(document).un('keydown', this.keyNavAction, this);
	},

	keyNavAction: function(ev) {
		var keyCode = ev.getKey();

		if (
			keyCode == 88 || // x
			keyCode == 67 || // c
			keyCode == 27
		) {
			this.close();
		}
		else if (keyCode == 80 || keyCode == 37){ // display previous target
			if (this.activeImage != 0){
				this.setImage(activeImage - 1);
			}
		}
		else if (keyCode == 78 || keyCode == 39){ // display next target
			if (this.activeImage != (this.targets.length - 1)){
				this.setImage(this.activeImage + 1);
			}
		}
	},

	preloadImages: function(){
		var next, prev;
		if (this.targets.length > this.activeImage + 1) {
			next = new Image();
			next.src = this.targets[this.activeImage + 1][0];
		}
		if (this.activeImage > 0) {
			prev = new Image();
			prev.src = this.targets[this.activeImage - 1][0];
		}
	},

	close: function(){
		this.disableKeyNav();
		this.els.lightbox.hide();
		this.els.shim.hide();
		this.els.overlay.fadeOut({
			duration: this.overlayDuration,
			scope: this,
			callback : function(){
				this.els.lightbox.remove();
				this.els.overlay.remove();
				this.els.shim.remove();
			}
		},this);
		
		this.fireEvent('close', this.activeImage);
	},

	getViewSize: function() {
		return [Ext.lib.Dom.getViewWidth(), Ext.lib.Dom.getDocumentHeight()];
	}
});

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Ext Lightbox Example</title>

    	<link href="../examples.css" rel="stylesheet" />
    	<link href="lightbox.css" rel="stylesheet" />

    	<script src="../../ext-core-debug.js"></script>
        <script src="lightbox.js"></script>

        <script type="text/javascript">
			Ext.onReady(function() {
				
				new Ext.ux.Lightbox({
					sel:'a.lightboxs',
					model : true
				});
				
				new Ext.ux.Lightbox({
					sel:'a.ajax',
					loadpage : true,
					model : true,
					width:540,
					height:400,
					params : {id :1},
					callback : call
				});
				
				new Ext.ux.Lightbox({
					sel:'a[rel^=lightbox]',
					model : true
				});
				
				new Ext.ux.Lightbox({
					sel:'a.lb-flower',				
					group:true,
					model : true
				});
				
				function call (){
					Ext.get('testimg').setStyle({
						width : '100%',
						height : '80%'
					});
				}
			});
        </script>

        <style>
            .thumbnail {
            	padding: 4px;
            	background-color: #e6e6e0;
            	border: 1px solid #d6d6d0;
            	float: left;
            	margin-right: 10px;
            	margin-bottom: 10px;
        	}
        </style>
    </head>

    <body>
    	<div class="thumbnail" >
    		<a href="images/image1.jpg" class="lightboxs" ><img src="images/thumb1.jpg" alt="Columbine" width="120" height="72"></a>
        </div>
        <h3 style="clear: both;">Single</h3>
        <div class="thumbnail" >
    		<a href="ajax.html" class="ajax" ><img src="images/thumb1.jpg" alt="Columbine" width="120" height="72"></a>
        </div>
        <h3 style="clear: both;">Ajax</h3>
        <div id="content" >
        	<h2>Example</h2>

        	<h3>Single Images</h3>
            <div id="lightbox">
                <div class="thumbnail" >
                    <a href="images/image1.jpg" rel="lightbox" ><img src="images/thumb1.jpg" alt="Columbine" width="120" height="72"></a>
                </div>
                <div class="thumbnail">
                    <a href="images/image2.jpg" rel="lightbox" title="This caption is optional."><img src="images/thumb2.jpg" alt="Pink Whirls" width="120" height="72"></a>
                </div>
			</div>
        	<h3 style="clear: both;">Gallery</h3>

        	<div class="thumbnail">
        		<a href="images/image3.jpg" class="lb-flower" title="Click on the right side of an image to move forward."><img src="images/thumb3.jpg" alt="Lily of the Valley" width="120" height="72"></a>
        	</div>
        	<div class="thumbnail">
        		<a href="images/image4.jpg" class="lb-flower" title="You can also use the arrow keys to navigate the gallery."><img src="images/thumb4.jpg" alt="Pansy" width="120" height="72"></a>
        	</div>
        	<div class="thumbnail">
        		<a href="images/image5.jpg" class="lb-flower" title="While you are viewing an image, the lightbox preloads the next image in the gallery."><img src="images/thumb5.jpg" alt="Primrose" width="120" height="72"></a>
        	</div>
        	<div class="thumbnail">
        		<a href="images/image6.jpg" class="lb-flower" title="This is a narrow image with a long description. Notice how the bottom of the lightbox automatically expands to accommodate the longer caption."><img src="images/thumb6.jpg" alt="Periwinkle" width="120" height="72"></a>
        	</div>
        	<div class="thumbnail">
        		<a href="images/image7.jpg" class="lb-flower" title="Press 'Esc' to close the gallery."><img src="images/thumb7.jpg" alt="Daffodil" width="120" height="72"></a>
        	</div>
        </div>
    </body>
</html>

 ajax.html

<img src="images/image7.jpg" width="215" height="154" border="0" style="width:100px; height:76px;" id="testimg"/>