Results 1 to 10 of 10

Thread: Adding clickable object with Image Power Zoomer v1.1

  1. #1
    Join Date
    Jul 2014
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Adding clickable object with Image Power Zoomer v1.1

    1) Script Title:
    Image Power Zoomer v1.1
    2) Script URL (on DD):
    http://www.dynamicdrive.com/dynamici...owerzoomer.htm
    3) Describe problem:

    Hello, thx for great work you guys r doing here. I am using Image Power Zoomer v1.1 for my project.

    What i have
    - There is an only-one-picture-web-page (one main big picture and thats it) with Power zoomer perfectly working on it. Its photo of shelf with different shampoons in a shop.

    I need to make 2 product interactive (with link), so if i click on em it will show a 4picture gallery of that product. I did the linking part with "maps" and it looks like this
    Code:
    <CENTER><img id="myimage" src="regal_obrovsky_hd.jpg" href="" border="0" width="1217" height="371" orgWidth="1217" orgHeight="371" usemap="#image-maps-2014-07-02-125939" alt="" />
    <map name="image-maps-2014-07-02-125939" id="myimage">
    <area  alt="" title="" href="miraclecream1.html" shape="rect" coords="875,27,900,90" style="outline:none;" target="_self"     />
    <area  alt="" title="" href="miraclecream2.html" shape="rect" coords="900,30,920,90" style="outline:none;" target="_self"     />
    <area shape="rect" coords="2432,741,2434,743" alt="Image Map" style="outline:none;" title="Image Map" href="" />
    </map>
    if i turn the zoom function off it works pretty good, but cant do it while its zoomed (when i put mouse over it, it gets zoomed, and links are dead)

    I need to manage to work it with zoom overlay...

    I would be really thankfull for anyone who help me to figure this out (on/off switch for zoom is not an option :-( )

    Thanks in advance

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

    Default

    It might be tricky. Obviously the image map is covered by the enlarged area of the image (which is itself an image, and if you wanted that image to work exactly as before, it would also have to be an image map). If I could see a version of the page without the zoom and one with, I might be able to come up with a shortcut for you and/or a way to generate the map coords for the enlarged image.
    - John
    ________________________

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

  3. #3
    Join Date
    Jul 2014
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Re

    Hi John, thanks a lot for your fast answer. I uploaded the files, you can test it with on/off zoom function.

    http://leteckaposta.cz/446733457 (for download just click the "zoom1_1.rar")

    If you have zoom on - it zooms

    If you turn it off, two products should have links to gallery. (I marked them for your on image attached here)

    I though the same - adding coordinates to overlay pictucure but it seems impossible for me, so I am really happy for you giving me hand.

    Jan
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	regal_obrovsky.jpg 
Views:	55 
Size:	121.1 KB 
ID:	5495  

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

    Default

    this can be used with image maps

    http://www.vicsjavascripts.org/Image...ZoomPanIII.htm

    or with less options

    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[*/
    .window {
      position:absolute;width:100px;height:100px;border:solid red 1px;
    }
    
    #myimage{
     width:500px;height:250px;cursor:move;border-Width:0px;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    
        <img id="myimage" src="http://www.vicsjavascripts.org/StdImages/World2.jpg" alt="world" usemap="#world" ismap="ismap" >
    
    
       <map name="world" id="world" >
        <area shape="poly" coords="261,74,241,79,225,94,233,116,258,119,270,137,264,148,275,170,292,171,296,155,308,148,303,132,321,111,307,106,297,82">
        <area shape="poly" coords="151,108,203,132,154,203,143,196,154,152,138,129">
        <area shape="poly" coords="141,113,166,99,139,79,180,58,165,27,20,28,21,45,35,49,46,41,81,61,73,75,88,84,107,102">
        <area shape="poly" coords="284,22,308,31,302,61,275,76,258,65,246,73,234,70,235,49,246,36">
        <area shape="poly" coords="314,31,305,73,323,88,353,96,352,114,366,120,362,99,383,95,386,118,409,106,401,93,423,85,495,39,441,21,391,16,348,25">
        <area shape="poly" coords="406,156,432,137,446,150,446,139,454,151,464,164,458,178,449,182,438,167,414,172">
       </map>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // ZoomImage(with Image Maps) (03-July-2014)
    // by Vic Phillips http://www.vicsjavascripts.org.uk/
    
    var zxcZoomImage={
    
     init:function(o){
      var id=o.ImageID,wc=o.WindowClass,src=o.ZoomSRC,z=o.Zoom,zm=o.ZoomMin,zx=o.ZoomMax,zi=o.ZoomIncrement,map=document.getElementById(o.ImageMapID),i=document.getElementById(id);
      if (i&&i.nodeName.toUpperCase()=='IMG'){
       var w=document.createElement('DIV'),wi=map?i.cloneNode(false):document.createElement('DIV'),sz,as,z0=0;
       w.style.position=wi.style.position='absolute';
       w.style.left=w.style.top='-3000px';
       w.style.overflow='hidden';
       wi.src=typeof(src)=='string'?src:i.src;
       w.className=wc;
       w.appendChild(wi);
       document.body.appendChild(w);
       o.iw=i.width;
       o.ih=i.height;
       sz=this.css(w,'width');
       o.ww=sz>0?sz/2:o.iw/8;
       sz=this.css(w,'height');
       o.wh=sz>0?sz/2:o.ih/8;
       w.style.width=o.ww*2+'px';
       w.style.height=o.wh*2+'px';
       o.i=i;
       o.w=w;
       o.wi=wi;
       o.a=[];
       if (map){
        as=map.getElementsByTagName('AREA');
        for (;z0<as.length;z0++){
         o.a.push([as[z0],as[z0].coords.split(',')]);
        }
       }
       o.z=typeof(z)=='number'&&z>=1?z:2;
       o.zm=typeof(zm)=='number'&&zm>=1?zm:2;
       o.zx=typeof(zx)=='number'&&zx>o.zx?zx:5;
       o.zi=typeof(zi)=='number'?zi:0.1;
       o.m=[0,0];
       this.addevt(i,'mouseover','start',o);
       if (!this.srt){
        this.addevt(document,'mousemove','move');
        document.addEventListener?this.addevt(document,'DOMMouseScroll','wheel'):null;
        this.addevt(document,'mousewheel','wheel');
        this.srt=true;
       }
      }
     },
    
     start:function(e,o){
      this.o=o;
      this.coords(o,o.z);
     },
    
     stop:function(e,o){
      var oop=this;
      o.w.style.left=o.w.style.top='-30000px';
      oop.coords(o,1);
      oop.o=null;
     },
    
     move:function(e){
      if (this.o){
       var o=this.o,p=this.pos(o.i),m=e?this.mse(e):o.m,x=Math.max(Math.min(m[0]-o.ww,p[0]+o.i.width-o.ww),p[0]-o.ww),y=Math.max(Math.min(m[1]-o.wh,p[1]+o.i.height-o.wh),p[1]-o.wh);
       o.m=m;
       o.wi.style.width=o.iw*o.z+'px';
       o.wi.style.height=o.ih*o.z+'px';
       o.w.style.left=x+'px';
       o.w.style.top=y+'px';
       o.wi.style.left=-(x-p[0]+o.ww)*o.z+o.ww+'px';
       o.wi.style.top=-(y-p[1]+o.wh)*o.z+o.wh+'px';
       m[0]<p[0]||m[0]>p[0]+o.iw||m[1]<p[1]||m[1]>p[1]+o.ih?this.stop(e,o):null;
       return e?this.rtn(e):false;
      }
     },
    
     mse:function(e){
      var d=!document.body.scrollTop?[document.documentElement.scrollLeft,document.documentElement.scrollTop]:[document.body.scrollLeft,document.body.scrollTop];
      return window.event?[e.clientX+d[0],e.clientY+d[1]]:[e.pageX,e.pageY];
     },
    
     wheel:function(e){
      e=e?e:window.event;
      if (this.o){
       var o=this.o,ud=(e.detail?e.detail>0?-1:1:e.wheelDelta/40>0?1:-1);
       o.z+=ud>0?o.zi:ud<0?-o.zi:0;
       o.z=Math.min(Math.max(o.z,o.zm),o.zx);
       this.coords(o,o.z);
       this.move();
       return this.rtn(e);
      }
     },
    
     rtn:function(e){
      if(e.stopPropagation){
       e.stopPropagation();
      }
      if (!window.event){
       e.preventDefault();
      }
      e.cancelBubble=true;
      e.cancel=true;
      e.returnValue=false;
      return false;
     },
    
     coords:function(o,z){
      for (var a,z0a=0,z0=0;z0<o.a.length;z0++){
       a=[];
       for (z0a=0;z0a<o.a[z0][1].length;z0a++){
        a[z0a]=o.a[z0][1][z0a]*o.z;
       }
       o.a[z0][0].coords=a.join(',');
      }
     },
    
     pos:function(o){
      var r=[0,0];
      while(o){
       r[0]+=o.offsetLeft;
       r[1]+=o.offsetTop;
       o=o.offsetParent;
      }
      return r;
     },
    
     css:function(o,p){
      return parseInt(o.currentStyle?o.currentStyle[p.replace(/-/g,'')]:document.defaultView.getComputedStyle(o,null).getPropertyValue(p.toLowerCase()));
     },
    
     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;
     }
    
    
    }
    
    zxcZoomImage.init({
     ImageID:'myimage',    // the unique ID name of the featured image.           (string)
     WindowClass:'window', //(optional) the unique ID name of the featured image. (string, default = sized to featured image size/4)
     ImageMapID:'world',   //(optional) the unique ID name of image map.          (string, default = no image map)
     ZoomSRC:false,        //(optional) the src of the zoom image.                (string, default = the featured image src)
     Zoom:2,               //(optional) the initial zoom image zoom.              (number, default = 2)
     ZoomMin:1,            //(optional) the minimum zoom image zoom.              (number, default = 1)
     ZoomMax:5,            //(optional) the maximum zoom image zoom.              (number, default = 5)
     ZoomIncrement:0.1     //(optional) the zoom image zoom increment.            (number, default = o.1)
    });
    /*]]>*/
    </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/

  5. #5
    Join Date
    Jul 2014
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    thx for response Vic, but this didnt help :-( i need to make it work somehow with that area mouseover zoom :-(

    I am not sure but this seems like some old thing what u were already resolving here : http://www.dynamicdrive.com/forums/s...plus-Image-Map

    unfortunately i dont have any idea how do i implement solution from there on my case... adding map to zoomed image (overlay)

    If you spend few mins with it i would be really pleased

    Thanks anyway

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

    Default

    OK, I downloaded your demo. It had two initializations for the same image, regardless of what you're trying to do, that's not right. So, since the second one overrides the first one, at least for the most part, I removed the first one. Then I set about editing the script to see if I could get it to clone and enlarge the image map for use with the larger image. That actually worked out pretty well. Since all I changed was the ddpowerzoomer.js script, I will attach the modified version (right click and save as):

    ddpowerzoomer.js

    Just make sure to comment out (or remove it if you prefer) the first init on vizualizace.html (additions highlighted):

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    
    <html>
        <head>
           <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    
    <script type="text/javascript" src="ddpowerzoomer.js"></script>
    
    
    <!-- <script type="text/javascript">
    jQuery(document).ready(function($){ 
     $('#myimage').addpowerzoom({
     defaultpower: 1,
     powerrange: [2,9],
     largeimage: "regal_obrovsky_hd.jpg",
     magnifiersize: [300,300] 
    })
    })
    </script> -->
    
    <script type="text/javascript">
    jQuery(document).ready(function($){ 
     $('#myimage').addpowerzoom()
    })
    function showhidezoom(action){
    ddpowerzoomer.$magnifier.outer.css({visibility:(action=="show")? "visible" : "hidden"})
    }
    </script>
    
    
        </head>
    
        <body>
    
    <p><a href="javascript:showhidezoom('show')">Show</a> <a href="javascript:showhidezoom('hide')">Hide</a>
           
    <CENTER><img id="myimage" src="regal_obrovsky_hd.jpg" href="" border="0" width="1217" height="371" orgWidth="1217" orgHeight="371" usemap="#image-maps-2014-07-02-125939" alt="" />
    <map name="image-maps-2014-07-02-125939">
    <area  alt="" title="" href="miraclecream1.html" shape="rect" coords="875,27,900,90" style="outline:none;" target="_self"     />
    <area  alt="" title="" href="galery2.com" shape="rect" coords="900,30,920,90" style="outline:medium;" target="_self"     />
    <area shape="rect" coords="2432,741,2434,743" alt="Image Map" style="outline:none;" title="Image Map" href="" />
    </map>
         
    
    
    
    
        </body>
    </html>
    Last edited by jscheuer1; 07-04-2014 at 02:52 PM. Reason: details
    - John
    ________________________

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

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

    jenikzprahy (07-04-2014)

  8. #7
    Join Date
    Jul 2014
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thanks a lot for your help. It works like a charm now. I dont have many experience with coding and wont manage to do it without your help, so I am really grateful.

    Now I am trying to add gallery...

    After clicking at each of those two products (mapped areas) it should open"gallery" (2galleries, 1 for 1 product, on same page in overlay) with basic navigation (left, right, close) with 4 photos (front, left, right, back)...

    Is there any chance u can help me with it? Or at least point me to the right direction (which script should I use) and I will try to do it by myself.

    I tried to archieve it with http://www.dynamicdrive.com/dynamici...tbox/index.htm but for some reason it fails to work - i did everything what does the manual say. But I never saw the overlay (after click it just opened *-jpg file in new tab)

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

    Default

    I'd use a jQuery based script for that. That way you only need one copy of jQuery for the page. SlimBox2 should work:

    http://www.digitalia.be/software/slimbox2

    In the ddpowerzoomer.js file, comment out the jQuery.noConflict():

    Code:
    /*Image Power Zoomer v1.1 (June 18th, 2010)
    * This notice must stay intact for usage 
    * Author: Dynamic Drive at http://www.dynamicdrive.com/
    * Visit http://www.dynamicdrive.com/ for full source code
    */
    
    //June 18th, 10: Adds ability to specify a different, higher resolution version of the original image as the image shown inside the magnifying glass.
    //July 4th, 14: Adds automatic detection and adaptation of image map on image to magnifier (unofficial - jscheuer1)
    
    //jQuery.noConflict()
    
    var ddpowerzoomer={
    	dsetting: {defaultpo . . .
    Install the script and styles for SlimBox2 as noted on its demo page linked to above. In slimbox2.js, change:

    Code:
    // AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
    if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
    	jQuery(function($) {
    		$("a[rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) {
    			return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
    		});
    	});
    }
    to:

    Code:
    // Live invocation for use with other scripts, image maps, AJAX, etc. - also skips duplicates when forming groups
    // Uses the rev attribute of the tag for a caption, freeing up the title for other uses or to be blank.
    // Remove the AUTOLOAD CODE BLOCK if using this, or replace it with this code.
    // Live Load Script (c)2011 John Davenport Scheuer - for use with Slimbox 2.04
    // as first seen in http://www.dynamicdrive.com/forums/
    // username: jscheuer1 - This Notice Must Remain for Legal Use
    (function($){
    	if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
    		$('*[href][rel^=lightbox]').live('click', function(e){
    			var t = this, rel = t.getAttribute('rel'), hrefs = [], links = [], index;
    			if(rel === 'lightbox'){
    				$.slimbox(t.href, t.getAttribute('rev') || '', { /* Options */ });
    			} else {
    				$('*[href][rel="' + rel + '"]').each(function(){
    					if($.inArray(this.href, hrefs) < 0){
    						if(t.href === this.href){index = hrefs.length;}
    						hrefs.push(this.href);
    						links.push([this.href, this.getAttribute('rev') || '']);
    					}
    				});
    				$.slimbox(links, index, {loop: true /* , Aditional Options */ });
    			}
    			e.preventDefault();
    		});
    	}
    })(jQuery);
    In the image map, make the area tag have a rel attribute of lightbox[product1] for one product and lightbox[product2] for the other:

    Code:
    <map name="image-maps-2014-07-02-125939">
    <area rel="lightbox[product1]" alt="" title="" href="miraclecream1a.jpg" shape="rect" coords="875,27,900,90" style="outline:none;" target="_self"     />
    <area rel="lightbox[product2]" alt="" title="" href="miraclecream2a.jpg" shape="rect" coords="900,30,920,90" style="outline:medium;" target="_self"     />
    <area shape="rect" coords="2432,741,2434,743" alt="Image Map" style="outline:none;" title="Image Map" href="" />
    </map>
    For each, set its href to the first image for that product. Somewhere else on the page, make up links with the other images, ex:

    Code:
    <a rel="lightbox[product1]" href="miraclecream1b.jpg"></a>
    <a rel="lightbox[product1]" href="miraclecream1c.jpg"></a>
    <a rel="lightbox[product1]" href="miraclecream1d.jpg"></a>
    
    <a rel="lightbox[product2]" href="miraclecream2b.jpg"></a>
    <a rel="lightbox[product2]" href="miraclecream2c.jpg"></a>
    <a rel="lightbox[product2]" href="miraclecream2d.jpg"></a>
    These are unseen links because they have no text. But they will be used by SlimBox2 to add to the the gallery of images to be shown for the respective products as indicated by their designation in the bracketed portion of the rel attribute.

    Any problems or questions, just let me know.
    - John
    ________________________

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

  10. #9
    Join Date
    Jul 2014
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Wow John,

    if i would be a woman i would say i want to invite you for a dinner. I will try your solution later today. This whole thing you guys are doing here is awesome. Helping noobs doing tricks. Community at its best.

    Btw. one more question (hopefully last) - this "page" will be used on computers with no connections (offline). Is it simple as i think - download all external scrits a change links (http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" to something/something/jquery.min.js in used files ? Or its goin to be harder than that?

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

    Default

    Should be fine.
    - John
    ________________________

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

Similar Threads

  1. Image Power Zoomer URL Problem
    By rozzarob in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 04-05-2012, 04:58 PM
  2. Power Zoomer plus Image Map?
    By jkoke in forum Dynamic Drive scripts help
    Replies: 11
    Last Post: 04-01-2012, 12:55 AM
  3. Installing Image Power Zoomer v1.1
    By DiscoverSB in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 09-01-2011, 11:02 PM
  4. Bug with Image Power Zoomer v1.1
    By spuddle in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 07-08-2011, 07:24 PM
  5. PHP & Image Power Zoomer
    By funkfact in forum PHP
    Replies: 1
    Last Post: 11-17-2010, 05:36 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
  •