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 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" onmouseover="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();
------------------------------------------------------------------------------------------------------------------------
- lightbox 开发
- lightbox
- lightbox!
- Lightbox
- LightBox
- LightBox
- JS插件开发之LightBox图片画廊
- 漂亮的LightBox图片画廊插件开发
- Lightbox类
- lightbox分析
- Lightbox类
- 妙用 Lightbox
- 模拟LightBox
- Lightbox JS
- LightBox 对话框
- LightBox图片显示特效
- Lightbox JS V2.0
- 收藏的LightBox
- au1200 linux mae driver 冲突
- Peer-To-Peer 介绍
- Requested scope CLIENT has not been enabled
- 常用数据库的连接方法
- 如何在oracle中导入dmp数据库文件
- lightbox 开发
- Stream 和 byte[] 之间的转换及文件存取的代码
- 一转眼又过了好几个月
- 2009.03.16
- document.body.scrollTop,document.body.clientHeight的值为0的问题
- 2009.03.17
- (转贴)Linux bootloader 编写方法
- SQL Loader 控制文件的写法
- JSON.PHP对中文乱码的解决