lightbox 开发

来源：互联网发布：五子棋ai活三活四算法编辑：程序博客网时间：2024/04/30 08:13

如何解决light box 与select box图层层次问题

由于系统采用了dwr,所有元素是JS生存出来的

select box总是在显示图片层之上

如何解决这个问题 ?

找到objBody.appendChild(Builder.node('div', {id:'overlay'}));

改为objBody.appendChild(Builder.node('iframe', {id:'overlay',src:'/js/lightbox204/black.html'}));

由于改为iframe后,不能控制背景颜色,它的颜色由src指定的网页色彩决定,为了显示这种效新增一个网页

black.html

<html>

<head>

</head>

</body>

</html>

如何解决鼠标在图片上,就显示大图效果?

此函数用来模拟人工点击

function showBigPicLightBox(obj){

obj.click();

return false;

}

lightbox 默认的是加载全部居有标签的图片,但是这样的图片在一个页面有几百张,如何控制?

首先设定一个常数做为要显示的张数

LightboxOptions = Object.extend({

showPicTotal:20, // controls the total number

}, window.LightboxOptions || {});

找到这一段

------------------------------------------------------------------------------------------------------------------------

this.imageArray =$$(imageLink.tagName + '[href][rel="' + imageLink.rel + '"]').

collect(function(anchor){ return [anchor.href, anchor.title]; }).

uniq();

while (this.imageArray[imageNum][0] != imageLink.href) { imageNum++; }

------------------------------------------------------------------------------------------------------------------------

改成下面的代码

------------------------------------------------------------------------------------------------------------------------

var obj=$$(imageLink.tagName + '[href][rel="' + imageLink.rel + '"]');

while (obj[imageNum] != imageLink.href) { imageNum++; }

if(obj.size()>LightboxOptions.showPicTotal) {

var validObj=[];

var halfNumber=LightboxOptions.showPicTotal/2;

var begin_number=0 ;

var end_number=obj.size() ;

if((imageNum-halfNumber)<0) end_number=LightboxOptions.showPicTotal;

else if((imageNum+halfNumber)>end_number) begin_number=end_number-LightboxOptions.showPicTotal;

else {begin_number=imageNum-halfNumber;end_number=imageNum+halfNumber;}

alert(begin_number+" "+imageNum+" "+end_number);

for(var i=begin_number,j=0;i<end_number;i++,j++){

validObj[j]=obj[i];

}

obj=validObj;

imageNum=imageNum-begin_number;

}

this.imageArray =obj.collect(function(anchor){ return (anchor.href!="")?[anchor.href, anchor.title]:null; }).uniq();

------------------------------------------------------------------------------------------------------------------------