使用时，只需要在A标签处加上rel="lightbox"即可。e.g:
<A href=http://image2.sina.com.cn/dy/other/74/U1571P1T74D1184F1625DT20060618123137.jpg rel=lightbox><IMG src=http://image2.sina.com.cn/dy/other/74/U1571P1T74D1184F1625DT20060618123137.jpg height="100" width="100"></A>
我自己也写了一个，不过涉及两个模块，（func.js公用库，和imagesLoader.js图片载入类）过阵子一并发上来。
<STYLE type=text/css>
HTML #overlay {
FILTER: Alpha(opacity=50); BACKGROUND-IMAGE: url(images/blank.gif); BACKGROUND-COLOR: #000
}
</STYLE>
<SCRIPT language=javascript type=text/javascript>
<!--//
function addEvent(object, type, handler)
{
if (object.addEventListener) {
object.addEventListener(type, handler, false);
} else if (object.attachEvent) {
object.attachEvent(['on',type].join(''),handler);
} else {
object[['on',type].join('')] = handler;
}
}
function WindowSize()
{ // window size object
this.w = 0;
this.h = 0;
return this.update();
}
WindowSize.prototype.update = function()
{
var d = document;
this.w =
(window.innerWidth) ? window.innerWidth
: (d.documentElement && d.documentElement.clientWidth) ? d.documentElement.clientWidth
: d.body.clientWidth;
this.h =
(window.innerHeight) ? window.innerHeight
: (d.documentElement && d.documentElement.clientHeight) ? d.documentElement.clientHeight
: d.body.clientHeight;
return this;
};
function PageSize()
{ // page size object
this.win = new WindowSize();
this.w = 0;
this.h = 0;
return this.update();
}
PageSize.prototype.update = function()
{
var d = document;
this.w =
(window.innerWidth && window.scrollMaxX) ? window.innerWidth + window.scrollMaxX
: (d.body.scrollWidth > d.body.offsetWidth) ? d.body.scrollWidth
: d.body.offsetWidt;
this.h =
(window.innerHeight && window.scrollMaxY) ? window.innerHeight + window.scrollMaxY
: (d.body.scrollHeight > d.body.offsetHeight) ? d.body.scrollHeight
: d.body.offsetHeight;
this.win.update();
if (this.w < this.win.w) this.w = this.win.w;
if (this.h < this.win.h) this.h = this.win.h;
return this;
};
function PagePos()
{ // page position object
this.x = 0;
this.y = 0;
return this.update();
}
PagePos.prototype.update = function()
{
var d = document;
this.x =
(window.pageXOffset) ? window.pageXOffset
: (d.documentElement && d.documentElement.scrollLeft) ? d.documentElement.scrollLeft
: (d.body) ? d.body.scrollLeft
: 0;
this.y =
(window.pageYOffset) ? window.pageYOffset
: (d.documentElement && d.documentElement.scrollTop) ? d.documentElement.scrollTop
: (d.body) ? d.body.scrollTop
: 0;
return this;
};
function UserAgent()
{ // user agent information
var ua = navigator.userAgent;
this.isWinIE = this.isMacIE = false;
this.isGecko = ua.match(/Gecko\//);
this.isSafari = ua.match(/AppleWebKit/);
this.isOpera = window.opera;
if (document.all && !this.isGecko && !this.isSafari && !this.isOpera) {
this.isWinIE = ua.match(/Win/);
this.isMacIE = ua.match(/Mac/);
this.isNewIE = (ua.match(/MSIE 5\.5/) || ua.match(/MSIE 6\.0/));
}
return this;
}
// === lightbox ===
function LightBox(option)
{
var self = this;
self._imgs = new Array();
self._wrap = null;
self._box = null;
self._open = -1;
self._page = new PageSize();
self._pos = new PagePos();
self._ua = new UserAgent();
self._expandable = false;
self._expanded = false;
self._expand = option.expandimg;
self._shrink = option.shrinkimg;
return self._init(option);
}
LightBox.prototype = {
_init : function(option)
{
var self = this;
var d = document;
if (!d.getElementsByTagName) return;
var links = d.getElementsByTagName("a");
for (var i=0;i<links.length;i++) {
var anchor = links[i];
var num = self._imgs.length;
if (!anchor.getAttribute("href")
|| anchor.getAttribute("rel") != "lightbox") continue;
// initialize item
self._imgs[num] = {src:anchor.getAttribute("href"),w:-1,h:-1,title:'',cls:anchor.className};
if (anchor.getAttribute("title"))
self._imgs[num].title = anchor.getAttribute("title");
else if (anchor.firstChild && anchor.firstChild.getAttribute && anchor.firstChild.getAttribute("title"))
self._imgs[num].title = anchor.firstChild.getAttribute("title");
anchor.onclick = self._genOpener(num); // set closure to onclick event
}
var body = d.getElementsByTagName("body")[0];
self._wrap = self._createWrapOn(body,option.loadingimg);
self._box = self._createBoxOn(body,option);
return self;
},
_genOpener : function(num)
{
var self = this;
return function() { self._show(num); return false; }
},
_createWrapOn : function(obj,imagePath)
{
var self = this;
if (!obj) return null;
// create wrapper object, translucent background
var wrap = document.createElement('div');
wrap.id = 'overlay';
with (wrap.style) {
display = 'none';
position = 'fixed';
top = '0px';
left = '0px';
zIndex = '50';
width = '100%';
height = '100%';
}
if (self._ua.isWinIE) wrap.style.position = 'absolute';
addEvent(wrap,"click",function() { self._close(); });
obj.appendChild(wrap);
// create loading image, animated image
var imag = new Image;
imag.onload = function() {
var spin = document.createElement('img');
spin.id = 'loadingImage';
spin.src = imag.src;
spin.style.position = 'relative';
self._set_cursor(spin);
addEvent(spin,'click',function() { self._close(); });
wrap.appendChild(spin);
imag.onload = function(){};
};
if (imagePath != '') imag.src = imagePath;
return wrap;
},
_createBoxOn : function(obj,option)
{
var self = this;
if (!obj) return null;
// create lightbox object, frame rectangle
var box = document.createElement('div');
box.id = 'lightbox';
with (box.style) {
display = 'none';
position = 'absolute';
zIndex = '60';
}
obj.appendChild(box);
// create image object to display a target image
var img = document.createElement('img');
img.id = 'lightboxImage';
self._set_cursor(img);
addEvent(img,'click',function(){ self._close(); });
addEvent(img,'mouseover',function(){ self._show_action(); });
addEvent(img,'mouseout',function(){ self._hide_action(); });
box.appendChild(img);
var zoom = document.createElement('img');
zoom.id = 'actionImage';
with (zoom.style) {
display = 'none';
position = 'absolute';
top = '15px';
left = '15px';
zIndex = '70';
}
self._set_cursor(zoom);
zoom.src = self._expand;
addEvent(zoom,'mouseover',function(){ self._show_action(); });
addEvent(zoom,'click', function() { self._zoom(); });
box.appendChild(zoom);
addEvent(window,'resize',function(){ self._set_size(true); });
// close button
if (option.closeimg) {
var btn = document.createElement('img');
btn.id = 'closeButton';
with (btn.style) {
display = 'inline';
position = 'absolute';
right = '10px';
top = '10px';
width = '15px';
height = '15px';
zIndex = '80';
}
btn.src = option.closeimg;
self._set_cursor(btn);
addEvent(btn,'click',function(){ self._close(); });
box.appendChild(btn);
}
// caption text
var caption = document.createElement('span');
caption.id = 'lightboxCaption';
with (caption.style) {
display = 'none';
position = 'absolute';
zIndex = '80';
}
box.appendChild(caption);
// create effect image
if (!option.effectpos) option.effectpos = {x:0,y:0};
else {
if (option.effectpos.x == '') option.effectpos.x = 0;
if (option.effectpos.y == '') option.effectpos.y = 0;
}
var effect = new Image;
effect.onload = function() {
var effectImg = document.createElement('img');
effectImg.id = 'effectImage';
effectImg.src = effect.src;
if (option.effectclass) effectImg.className = option.effectclass;
with (effectImg.style) {
position = 'absolute';
display = 'none';
left = [option.effectpos.x,'px'].join('');;
top = [option.effectpos.y,'px'].join('');
zIndex = '90';
}
self._set_cursor(effectImg);
addEvent(effectImg,'click',function() { effectImg.style.display = 'none'; });
box.appendChild(effectImg);
};
if (option.effectimg != '') effect.src = option.effectimg;
return box;
},
_set_photo_size : function()
{
var self = this;
if (self._open == -1) return;
var imag = self._box.firstChild;
var targ = { w:self._page.win.w - 30, h:self._page.win.h - 30 };
var orig = { w:self._imgs[self._open].w, h:self._imgs[self._open].h };
// shrink image with the same aspect
var ratio = 1.0;
if ((orig.w >= targ.w || orig.h >= targ.h) && orig.h && orig.w)
ratio = ((targ.w / orig.w) < (targ.h / orig.h)) ? targ.w / orig.w : targ.h / orig.h;
imag.width = Math.floor(orig.w * ratio);
imag.height = Math.floor(orig.h * ratio);
self._expandable = (ratio < 1.0) ? true : false;
if (self._ua.isWinIE) self._box.style.display = "block";
self._box.style.top = [self._pos.y + (self._page.win.h - imag.height - 30) / 2,'px'].join('');
self._box.style.left = [((self._page.win.w - imag.width - 30) / 2),'px'].join('');
self._show_caption(true);
},
_set_size : function(onResize)
{
var self = this;
if (self._open == -1) return;
self._page.update();
self._pos.update();
var spin = self._wrap.firstChild;
if (spin) {
var top = (self._page.win.h - spin.height) / 2;
if (self._wrap.style.position == 'absolute') top += self._pos.y;
spin.style.top = [top,'px'].join('');
spin.style.left = [(self._page.win.w - spin.width - 30) / 2,'px'].join('');
}
if (self._ua.isWinIE) {
self._wrap.style.width = [self._page.win.w,'px'].join('');
self._wrap.style.height = [self._page.h,'px'].join('');
}
if (onResize) self._set_photo_size();
},
_show_action : function()
{
var self = this;
if (self._open == -1 || !self._expandable) return;
var obj = document.getElementById('actionImage');
if (!obj) return;
obj.src = (self._expanded) ? self._shrink : self._expand;
obj.style.display = 'inline';
},
_hide_action : function()
{
var self = this;
var obj = document.getElementById('actionImage');
if (obj) obj.style.display = 'none';
},
_zoom : function()
{
var self = this;
if (self._expanded) {
self._set_photo_size();
self._expanded = false;
} else if (self._open > -1) {
var imag = self._box.firstChild;
self._box.style.top = [self._pos.y,'px'].join('');
self._box.style.left = '0px';
imag.width = self._imgs[self._open].w;
imag.height = self._imgs[self._open].h;
self._show_caption(false);
self._expanded = true;
}
self._show_action();
},
_show_caption : function(enable)
{
var self = this;
var caption = document.getElementById('lightboxCaption');
if (!caption) return;
if (caption.innerHTML.length == 0 || !enable) {
caption.style.display = 'none';
} else { // now display caption
var imag = self._box.firstChild;
with (caption.style) {
top = [imag.height + 10,'px'].join(''); // 10 is top margin of lightbox
left = '0px';
width = [imag.width + 20,'px'].join(''); // 20 is total side margin of lightbox
height = '1.2em';
display = 'block';
}
}
},
_show : function(num)
{
var self = this;
var imag = new Image;
if (num < 0 || num >= self._imgs.length) return;
var loading = document.getElementById('loadingImage');
var caption = document.getElementById('lightboxCaption');
var effect = document.getElementById('effectImage');
self._open = num; // set opened image number
self._set_size(false); // calc and set wrapper size
self._wrap.style.display = "block";
if (loading) loading.style.display = 'inline';
imag.onload = function() {
if (self._imgs[self._open].w == -1) {
// store original image width and height
self._imgs[self._open].w = imag.width;
self._imgs[self._open].h = imag.height;
}
if (effect) {
effect.style.display = (!effect.className || self._imgs[self._open].cls == effect.className)
? 'block' : 'none';
}
if (caption) caption.innerHTML = self._imgs[self._open].title;
self._set_photo_size(); // calc and set lightbox size
self._hide_action();
self._box.style.display = "block";
self._box.firstChild.src = imag.src;
self._box.firstChild.setAttribute('title',self._imgs[self._open].title);
if (loading) loading.style.display = 'none';
};
self._expandable = false;
self._expanded = false;
imag.src = self._imgs[self._open].src;
},
_set_cursor : function(obj)
{
var self = this;
if (self._ua.isWinIE && !self._ua.isNewIE) return;
obj.style.cursor = 'pointer';
},
_close : function()
{
var self = this;
self._open = -1;
self._hide_action();
self._wrap.style.display = "none";
self._box.style.display = "none";
}
};
// === main ===
addEvent(window,"load",function() {
var lightbox = new LightBox({
loadingimg:'http://image2.sina.com.cn/dy/news/2006/0618/images/loading.gif',
expandimg:'http://image2.sina.com.cn/dy/news/2006/0618/images/expand.gif',
shrinkimg:'http://image2.sina.com.cn/dy/news/2006/0618/images/shrink.gif',
effectimg:'images/zzoop.gif',
effectpos:{x:-40,y:-20},
effectclass:'images/effectable',
closeimg:'http://image2.sina.com.cn/dy/news/2006/0618/images/close.gif'
});
});
//-->
</SCRIPT>
<A href=http://image2.sina.com.cn/dy/other/74/U1571P1T74D1184F1625DT20060618123137.jpg rel=lightbox><IMG src=http://image2.sina.com.cn/dy/other/74/U1571P1T74D1184F1625DT20060618123137.jpg height="100" width="100"></A>
<a href="http://blog.never-online.net/article.asp?id=83" target="_blank">click here for back点击返回</a>
您可能感兴趣的文章: