Results 1 to 4 of 4

Thread: Picture Collage Magnify

  1. #1
    Join Date
    Mar 2007
    Posts
    35
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Default Picture Collage Magnify

    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
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	moremonty.jpg 
Views:	148 
Size:	102.8 KB 
ID:	5447  
    Last edited by Beverleyh; 05-08-2014 at 01:53 PM. Reason: Formatting

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,998
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    12

    Default

    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. The Following User Says Thank You to jscheuer1 For This Useful Post:

    asiatic (05-09-2014)

  5. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,807
    Thanks
    2
    Thanked 423 Times in 417 Posts

    Default

    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>
    Last edited by vwphillips; 05-09-2014 at 03:48 PM. Reason: code tidy
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  6. The Following User Says Thank You to vwphillips For This Useful Post:

    asiatic (05-09-2014)

Similar Threads

  1. jQuery Image Magnify - magnify.cur in IE 10
    By geotso in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 04-09-2013, 02:29 PM
  2. My Photo Collage
    By jessicasmith in forum Picture Gallery
    Replies: 3
    Last Post: 02-15-2011, 11:40 AM
  3. Image Magnify v1.1 - Magnify alternate Image
    By Bernie Kruger in forum Dynamic Drive scripts help
    Replies: 9
    Last Post: 12-21-2009, 12:27 PM
  4. Jquery image magnify, magnify onmouseover
    By azoomer in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 10-15-2009, 09:27 PM
  5. Randomize a collage
    By jhogle in forum Looking for such a script or service
    Replies: 4
    Last Post: 02-26-2008, 08:51 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •