Results 1 to 3 of 3

Thread: Help needed to build a function similar to 'Image Thumbnail Viewer II'

  1. #1
    Join Date
    Feb 2012
    Location
    London
    Posts
    24
    Thanks
    13
    Thanked 2 Times in 2 Posts

    Default Help needed to build a function similar to 'Image Thumbnail Viewer II'

    Hello,

    Could someone build me a function similar to 'Image Thumbnail Viewer II', where the script loads and displays a larger image when a thumbnail is rolled over, except that I would like the image to appear over each thumbnail, not beside it, like on this site:

    http://www.plainpicture.com/com/sear...=x1201&x=0&y=0

    Thank you for any help.

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,780
    Thanks
    2
    Thanked 414 Times in 408 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[*/
    .popclass {
      border:solid red 1px;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    <center>
    <br /><br /><br /><br /><br />
    <a href="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" rel="Magnify MagnifyBy:2 PopClass:popclass" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" width="100"/></a>
    <a href="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" rel="Magnify MagnifyBy:2 PopClass:popclass" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="img"  width="100"/></a>
    
    </center>
    
    <br /><br /><br /><br /><br />
    <a href="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" rel="Magnify MagnifyBy:2 PopClass:popclass" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" width="100"/></a>
    <a href="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" rel="Magnify MagnifyBy:2 PopClass:popclass" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="img"  width="100"/></a>
    
    <p align="right">
    <br /><br /><br /><br /><br />
    <a rel="Magnify MagnifyBy:2 PopClass:popclass" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" width="100"/></a>
    <a  rel="Magnify MagnifyBy:2 PopClass:popclass" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="img"  width="100"/></a>
    
    </p><script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    
    var magnify={
    
     init:function(nme){
      var as=document.getElementsByTagName('A'),rel,img,obj,i,z0=0,z0a;
      for (;z0<as.length;z0++){
       img=as[z0].getElementsByTagName('IMG')[0];
       rel=as[z0].rel;
       if (rel&&img){
        rel=rel.split(' ');
        if (rel[0]==nme){
         obj={nme:nme+z0,img:img,src:as[z0].href}
         for (z0a=1;z0a<rel.length;z0a++){
          i=rel[z0a].indexOf(':')
          if (i>2){
           obj[rel[z0a].substring(0,i).toLowerCase()]=rel[z0a].substring(i+1);
          }
         }
         as[z0].removeAttribute('href');
         this.create(obj,img);
        }
       }
      }
     },
    
     create:function(obj,img){
      obj.mag=isFinite(obj.magnifyby)?obj.magnifyby:2;
      var pop=document.createElement('IMG');
      pop.style.position='absolute';
      pop.style.left='-3000px';
      pop.style.top='-3000px';
      pop.className=obj.popclass;
      obj.pop=pop
      document.body.appendChild(obj.pop);
      this.addevt(img,'mouseover','show',obj);
      this.addevt(pop,'mouseout','hide',obj);
     },
    
     show:function(obj,e){
      if (!obj.pop.src){
       clearTimeout(this.to);
       var nimg=new Image();
       nimg.src=obj.src||obj.img.src;
       return this.load(obj,nimg);
      }
      var img=obj.img,pop=obj.pop,p=this.pos(obj.img),wwhs=this.wwhs(),pw=pop.offsetWidth,ph=pop.offsetHeight;
      pop.style.left=Math.min(Math.max(p[0]+(img.offsetWidth-pw)/2,wwhs[2]+5),wwhs[2]+wwhs[0]-pw-5)+'px';
      pop.style.top=Math.min(Math.max(p[1]+(img.offsetHeight-ph)/2,wwhs[3]+5),wwhs[3]+wwhs[1]-ph-5)+'px';
     },
    
     hide:function(obj,e){
      obj.pop.style.left='-3000px';
      obj.pop.style.top='-3000px';
     },
    
     load:function(obj,nimg){
      var oop=this;
      if (nimg.width<50){
       oop.to=setTimeOut(function(){ oop.load(obj,nimg); },100);
      }
      else {
       obj.pop.src=nimg.src;
       obj.pop.style.width=obj.img.width*obj.mag+'px';
       obj.pop.style.height=obj.img.height*obj.mag+'px';
       oop.show(obj);
      }
     },
    
     addevt:function(o,t,f,p){
      var oop=this;
      if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
      else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
     },
    
     wwhs:function(){
      if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
      else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
      return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
     },
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     }
    
    
    }
    
    magnify.init('Magnify');
    /*]]>*/
    </script>
    </body>
    
    </html>
    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/

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

    FrankieL (03-13-2012)

  4. #3
    Join Date
    Feb 2012
    Location
    London
    Posts
    24
    Thanks
    13
    Thanked 2 Times in 2 Posts

    Default

    That's wonderful. Thank you.

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
  •