lightbox开发

如何解决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

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

此函数用来模拟人工点击

function showBigPicLightBox(obj){

obj.click();

return false;

}

<script type="text/java script" src="/js/prototype.js">

<script type="text/java script" src="/js/scriptaculous.js load=effects,builder">

<script type="text/java script" src="/js/lightbox.js">

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

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

LightboxOptions = Object.extend({

..

showPicTotal:20, // controls the total number

..

}, window.LightboxOptions || {});

找到这一段 www.2cto.com

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

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

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

摘自 beauty9235的专栏