www.webdeveloper.com
Results 1 to 8 of 8

Thread: Image Zoom Utility with Tiles for the web

  1. #1
    Join Date
    Apr 2010
    Posts
    7

    Image Zoom Utility with Tiles for the web

    I'm searching for an script to zoom and image like this tool:

    http://www.magictoolbox.com/magiczoom/

    But I want the large zoom image to be loaded from small tiles like this page does:

    http://supersimple.org/imagetiles

    Is this possible in a simple way? Does this solution for zoom already exist? I want the zoom to preferably look just like Magic Zoom, plain and simple.

    Best Regards

  2. #2
    Join Date
    Apr 2010
    Posts
    7
    No one at all?

  3. #3
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,270
    See the CSS clip property for example here (see Property values and click on Play it ) and Its javascript equivalent.
    The principle : change the position of a big preloaded image and clip on the visible part !

  4. #4
    Join Date
    Apr 2010
    Posts
    7
    Quote Originally Posted by 007Julien View Post
    See the CSS clip property for example here (see Property values and click on Play it ) and Its javascript equivalent.
    The principle : change the position of a big preloaded image and clip on the visible part !
    Okey, thanks for your answer.

    But the thing I want is a zoom that works just like this one:

    http://www.elevateweb.co.uk/image-zoom/examples

    I would like to use Basic Zoom that uses this code:

    HTML Code:
    <img id="zoom_01" src="small/image1.png" data-zoom-image="large/image1.jpg"/>
    I'm OK with the first part that loads the small image:

    <img id="zoom_01" src="small/image1.png"

    But when the it loads the high resolution zoom image like this, unprotected:

    data-zoom-image="large/image1.jpg"/>

    That's my problem.

    I would like to load several image tiles just like this example, but during the zooming:

    http://supersimple.org/imagetiles

    http://supersimple.org/im/imagetiles/bull1.jpg
    http://supersimple.org/im/imagetiles/bull2.jpg

    Is this possible in some way?

  5. #5
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,270
    Yes this is possible, see this 4ko demo page (and its source). But be patient (my image is too big) !
    I do not use HTML5 data-zoom which do not work with old IE versions...

    Its only a prototype, to work for several images...

    Good luck !

  6. #6
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,687
    using image slices

    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>
    <base href="http://www.vicsjavascripts.org.uk/StdImages/"  />
    <style type="text/css">
    /*<![CDATA[*/
    
    #large {
      position:absolute;left:450px;top:100px;width:300px;height:300px;border:solid red 1px;
    }
    
    #large DIV {
      position:absolute;width:900px;height:900px;
    }
    
    #large DIV IMG {
      width:300px;height:300px;float:left;
    }
    
    #small {
      position:absolute;left:100px;top:100px;overflow:hidden;width:300px;height:300px;
    }
    
    
    #small IMG {
      width:100px;height:100px;float:left;
    }
    
    .window {
      position:absolute;border:solid black 1px;z-Index:101;background-Color:red;
    /* Moz */
      opacity: .5;
    /* IE5-7 */
      filter: alpha(opacity=50);
    /* IE8 */
       -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    }
    
    /*]]>*/
    </style>
    </head>
    
    <body>
     <div id="small" >
       <img src="1.gif" alt="img" />
       <img src="2.gif" alt="img" />
       <img src="3.gif" alt="img" />
       <img src="4.gif" alt="img" />
       <img src="5.gif" alt="img" />
       <img src="6.gif" alt="img" />
       <img src="7.gif" alt="img" />
       <img src="8.gif" alt="img" />
       <img src="9.gif" alt="img" />
     </div>
    
     <div id="large" >
      <div >
       <img src="1.gif" alt="img" />
       <img src="2.gif" alt="img" />
       <img src="3.gif" alt="img" />
       <img src="4.gif" alt="img" />
       <img src="5.gif" alt="img" />
       <img src="6.gif" alt="img" />
       <img src="7.gif" alt="img" />
       <img src="8.gif" alt="img" />
       <img src="9.gif" alt="img" />
      </div>
    
    </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Image Zoom. (16-November-2013)
    // by Vic Phillips http://www.vicsjavascripts.org.uk/
    
    var zxcImageZoom={
    
     init:function(o){
      var id=o.SmallID,l=document.getElementById(o.LargeID),wcls=o.WindowClass,limg=l?l.getElementsByTagName('*')[0]:null,simg=document.getElementById(id);
      if (limg&&simg){
       var w=document.createElement('DIV');
       o.s=simg;
       o.sw=this.css(simg,'width');
       o.sh=this.css(simg,'height');
       w.style.position='absolute';
       w.className=wcls;
       o.l=limg;
       o.p=l;
       o.lw=this.css(limg,'width');
       o.lh=this.css(limg,'height');
       o.w=w;
       o.ww=this.css(l,'width')*o.sw/o.lw;
       o.wh=this.css(l,'height')*o.sh/o.lh;
       w.style.width=o.ww+'px';
       w.style.height=o.wh+'px';
       o.r=(o.lw-this.css(l,'width'))/(o.sw-o.ww);
       o.ud=true;
       o.p.style.visibility=o.w.style.visibility='hidden';
       o.p.style.overflow='hidden';
       document.body.appendChild(w);
       this.addevt(document,'mousemove','move',o);
      }
     },
    
     move:function(e,o){
      var xy=this.mse(e),p=this.pos(o.s),ud=xy[0]>p[0]&&xy[0]<p[0]+o.sw&&xy[1]>p[1]&&xy[1]<p[1]+o.sh,x=Math.min(Math.max(xy[0]-o.ww/2,p[0]),p[0]+o.sw-o.ww),y=Math.min(Math.max(xy[1]-o.wh/2,p[1]),p[1]+o.sh-o.wh);
      if (o.ud!=ud){
       o.p.style.visibility=o.w.style.visibility=ud?'visible':'hidden';
    
      }
      o.ud=ud;
      if (ud){
       o.w.style.left=x+'px';
       o.w.style.top=y+'px';
       o.l.style.left=-(x-p[0])*o.r+'px';
       o.l.style.top=-(y-p[1])*o.r+'px';
      }
     },
    
     css:function(o,p){
      return parseInt(o.currentStyle?o.currentStyle[p.replace(/-/g,'')]:document.defaultView.getComputedStyle(o,null).getPropertyValue(p.toLowerCase()));
     },
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     },
    
     mse:function(e){
      var ds=!document.body.scrollTop?[document.documentElement.scrollLeft,document.documentElement.scrollTop]:[document.body.scrollLeft,document.body.scrollTop];
      return window.event?[e.clientX+ds[0],e.clientY+ds[1]]:[e.pageX,e.pageY];
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      o.addEventListener?o.addEventListener(t,function(e){ return oop[f](e,p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](e,p,p1); }):null;
     }
    
    
    }
    
    zxcImageZoom.init({
     SmallID:'small',      // the unique ID name of the small image parent DIV. (string)
     LargeID:'large',      // the unique ID name of the large image parent DIV. (string)
     WindowClass:'window'  // the class namw of the overlay window.             (string)
    });
    /*]]>*/
    </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/

  7. #7
    Join Date
    Jun 2013
    Posts
    37
    As a matter of fact, an html5 image viewer will offer the appending zooming function of web image an document page to zoom in and zoom out image width and heigth to fulfill any image viewing needs.

  8. #8
    Join Date
    Apr 2013
    Posts
    31
    Quote Originally Posted by Alcottpdf View Post
    As a matter of fact, an html5 image viewer will offer the appending zooming function of web image an document page to zoom in and zoom out image width and heigth to fulfill any image viewing needs.
    Hi, Alcottpdf.
    Can you offer some more tutorials about the relevant image zooming projects? I am looking for it all these days. Thanks in advance.



    Best regards,
    Arron

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles