CSS Sample:
.enlargeBackground {
background-color:#111111;
opacity: 0.8;
filter: alpha(opacity=80);
}
.enlarge {
background-color: #FFF;
border-spacing: 0px;
border: 10px solid #fff;
}
.enlarge TD {
padding: 0px;
}
.enlarge .enlargeContainer {
margin: auto;
display: table;
padding: 5px;
background-color: #fff;
width: auto;
}
.enlarge .enlargeClose {
text-align: right;
padding-bottom: 5px;
}
.enlarge .enlargeImage {
padding: 0px 0px 0px 0px;
}
.enlarge .enlargePrev {
padding-top: 5px;
float: left;
}
.enlarge .enlargeNext {
padding-top: 5px;
float: right;
}
*/
var enlargeImages=new Array();
var enlargeTexts=new Array();
function enlargeGetScrollXY() {
var scrOfX=0,scrOfY=0;
if (typeof(window.pageYOffset)=='number') {
scrOfY=window.pageYOffset;
scrOfX=window.pageXOffset;
} else if (document.body && (document.body.scrollLeft || document.body.scrollTop)) {
scrOfY=document.body.scrollTop;
scrOfX=document.body.scrollLeft;
} else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
scrOfY=document.documentElement.scrollTop;
scrOfX=document.documentElement.scrollLeft;
}
return [scrOfX,scrOfY];
}
function enlarge(id) {
document.getElementById('enlargepic2').src=enlargeImages[id];
e1=document.getElementById('enlargepic');
e2=document.getElementById('enlargepicbg');
e1.style.display="";
e1.style.left=enlargeGetScrollXY()[0]+'px';
e1.style.top=enlargeGetScrollXY()[1]+'px';
e2.style.display="";
e2.style.left='0px'
e2.style.top='0px'
if (document.body.scrollHeight>document.body.clientHeight)
e2.style.height=document.body.scrollHeight+'px';
else
e2.style.height='100%';
e2.style.width='100%';
//document.body.style.overflow="hidden";
prev=id-1; if (prev<0) prev=enlargeImages.length-1;
next=id+1; if (next>=enlargeImages.length) next=0;
if (document.getElementById("enlargePrev"))
if (prev>-1 && next!=prev) {
document.getElementById("enlargePrev").style.display="";
document.getElementById("enlargePrev").href="javascript:enlarge("+prev+")";
} else
document.getElementById("enlargePrev").style.display="none";
if (document.getElementById("enlargeNext"))
if (next>-1 && next!=prev) {
document.getElementById("enlargeNext").style.display="";
document.getElementById("enlargeNext").href="javascript:enlarge("+next+")";
} else
document.getElementById("enlargeNext").style.display="none";
if (document.getElementById('enlargetxt'))
if (enlargeTexts[id]!='') {
document.getElementById('enlargetxt').style.display="";
document.getElementById('enlargetxt').innerHTML=enlargeTexts[id];
} else
document.getElementById('enlargetxt').style.display="none";
}
function enlargeclose() {
//document.getElementById('enlargetxt').innerHTML="";
document.getElementById('enlargepic').style.display="none";
document.getElementById('enlargepicbg').style.display="none";
document.getElementById('enlargepic2').src="";
//document.getElementById('enlargeswf').style.display="none";
//document.getElementById('enlargeswf2').innerHTML="";
}
function enlargeInit(nextImg,prevImg,closeImg) {
for(i=0; i