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
<html>
<head>
</head>
<body bgcolor="#000">
</body>
</html>
如何解决鼠标在图片上,就显示大图效果?
此函数用来模拟人工点击
function showBigPicLightBox(obj){
obj.click();
return false;
}
<script type="text/javascript" src="/js/prototype.js"></script>
<script type="text/javascript" src="/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/js/lightbox.js"></script>
<link rel="stylesheet" href="/js/css/lightbox.css" type="text/css" media="screen" />
<a href="test.jpg" rel="lightbox[roadtrip]" ><img src="test.jpg" οnmοuseοver="javascript:showBigPicLightBox(this);"></a>
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();
------------------------------------------------------------------------------------------------------------------------