PDA

View Full Version : Adding clickable object with Image Power Zoomer v1.1


jenikzprahy
07-02-2014, 07:16 PM
1) Script Title:
Image Power Zoomer v1.1
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex4/powerzoomer.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


<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
jscheuer1
07-03-2014, 04:18 AM
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.
jenikzprahy
07-03-2014, 06:41 AM
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
vwphillips
07-03-2014, 03:00 PM
this can be used with image maps

http://www.vicsjavascripts.org/ImageZoomPanIII/ImageZoomPanIII.htm

or with less options


<!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.getElemen tById(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>
jenikzprahy
07-03-2014, 06:00 PM
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/showthread.php?55539-Power-Zoomer-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
jscheuer1
07-04-2014, 05:28 AM
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):

5499

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


<!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>
jenikzprahy
07-04-2014, 11:00 AM
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/dynamicindex4/lightbox/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)
jscheuer1
07-05-2014, 05:50 AM
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():


/*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:


// 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:


// 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:


<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:


<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.
jenikzprahy
07-05-2014, 02:52 PM
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?
jscheuer1
07-05-2014, 03:19 PM
Should be fine.