Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.gallery {
width:300px;border:solid red 1px;
}
.gallery IMG{
width:150px;float:left;
}
.popup {
position: absolute;visibility:hidden;padding:10px;background-color:#d0e47e;border:1px solid black;
width: 670px; /*Width of popup*/
}
.controls { /*CSS for control bar of popup*/
position:relative;height:30px;background-Color:gray;padding:5px;text-align:center;font-size:16px;
}
.controls IMG {
float:right;margin:3px;margin-Top:-10px;
}
.content { /*CSS for div that holds the image slide show*/
border:1px solid gray;background-color:white;
}
.content IMG {
width:400px;height:300px;
}
.mask{ /*CSS for background mask*/
position:fixed;z-Index:101;background-Color:black;width:100%;height:100%;left:0px;top:0px;z-index: 5;filter:progid:DXImageTransform.Microsoft.alpha(opacity=80);opacity: 0.8;
}
/*]]>*/
</style>
</head>
<body>
<div id="gal1" class="gallery" >
<img src="http://images.mlsplug-in.com/processphoto.php?id=21206876&num=0&boardid=2" alt="img" title="Image 1"/>
<img src="http://images.mlsplug-in.com/processphoto.php?id=21206876&num=1&boardid=2" alt="img" title="Image 2" />
<img src="http://images.mlsplug-in.com/processphoto.php?id=21206876&num=2&boardid=2" alt="img" title="Image 3" />
<img src="http://images.mlsplug-in.com/processphoto.php?id=21206876&num=3&boardid=2" alt="img" title="Image 4" />
</div>
<div id="pop1" class="popup" style="background-Color:#FFFFCC;" >
<div class="content" >
</div>
<div class="controls" >
<a>Image 1</a>
<img src="http://www.vicsjavascripts.org.uk/StdImages/X[1].gif" alt="img" title="exit" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/right.gif" alt="img" title="forward" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/left.gif" alt="img" title="back" />
</div>
</div>
<script type="text/javascript">
/*<![CDATA[*/
// PopUp Gallery. (23-December-2012)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/
var zxcPopUpGallery={
init:function(o){
var id=o.GalleryID,ccls=o.ContentClass,mcls=o.MaskClass,ms=o.AnimateDuration,gal=document.getElementById(id),pop=document.getElementById(o.PopUpID),imgs=gal.getElementsByTagName('IMG'),div=document.createElement('DIV'),msk=div.cloneNode(false),ary=[],m,z0=0;
pop.style.display='block';
pop.style.overflow='hidden';
pop.style.visibility='hidden';
this.opc(pop,100);
msk.style.position='absolute';
msk.style.left='0px';
msk.style.top='0px';
msk.style.width='100%';
msk.style.height='100%';
m=msk.cloneNode(false)
m.className=mcls;
m.style.zIndex='0';
msk.appendChild(m);
pop.style.zIndex='200';
msk.appendChild(pop);
document.body.appendChild(msk);
msk.style.position='fixed';
msk.style.visibility='hidden';
o={
id:id,
msk:msk,
pop:pop,
ms:typeof(ms)=='number'&&ms>0?ms:false,
to1:null,
to2:null
}
for (;z0<imgs.length;z0++){
ary[z0]=[imgs[z0],new Image()];
ary[z0][1].src=imgs[z0].src;
}
this.load(o,ary);
},
load:function(o,ary){
for (var oop=this,z0=0;z0<ary.length;z0++){
if (ary[z0][1].width<40){
o.dly=setTimeout(function(){ oop.load(o,ary); },200);
return;
}
}
var img=document.createElement('IMG'),ss=document.createElement('DIV'),c=ss.cloneNode(false),divs=o.pop.getElementsByTagName('DIV'),c=divs[1];
img.src=ary[0][1].src;
divs[0].style.position='relative';
divs[0].appendChild(img);
ss.style.position='relative';
ss.style.width=img.width+'px';
ss.style.height=img.height+'px';
divs[0].removeChild(img);
img.style.position='absolute';
img.style.left='0px';
img.style.top='0px';
img.style.width='100%';
img.style.height='100%';
for (z0=0;z0<ary.length;z0++){
img=img.cloneNode(false);
img.src=ary[z0][1].src;
img.style.zIndex=z0>0?'0':'1';
ss.appendChild(img);
ary[z0]=[ary[z0][0],img,ary[z0][0].title||''];
this.addevt(ary[z0][0],'mouseup','ready',o,z0);
}
if (c){
imgs=c.getElementsByTagName('IMG');
for (z0=0;z0<imgs.length;z0++){
if (imgs[z0].title=='forward'){
this.addevt(imgs[z0],'mouseup','Next',o.id,1);
}
if (imgs[z0].title=='back'){
this.addevt(imgs[z0],'mouseup','Next',o.id,-1);
}
if (imgs[z0].title=='exit'){
this.addevt(imgs[z0],'mouseup','Hide',o.id,'hide');
}
}
}
divs[0].appendChild(ss);
ss.style.left=(divs[0].offsetWidth-ss.offsetWidth)/2+'px';
ss.style.top='10px';
divs[0].style.height=ss.offsetHeight+20+'px';
o.ph=ss.offsetHeight+(c?c.offsetHeight:0)+20;
c=c?c.getElementsByTagName('A')[0]:false;
o.caption=c?c:ss.cloneNode(false);
o.ary=ary;
o.cnt=0;
o.lgth=ary.length-1;
zxcPopUpGallery['zxc'+o.id]=o;
this.pop=o;
this.addevt(o.msk,'mousedown','Hide',o.id);
this.addevt(window,'resize','Hide',o.id,true);
},
Hide:function(id,ud,e){
var o=zxcPopUpGallery['zxc'+id],obj;
if (o){
if (e&&!ud){
obj=e.target?e.target:e.srcElement;
if (obj){
while (obj.parentNode){
if (obj==o.pop){
return;
}
obj=obj.parentNode;
}
}
}
if (!o.ms||ud===true){
this.hide(o);
}
else {
clearTimeout(o.to1);
clearTimeout(o.to2);
this.animate(o,o.pop,'top',o.pop.offsetTop,o.msk.offsetHeight/2,new Date(),o.ms,'to1');
this.animate(o,o.pop,'height',o.pop.offsetHeight,0,new Date(),o.ms,'to2');
}
}
},
Display:function(id){
var o=zxcPopUpGallery['zxc'+id];
if (o){
this.ready(o);
}
},
Next:function(id,ud){
var o=zxcPopUpGallery['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
if (o){
nu=o.cnt+ud;
nu=nu<0?o.lgth:nu>o.lgth?0:nu;
o.caption.innerHTML=o.ary[nu][2];
o.ary[o.cnt][1].style.zIndex='0';
o.ary[nu][1].style.zIndex='1';
this.animate(o,o.ary[nu][1],'',0,100,new Date(),o.ms,'op'+nu);
o.cnt=nu;
}
},
ready:function(o,nu){
if (o!=this.pop){
this.hide(this.pop);
}
o.ary[o.cnt][1].style.zIndex='0';
o.ary[nu][1].style.zIndex='1';
o.cnt=nu;
o.caption.innerHTML=o.ary[nu][2];
var mh=o.msk.offsetHeight;
o.pop.style.left=(o.msk.offsetWidth-o.pop.offsetWidth)/2+'px';
this.pop=o;
if (o.ms){
clearTimeout(o.to1);
clearTimeout(o.to2);
this.animate(o,o.pop,'top',mh/2,(mh-o.ph)/2,new Date(),o.ms,'to1');
this.animate(o,o.pop,'height',0,o.ph,new Date(),o.ms,'to2');
}
else {
o.pop.style.top=(mh-o.ph)/2+'px';
}
o.pop.style.visibility=o.msk.style.visibility='visible';
},
animate:function(o,obj,mde,f,t,srt,mS,to){
var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
if (mde){
obj.style[mde]=Math.max(now,0)+'px';
}
else {
oop.opc(obj,now);
}
}
if (ms<mS){
o[to]=setTimeout(function(){ oop.animate(o,obj,mde,f,t,srt,mS,to); },10);
}
else {
if (mde){
obj.style[mde]=t+'px';
}
if (t==0&&mde=='height'){
this.hide(o);
}
}
},
opc:function(o,n){
o.style.filter='alpha(opacity='+n+')';
o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
},
hide:function(o){
clearTimeout(o.to1);
clearTimeout(o.to2);
o.msk.style.visibility=o.pop.style.visibility='hidden';
o.pop.style.height='auto';
},
addevt:function(o,t,f,p,p1){
var oop=this;
if (o.addEventListener){
o.addEventListener(t,function(e){ return oop[f](p,p1,e); }, false);
}
else if (o.attachEvent){
o.attachEvent('on'+t,function(e){ return oop[f](p,p1,e); });
}
}
}
zxcPopUpGallery.init({
GalleryID:'gal1', // the unique ID name of the Gallery DIV. (string)
PopUpID:'pop1', // the unique ID name of the Pop Up DIV. (string)
MaskClass:'mask', //(optional) the class name of the Pop Up mask DIV. (string, default = no mask)
AnimateDuration:1000 //(optional) the animation speed in milli seconds. (number, default = no animation)
});
/*]]>*/
</script>
</body>
</html>
Junior Coders
Posting Permissions
Reply With Quote
Bookmarks