Picture Collage Magnify

**asiatic** · 05-08-2014, 12:41 PM

I am looking for a way to enlarge a picture from a collage of images like below.
By clicking on one picture that picture should expand & if possible a short description about the pic.
Example picture attached
Thank you in anticipation

**Beverleyh** · 05-08-2014, 01:57 PM

Something like this?: http://css-tricks.com/expanding-images-html5/

**jscheuer1** · 05-08-2014, 04:04 PM

If you already have the collage and want to use it and also have the larger images for each of the smaller ones within the collage, you could use the collage image as an image map with area tags for each image within it linking to its respective larger image and then use something like slimbox, lightbox, fancybox, etc. to display that image on click with a title/caption.

**vwphillips** · 05-08-2014, 05:13 PM

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[*/
.popup {
 z-Index:101;border:solid red 1px;
}

.caption {
 z-Index:101;width:200px;margin-Top:5px;text-Align:center;background-Color:#FFFFCC;border:solid red 1px;
}

.mask {
  z-Index:100;left:0px;top:0px;width:100%;height:100%;background-Color:#99FFFF;
/* Moz */
  opacity: .5;
/* IE5-7 */
  filter: alpha(opacity=50);
/* IE8 */
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}


/*]]>*/
</style></head>

<body>
<img src="http://www.vicsjavascripts.org/StdImages/Egypt5678.jpg" usemap="#ImageMap4" ismap="ismap" border="0" />
 <map name="ImageMap4" id="map4" >
  <area shape="rect" alt="" coords="0,0,100,75"  onclick="zxcImagePopUp.Open('map4','http://www.vicsjavascripts.org/StdImages/EgyptM3.jpg','Egypt 5');" />
  <area shape="rect" alt="" coords="100,0,200,75"  onclick="zxcImagePopUp.Open('map4','http://www.vicsjavascripts.org/StdImages/Egypt6.jpg','Egypt 6');" />
  <area shape="rect" alt="" coords="0,75,100,150"  onclick="zxcImagePopUp.Open('map4','http://www.vicsjavascripts.org/StdImages/EgyptM2.jpg','Egypt 7');" />
  <area shape="rect" alt="" coords="100,75,200,150"  onclick="zxcImagePopUp.Open('map4','http://www.vicsjavascripts.org/StdImages/Egypt8.jpg','Egypt 8');" />
</map>

<script type="text/javascript">
/*<![CDATA[*/
// Image PopUp (09-May-2014)
// by Vic Phillips http://www.vicsjavascripts.org

var zxcImagePopUp={

 Open:function(id,src,c){
  var oop=this,o=oop['zxc'+id];
  if (o&&typeof(src)=='string'){
   clearTimeout(o.to);
   if (!o.ud){
    o.c.innerHTML=c||'';
    o.ni=new Image();
    o.ni.src=src;
    o.to=setTimeout(function(){ oop.load(o,false); },100);
   }
   else {
    oop.open(o,false);
    if (src.slice(src.lastIndexOf('/')+1)!=o.ni.src.slice(o.ni.src.lastIndexOf('/')+1)){
     o.nxt=[src,c];
    }
   }
  }
 },

 init:function(o){
  var id=o.ID,pc=o.PopUpClass,mc=o.MaskClass,cc=o.CaptionClass,ms=o.Animate;
  if (typeof(id)=='string'&&typeof(pc)=='string'&&!this['zxc'+id]){
   var mk=document.createElement('DIV'),i=document.createElement('IMG'),msk,c;
   mk.style.position=i.style.position='fixed';
   c=mk.cloneNode(true);
   msk=mk.cloneNode(true);
   mk.style.right=mk.style.bottom=mk.style.width=mk.style.height=msk.style.left='0px';
   i.style.left=i.style.top=c.style.left=c.style.top=msk.style.top='-30000px';
   i.className=pc;
   msk.className=mc;
   c.className=cc;
   document.body.appendChild(mk);
   typeof(mc)=='string'?document.body.appendChild(msk):null;
   document.body.appendChild(i);
   typeof(cc)=='string'?document.body.appendChild(c):null;
   o.id=id;
   o.i=i;
   o.a=[[i,'left'],[i,'top'],[i,'height'],[i,'width']];
   o.c=c;
   o.mk=mk;
   o.msk=msk;
   o.ms=typeof(ms)=='number'&&ms>20?ms:1000;
   this.addevt(msk,'click','open',o,false);
   this.addevt(document,'click','close',o,false);
   this.addevt(window,'resize','resize',o);
   this['zxc'+id]=o;
  }
 },

 load:function(o){
  var oop=this;
  clearTimeout(o.to);
  if (o.ni.width<40){
   return o.to=setTimeout(function(){ oop.load(o); },100);
  }
  o.i.src=o.ni.src;
  o.i.style.width=o.ni.width+'px';
  o.i.style.height=o.ni.height+'px';
  this.open(o,true);
 },

 open:function(o,ud){
  o.msk.style.left=o.msk.style.top='0px';
  o.msk.style.width=o.mk.offsetLeft+'px';
  o.msk.style.height=o.mk.offsetTop+'px';
  o.c.style.top='-30000px';
  this.animate(o,o.a[0],ud?o.mk.offsetLeft/2:o.a[0][3],ud?(o.mk.offsetLeft-o.i.offsetWidth)/2:o.mk.offsetLeft/2,new Date(),o.ms);
  this.animate(o,o.a[1],ud?o.mk.offsetTop/2:o.a[1][3],ud?(o.mk.offsetTop-o.i.offsetHeight)/2:o.mk.offsetTop/2,new Date(),o.ms);
  this.animate(o,o.a[2],ud?0:o.a[2][3],ud?o.ni.height:0,new Date(),o.ms);
  this.animate(o,o.a[3],ud?0:o.a[3][3],ud?o.ni.width:0,new Date(),o.ms,ud);
  o.ud=ud;
 },

 close:function(o){
  if (o.ud){
   this.open(o,false);
  }
 },

 resize:function(o){
  if (o.ud){
   o.msk.style.width=o.mk.offsetLeft+'px';
   o.msk.style.height=o.mk.offsetTop+'px';
   o.c.style.top='-30000px';
   this.animate(o,o.a[0],o.a[0][3],(o.mk.offsetLeft-o.i.offsetWidth)/2,new Date(),o.ms/4);
   this.animate(o,o.a[1],o.a[1][3],(o.mk.offsetTop-o.i.offsetHeight)/2,new Date(),o.ms/4,true);
  }
 },

 animate:function(o,a,f,t,srt,mS,nxt){
  clearTimeout(a[4]);
  var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
  if (isFinite(n)){
   a[3]=Math.max(f<0||t<0?n:0,n);
   a[0].style[a[1]]=a[3]+'px';
  }
  if (ms<mS){
   a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,nxt); },10);
  }
  else {
   a[3]=t;
   a[0].style[a[1]]=t+'px';
   if (nxt===false){
    o.i.style.left=o.i.style.top=o.msk.style.left=o.msk.style.top='-30000px';
    if (o.nxt){
     oop.Open(o.id,o.nxt[0],o.nxt[1]);
     o.nxt=false;
    }
   }
   if (nxt===true&&o.c.innerHTML){
    o.c.style.left=o.i.offsetLeft+(o.i.offsetWidth-o.c.offsetWidth)/2+'px';
    o.c.style.top=o.i.offsetTop+o.i.offsetHeight+'px';
   }
  }
 },

 addevt:function(o,t,f,p,p1){
  var oop=this;
  o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
 }



}

zxcImagePopUp.init({
 ID:'map4',              // a unique name to identify the script instance.           (string)
 PopUpClass:'popup',     // popup image class name to specify the popup z-Index etc. (string)
 MaskClass:'mask',       //(optional) image mask class name.                         (string, default = no image mask)
 CaptionClass:'caption', //(optional) image caption class name.                      (string, default = no image caption)
 Animate:1000            //(optional) the animation duration in millisec.            (string, default = 1000)
});

/*]]>*/
</script>
</body>

</html>