• [Mod] Zoom MOD 2 0 5 1
Currently:  

Author Topic: [Mod] Zoom MOD  (Read 15239 times)

0 Members and 1 Guest are viewing this topic.

Offline kubiczek

  • Full Member
  • ***
  • Posts: 212
    • View Profile
    • Gross Peterwitz
[Mod] Zoom MOD
« on: February 08, 2011, 06:48:54 PM »
Hallo,

habe dieses Tool gefunden http://www.netzgesta.de/loupe


@Rembrandt hat die ganze arbeit geleistet und alles optimal angepasst.

http://www.4homepages.de/forum/index.php?topic=29056.msg155686#msg155686

viel spass mit dem einzigen funktionierendem Zoom MOD.

gruß
« Last Edit: February 18, 2011, 05:36:51 PM by Rembrandt »

Offline Benny Change

  • Addicted member
  • ******
  • Posts: 1.788
  • #WWG1WGA
    • View Profile
    • Qlobal-Change
Re: [Mod] Zoom MOD
« Reply #1 on: February 08, 2011, 07:13:29 PM »
media/jpg.html
suche
Code: [Select]
<img src="{media_src}" border="1" alt="{image_name}"{width_height} /><br />ersetzen mit
Code: [Select]
<img  id="caribbean" onload="loupe.add(this,{visible:true,crosshair:true,xview:773,yview:364});" style="cursor: default; -moz-user-select: none;" src="{media_src}" border="1" alt="{image_name}"{width_height} /><br />
Ist aber nicht getestet!

Beste Grüße
Benny

Offline kubiczek

  • Full Member
  • ***
  • Posts: 212
    • View Profile
    • Gross Peterwitz
Re: [Mod] Zoom MOD
« Reply #2 on: February 09, 2011, 09:57:32 AM »
Hallo Benny

es geht nicht

ich habe die pfade in der loupe.js angepasst
 "./js/loupe" 

/**
 * loupe.js 2.01 (21-Oct-2010) (c) by Christian Effenberger 
 * All Rights Reserved. Source: loupe.netzgesta.de
 * Distributed under Netzgestade Software License Agreement.
 * This license permits free of charge use on non-commercial 
 * and private web sites only under special conditions. 
 * Read more at... http://www.netzgesta.de/cvi/LICENSE.txt
 *
 * syntax: 
 **/

var loupe = {version 2.01released '2010-10-21 12:07:00'_snull,
	
defaultVisible falsedefaultResopath "./js/loupe"defaultCrosshair falsedefaultOpacity 25defaultRadius 100defaultColor '#0000ff'defaultXview 0defaultYview 0defaultXoff 8defaultYoff 6defaultName null
	
gif "data:image/gif;base64,R0lGODlhAQABAJH/AP///wAAAP///wAAACH/C0FET0JFOklSMS4wAt7tACH5BAEAAAIALAAAAAABAAEAAAICVAEAOw==",
	
	
	
	

	
add : function(imageoptions) {
	
	
function 
uniqueID() {var v=Date.parse(new Date())+Math.floor(Math.random()*100000000000); return v.toString(16);}
	
	
function 
getArg(a,t) {return (typeof options[a.toLowerCase()]===t?options[a.toLowerCase()]:loupe["default"+a]);};
	
	
function 
getNum(a,n,m) {return Math.max(n,Math.min(m,(typeof options[a.toLowerCase()]==='number'?options[a.toLowerCase()]:loupe["default"+a])));};
	
	
var 
defopts={"visible":loupe.defaultVisible,"crosshair":loupe.defaultCrosshair,"resopath":loupe.defaultResopath,"opacity":loupe.defaultOpacity,"radius":loupe.defaultRadius,"color":loupe.defaultColor,"xview":loupe.defaultXview,"yview":loupe.defaultYview,"xoff":loupe.defaultXoff,"yoff":loupe.defaultYoff,"name":loupe.defaultName};
	
	
if(
options) {for(i in defopts) {if(!options[i]) {options[i]=defopts[i];}}}else {options=defopts;} 
	
	
var 
img,ctx,tmp,id,name,canvas,object=image.parentNode,vml=document.all&&!window.opera&&(!document.documentMode||document.documentMode<9)?1:0,chakra=document.all&&!window.opera&&document.documentMode&&document.documentMode>=9?1:0,nop=document.all&&!window.opera&&document.documentMode&&document.documentMode===8?1:0,w3c=vml?false:loupe.E('canvas').getContext("2d")?1:0;
	
	
name=getArg('Name','string');image.id=(image.id!='undefined'?image.id:uniqueID());id=(name==''||name==null||loupe.G(name)?image.id:name);
	
	
if(!
loupe.G(name==''||name==null?id+"_Loupe":name)) {if(vml) {canvas=loupe.E("div");}else if(w3c) {canvas=loupe.E("canvas");}
	
	
	
if(
canvas) {canvas.id=(name==''||name==null?id+"_Loupe":name); canvas.vml=vmlcanvas.w3c=w3ccanvas.path=getArg('Resopath','string')||''
	
	
	
	
canvas.visible=getArg('Visible','boolean'); canvas.crosshair=getArg('Crosshair','boolean'); canvas.color=loupe.C(getArg('Color','string'))||'#0000ff';
	
	
	
	
canvas.radius=parseInt(getNum('Radius',1,100),10)||100canvas.opacity=parseInt(getNum('Opacity',1,100),10)||25
	
	
	
	
var 
xfac=0,yfac=0,x=0,y=0,xoff=0,yoff=0,xpos=0,ypos=0,halfw=0,halfh=0xoff=parseInt(getNum('Xoff',0,image.width),10); yoff=parseInt(getNum('Yoff',0,image.height),10);
	
	
	
	
if(
image.naturalWidth&&image.naturalHeight) {xfac=(image.naturalWidth/image.width); yfac=(image.naturalHeight/image.height); canvas.cWidth=image.naturalWidthcanvas.cHeight=image.naturalHeight;}
	
	
	
	
else {
tmp=new Image(); tmp.src=image.srcxfac=(tmp.width/image.width); yfac=(tmp.height/image.height); canvas.cWidth=tmp.widthcanvas.cHeight=tmp.heightdelete tmp;}
	
	
	
	
xpos=parseInt(getNum('Xview',0,canvas.cWidth),10); ypos=parseInt(getNum('Yview',0,canvas.cHeight),10); canvas.xMulti=xfaccanvas.yMulti=yfac;
	
	
	
	
canvas.loupe=new Image(); canvas.loupe.onload=function() {
	
	
	

	
	
	
	
	
if(
canvas.loupe.width&&canvas.loupe.height&&canvas.loupe.width>0&&canvas.loupe.height>0) {canvas.width=canvas.loupe.widthcanvas.height=canvas.loupe.heightcanvas.left=0canvas.top=0;
	
	
	
	
	
	
canvas.lense=new Image(); canvas.lense.onload=function() {
	
	

	
	
	
	
	
	
	
if(
canvas.lense.width&&canvas.lense.height&&canvas.lense.width>0&&canvas.lense.height>0) {halfw=(canvas.lense.width/2); halfh=(canvas.lense.height/2);
	
	
	
	
	
	
	
	
canvas.icon=new Image(); canvas.icon.onload=function() {
	

	
	
	
	
	
	
	
	
	
if(
canvas.icon.width&&canvas.icon.height&&canvas.icon.width>0&&canvas.icon.height>0) {
	
	
	
	
	
	
	
	
	
	
if(
image.width>=canvas.lense.width&&image.height>=canvas.lense.height) {
	
	
	
	
	
	
	
	
	
	
	
if(!
loupe.G(id+"_Switch")) {if(xpos>0||ypos>0) {
	
	
	
	
	
	
	
	
	
	
	
	
x=Math.round(xpos>0?Math.max(1,Math.min(xpos,canvas.cWidth)):1); y=Math.round(ypos>0?Math.max(1,Math.min(ypos,canvas.cHeight)):1); 
	
	
	
	
	
	
	
	
	
	
	
	
canvas.xPos=((canvas.width/2)-halfw-xoff)+(x/xfac); canvas.yPos=((canvas.height/2)-halfh-yoff)+(y/yfac);}else{canvas.xPos=canvas.width/2canvas.yPos=canvas.height/2;}
	
	
	
	
	
	
	
	
	
	
	
	
image.style.cursor='default'image.style.cursor='default'image.style.MozUserSelect="none"image.style.KhtmlUserSelect="none"
	
	
	
	
	
	
	
	
	
	
	
	
image.style.MozUserDrag="none"image.style.KhtmlUserDrag="none"image.unselectable="on"object.style.position='relative';
	
	
	
	
	
	
	
	
	
	
	
	
object.style.MozUserSelect="none"object.style.KhtmlUserSelect="none"object.unselectable="on"; if(w3c) {tmp=loupe.E("canvas");}else if(vml) {tmp=loupe.E("div");}
	

	
	
	
	
	
	
	
	
	
	
	
	
tmp.id=id+"_Switch"tmp.height=canvas.icon.heighttmp.width=canvas.icon.widthtmp.left=0tmp.top=0tmp.title="switch Loupe on/off"
	
	
	
	
	
	
	
	
	
	
	
	
tmp.style.position='absolute'tmp.style.height=tmp.height+'px'tmp.style.width=tmp.width+'px'tmp.style.left=(image.width-tmp.width)+'px'
	
	
	
	
	
	
	
	
	
	
	
	
tmp.style.top=(image.height-tmp.height)+'px'tmp.style.cursor='pointer'tmp.style.zIndex=9990tmp.style.WebkitTouchCallout="none";
	
	
	
	
	
	
	
	
	
	
	
	
tmp.style.WebkitTapHighlightColor="rgba(0,0,0,0)"; if(chakra) {tmp.style.background="url("+loupe.gif+") transparent";}
	
	
	
	
	
	
	
	
	
	
	
	
canvas.style.cursor='move'canvas.style.MozUserSelect="none"canvas.style.KhtmlUserSelect="none"canvas.style.MozUserDrag="none"
	
	
	
	
	
	
	
	
	
	
	
	
canvas.style.KhtmlUserDrag="none"canvas.unselectable="on"loupe.A(object,tmp);
	
	
	
	
	
	
	
	
	
	
	
	
if(
w3c) {ctx=tmp.getContext("2d"); ctx.clearRect(0,0,tmp.width,tmp.height); ctx.drawImage(canvas.icon,0,0,tmp.width,tmp.height);}else 
	
	
	
	
	
	
	
	
	
	
	
	
if(
vml) {tmp.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+canvas.path+"icon.png')";}
	
	
	
	
	
	
	
	
	
	
	
	
tmp.onclick=function() {loupe.toggle(canvas.id);};
	
	
	
	
	
	
	
	
	
	
	
canvas.name=idcanvas.iName=image.idcanvas.iWidth=image.widthcanvas.iHeight=image.heightcanvas.halfh=halfhcanvas.halfw=halfw;
	
	
	
	
	
	
	
	
	
	
	
canvas.xOff=xoffcanvas.yOff=yoffcanvas.xMin=-(halfw+xoff)+(halfw/xfac); canvas.yMin=-(halfh+yoff)+(halfh/yfac); 
	
	
	
	
	
	
	
	
	
	
	
canvas.xMax=image.width-(halfw+xoff)-(halfw/xfac); canvas.yMax=image.height-(halfh+yoff)-(halfh/yfac); canvas.style.width=canvas.width+'px';
	
	
	
	
	
	
	
	
	
	
	
canvas.style.height=canvas.height+'px'canvas.style.left=0+'px'canvas.style.top=0+'px'canvas.style.position='absolute';
	
	
	
	
	
	
	
	
	
	
	
if(
nop) {canvas.style.visibility="visible";}else{canvas.style.visibility=(canvas.visible?"visible":"hidden");}
	
	
	
	
	
	
	
	
	
	
	
if(
w3c) {canvas.style.opacity=(canvas.visible?1:0);} canvas.style.cursor='move'canvas.style.MozUserSelect="none";
	
	
	
	
	
	
	
	
	
	
	
canvas.style.KhtmlUserSelect="none"canvas.unselectable="on"; if(chakra) {canvas.style.background="url("+loupe.gif+") transparent";}
	
	
	
	
	
	
	
	
	
	
	
canvas.onclick=function() {return false;}; canvas.ondblclick=function() {return false;}; canvas.onmousedown=loupe._begin;
	
	
	
	
	
	
	
	
	
	
	
if(
typeof(document.ontouchstart)!="undefined"){canvas.hastouchgesture=truecanvas.ontouchstart=loupe._begin;}
	
	
	
	
	
	
	
	
	
	
	
if(
w3c) {canvas.style.zIndex=9999ctx=canvas.getContext("2d"); loupe.A(object,canvas);
	
	
	
	
	
	
	
	
	
	
	
	
ctx.clearRect(0,0,canvas.width,canvas.height); ctx.drawImage(canvas.loupe,0,0,canvas.width,canvas.height);
	
	
	
	
	
	
	
	
	
	
	
	
if(
canvas.radius==100&&(halfw==halfh)) {ctx.arc(xoff+halfw,yoff+halfh,halfw,0,Math.PI*2false);}else{
	
	
	
	
	
	
	
	
	
	
	
	
	
ctx.beginPath(); tmp=parseFloat((Math.min(canvas.lense.width,canvas.lense.height)/200)*canvas.radius);
	
	
	
	
	
	
	
	
	
	
	
	
	
ctx.arc(xoff+tmp,yoff+tmp,tmp,Math.PI,Math.PI*(3/2),false);
	
	
	
	
	
	
	
	
	
	
	
	
	
ctx.arc(xoff+canvas.lense.width-tmp,yoff+tmp,tmp,Math.PI*(3/2),0,false);
	
	
	
	
	
	
	
	
	
	
	
	
	
ctx.arc(xoff+canvas.lense.width-tmp,yoff+canvas.lense.height-tmp,tmp,0,Math.PI*(1/2),false);
	
	
	
	
	
	
	
	
	
	
	
	
	
ctx.arc(xoff+tmp,yoff+canvas.lense.height-tmp,tmp,Math.PI*(1/2),Math.PI,false); ctx.closePath();
	
	
	
	
	
	
	
	
	
	
	

	
	
	
	
	
	
	
	
	
	
	
	
ctx.clip(); ctx.clearRect(0,0,canvas.width,canvas.height);
	
	
	
	
	
	
	
	
	
	
	
	
ctx.drawImage(canvas.lense,canvas.xOff,canvas.yOff,canvas.lense.width,canvas.lense.height);
	
	
	
	
	
	
	
	
	
	
	
}else if(
vml) {canvas.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+canvas.path+"loupe.png',sizingMethod='scale')"
	
	
	
	
	
	
	
	
	
	
	
	
canvas.style.zIndex=9997loupe.A(object,canvas); 
	
	
	
	
	
	
	
	
	
	
	
	
if(
typeof document.namespaces==="object") {
	
	
	
	
	
	
	
	
	
	
	
	
	
var 
e=["shape","shapetype","group","background","path","formulas","handles","fill","stroke","shadow","textbox","textpath","imagedata","line","polyline","curve","roundrect","oval","rect","arc","image"],s=document.createStyleSheet(); 
	
	
	
	
	
	
	
	
	
	
	
	
	
for(var 
i=0i<e.lengthi++) {s.addRule("v\\:"+e[i],"behavior: url(#default#VML);");} document.namespaces.add("v","urn:schemas-microsoft-com:vml");
	
	
	
	
	
	
	
	
	
	
	
	
	
if(!
loupe.G(id+"_Grab")) {
	
	
	
	
	
	
	
	
	
	
	
	
	
	
if(
canvas.radius==100&&(halfw==halfh)) {vml=loupe.E('v:oval');}else {vml=loupe.E('v:roundrect'); vml.setAttribute('arcsize',(canvas.radius*0.5)+'%');}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
vml.id=id+"_Grab"vml.setAttribute('filled','true'); vml.setAttribute('fillcolor','#ffffff'); vml.setAttribute('stroked','false');
	
	
	
	
	
	
	
	
	
	
	
	
	
	
vml.setAttribute('strokeweight','0'); vml.style.position='absolute'vml.style.left=xoff-1vml.style.top=yoff-1vml.style.zoom=1;
	
	
	
	
	
	
	
	
	
	
	
	
	
	
vml.style.width=canvas.lense.width+1vml.style.height=canvas.lense.height+1vml.style.zIndex=9998tmp=loupe.E('v:fill'); tmp.id=id+"_Pos";
	
	
	
	
	
	
	
	
	
	
	
	
	
	
tmp.setAttribute('alignshape','false'); tmp.setAttribute('position','0,0'); tmp.setAttribute('type','tile'); tmp.setAttribute('src',image.src);
	
	
	
	
	
	
	
	
	
	
	
	
	
	
loupe.A(vml,tmp); loupe.A(canvas,vml); 
	
	
	
	
	
	
	
	
	
	
	
	
	
}  
	
	
	
	
	
	
	
	
	
	
	
	
}else{
	
	
	
	
	
	
	
	
	
	
	
	
	
if(!
loupe.G(id+"_Dummy")) { tmp=loupe.E("div"); tmp.id=id+"_Dummy";
	
	
	
	
	
	
	
	
	
	
	
	
	
	
tmp.width=canvas.widthtmp.height=canvas.heighttmp.left=0tmp.top=0tmp.unselectable="on"tmp.style.position='absolute';
	
	
	
	
	
	
	
	
	
	
	
	
	
	
tmp.style.width=canvas.width+'px'tmp.style.height=canvas.height+'px'tmp.style.left=0+'px'tmp.style.top=0+'px'tmp.style.zIndex=9998;
	
	
	
	
	
	
	
	
	
	
	
	
	
	
loupe.A(canvas,tmp);
	
	
	
	
	
	
	
	
	
	
	
	
	
	
var 
head,foot;
	
	
	
	
	
	
	
	
	
	
	
	
	
	
if(
canvas.radius==100&&(halfw==halfh)) {head='<v:shape 'foot='</v:shape>';}else{head='<v:roundrect id="'+id+'_Grab" arcsize="'+(canvas.radius*0.5)+'%" 'foot='</v:roundrect>';}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
tmp.innerHTML=head+' strokeweight="0" filled="t" stroked="f" fillcolor="#ffffff" style="zoom:1;margin:0;padding:0;position:absolute;top:'+(yoff-1)+'px;left:'+(xoff-1)+'px;width:'+(canvas.lense.width+1)+'px;height:'+(canvas.lense.height+1)+'px;"><v:fill position="0,0" id="'+id+'_Pos" src="'+image.src+'" alignshape="false" type="tile" />'+foot;
	
	
	
	
	
	
	
	
	
	
	
	
	
}
	
	
	
	
	
	
	
	
	
	
	
	
}
	
	
	
	
	
	
	
	
	
	
	
	
if(!
loupe.G(id+"_Lens")) { tmp=loupe.E("div"); tmp.id=id+"_Lens";
	
	
	
	
	
	
	
	
	
	
	
	
	
tmp.width=canvas.lense.widthtmp.height=canvas.lense.heighttmp.left=xofftmp.top=yofftmp.unselectable="on"tmp.style.position='absolute';
	
	
	
	
	
	
	
	
	
	
	
	
	
tmp.style.width=canvas.lense.width+'px'tmp.style.height=canvas.lense.height+'px'tmp.style.left=xoff+'px'tmp.style.top=yoff+'px'tmp.style.zIndex=9999;
	
	
	
	
	
	
	
	
	
	
	
	
	
tmp.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+canvas.path+"lense.png',sizingMethod='scale')"loupe.A(canvas,tmp);
	
	
	
	
	
	
	
	
	
	
	
	
}
	
	
	
	
	
	
	
	
	
	
	
} if(
nop) {canvas.style.visibility=canvas.visible?"visible":"hidden";} loupe._s=canvasloupe._position();
	
	
	
	
	
	
	
	
	
	
}}
	
	
	
	
	
	
	
	
}; 
canvas.icon.src=canvas.path+'icon.png';}
	
	
	
	
	
	
}; 
canvas.lense.src=canvas.path+'lense.png';}
	
	
	
	
}; 
canvas.loupe.src=canvas.path+'loupe.png';}
	
	
}return 
false;
	
},
	
remove : function(self) {
	
	
if(
self) {var ele=loupe.G(self.id+"_Switch");
	
	
	
if(
ele) {
	

	
	
	
	
if(
self.inDrag&&self.w3c) {document.removeEventListener("mousemove",loupe._move,false); document.removeEventListener("mouseup",loupe._end,false);}else 
	
	
	
	
if(
self.inDrag&&self.vml) {document.detachEvent("onmousemove",loupe._move); document.detachEvent("onmouseup",loupe._end);}
	
	
	
	
self.parentNode.removeChild(ele); self.parentNode.removeChild(self);
	
	
	
}
	
	
}return 
false;
	
},
	
toggle : function(id) {var self=loupe.G(id);
	
	
if(
self) {
	
	
	
if(
self.w3c) {
	
	
	
	
if(
self.style.visibility=="visible") {if(self.timer) {window.clearInterval(self.timer);} 
	
	
	
	
	
var 
o=0,c=0,p=10,s=100/pself.style.opacity=1;
	

	
	
	
	
	
self.timer=window.setInterval(function(){o=100-(p*c); self.style.opacity=o*0.01c++; 
	
	
	
	
	
if(
c>s) {window.clearInterval(self.timer); self.style.opacity=0self.style.visibility="hidden"}}, 30);
	
	
	
	
}else if(
self.style.visibility=="hidden") {if(self.timer) {window.clearInterval(self.timer);}
	
	
	
	
	
var 
o=0,c=0,p=10,s=100/pself.style.opacity=0self.style.visibility="visible"
	
	
	
	
	
self.timer=window.setInterval(function(){o=p*cself.style.opacity=o*0.01;c++; 
	
	
	
	
	
if(
c>s) {window.clearInterval(self.timer); self.style.opacity=1;}},30);
	
	
	
	
}
	
	
	
}else {
self.style.visibility=self.style.visibility!="visible"?"visible":"hidden";}
	
	
}return 
false;
	
},
	
_position : function() {var self=loupe._s;
	
	
if(
self) {var left,top,xf,yf,xSrc,ySrc,fill,style,image=loupe.G(self.iName);
	
	
	
if(
image) {
	
	
	
	
if(
self.w3c) {
	
	
	
	
	
var 
ctx=self.getContext("2d"),lensew=(self.halfw*2),lenseh=(self.halfh*2);
	
	
	
	
	
left=Math.max(self.xMin,Math.min(self.xMax,Math.round(self.xPos-self.width/2)));
	
	
	
	
	
top=Math.max(self.yMin,Math.min(self.yMax,Math.round(self.yPos-self.height/2)));
	
	
	
	
	
xSrc=Math.round(Math.min((left-self.xMin)*self.xMulti,self.cWidth-lensew));
	
	
	
	
	
ySrc=Math.round(Math.min((top-self.yMin)*self.yMulti,self.cHeight-lenseh));
	
	
	
	
	
self.style.left=left+"px"self.style.top=top+"px";
	
	
	
	
	
ctx.drawImage(image,xSrc,ySrc,self.lense.width,self.lense.height,self.xOff,self.yOff,self.lense.width,self.lense.height);
	
	
	
	
	
if(
self.crosshair) {var style='rgba('+loupe.R(self.color)+','+(self.opacity/100)+')';
	
	
	
	
	
	
ctx.strokeStyle=stylectx.lineWidth=1;
	
	
	
	
	
	
ctx.beginPath(); ctx.moveTo(parseInt(self.xOff+self.halfw,10)+.5,self.yOff);
	
	
	
	
	
	
ctx.lineTo(parseInt(self.xOff+self.halfw,10)+.5,self.yOff+parseInt(lenseh,10)); ctx.closePath(); ctx.stroke();
	
	
	
	
	
	
ctx.beginPath(); ctx.moveTo(self.xOff,self.yOff+self.halfh);
	
	
	
	
	
	
ctx.lineTo(self.xOff+lensew,self.yOff+self.halfh); ctx.closePath(); ctx.stroke();
	
	
	
	
	
}
ctx.drawImage(self.lense,self.xOff,self.yOff,self.lense.width,self.lense.height);
	
	
	
	
}else {
fill=document.getElementById(self.name+"_Pos");
	
	
	
	
	
if(
fill) {
	
	
	

	
	
	
	
	
	
left=Math.max(self.xMin,Math.min(self.xMax,Math.round(self.xPos-self.width/2)));
	
	
	
	
	
	
top=Math.max(self.yMin,Math.min(self.yMax,Math.round(self.yPos-self.height/2)));
	
	
	
	
	
	
xSrc=Math.round(Math.min((left-self.xMin)*self.xMulti,self.cWidth-(self.halfw*2)));
	
	
	
	
	
	
ySrc=Math.round(Math.min((top-self.yMin)*self.yMulti,self.cHeight-(self.halfh*2)));
	
	
	
	
	
	
xf=-(xSrc/((self.halfw*2)+1)); yf=-(ySrc/((self.halfh*2)+1));
	
	
	
	
	
	
if(
document.documentMode&&document.documentMode===8) {fill.position=xf+','+yf;}else {fill.setAttribute('position',xf+','+yf);}
	
	
	
	
	
	
self.style.left=left+"px"self.style.top=top+"px";
	
	
	
	
	
}
	
	
	
	
}
	
	
	
}
	
	
}
	
	
return 
false;
	
},
	
_begin: function(e) {e=e?e:window.evente.cancelBubble=true;
	
	
if(
e.stopPropagation) {e.stopPropagation();} var self=loupe._s=this;
	
	
if(
self&&!self.inDrag) {self.inDrag=true;
	
	
	
if(
self.hastouchgesture&&e.touches.length==1) {e.preventDefault(); e=e.touches[0];}
	
	
	
if(
e.pageX) {self.startX=e.pageXself.startY=e.pageY;}else 
	
	
	
if(
e.clientX) {self.startX=e.clientXself.startY=e.clientY;}
	
	
	
if(
self.w3c) {
	
	
	
	
document.addEventListener("mousemove",loupe._move,false);
	
	
	
	
document.addEventListener("mouseup",loupe._end,false);
	
	
	
	
self.ontouchmove=loupe._moveself.ontouchend=loupe._end;
	
	
	
}else if(
self.vml) {
	
	
	
	
document.attachEvent("onmousemove",loupe._move);
	
	
	
	
document.attachEvent("onmouseup",loupe._end);
	
	
	
}
	
	
}return 
false;
	
},
	
_move: function(e) {e=e?e:window.event; var eX=0,eY=0,self=loupe._s;
	
	
if(
self&&self.inDrag) {
	
	
	
if(
self.hastouchgesture&&e.touches.length==1) {e.preventDefault(); e=e.touches[0];}
	
	
	
if(
e.pageX) {eX=e.pageXeY=e.pageY;}else if(e.clientX) {eX=e.clientXeY=e.clientY;}
	
	
	
self.xPos+=eX-self.startXself.yPos+=eY-self.startY;
	
	
	
self.startX=eXself.startY=eYloupe._position();
	
	
}return 
false;
	
},
	
_end: function() {var self=loupe._s;
	
	
if(
self) {
	
	
	

	
	
	
if(
self.w3c) {
	
	
	
	
document.removeEventListener("mousemove",loupe._move,false);
	
	
	
	
document.removeEventListener("mouseup",loupe._end,false);
	
	
	
	
self.ontouchmove=nullself.ontouchend=null;
	
	
	
}else if(
self.vml) {
	
	
	
	
document.detachEvent("onmousemove",loupe._move);
	
	
	
	
document.detachEvent("onmouseup",loupe._end);
	
	
	
}
self.inDrag=falseloupe._s=null;
	
	
}return 
false;
	
},
	
_init: function() {
	
	
if(
typeof document.namespaces==="object"&&typeof document.namespaces["v"]!=="object") {
	
	
	
var 
e=["shape","shapetype","group","background","path","formulas","handles","fill","stroke","shadow","textbox","textpath","imagedata","line","polyline","curve","roundrect","oval","rect","arc","image"],s=document.createStyleSheet(); 
	
	
	
for(var 
i=0i<e.lengthi++) {s.addRule("v\\:"+e[i],"behavior: url(#default#VML);");} document.namespaces.add("v","urn:schemas-microsoft-com:vml");
	
	
}return 
false;
	
},
	
: function(v) {if(v.toLowerCase().match(/^#[0-9a-f]{6}$/i)){return v;}else if(v.toLowerCase().match(/^#[0-9a-f]{3}$/i)){return '#'+v.substr(1,1)+v.substr(1,1)+v.substr(2,1)+v.substr(2,1)+v.substr(3,1)+v.substr(3,1);}else{return '#000000';}},
	
: function(v) {function h2d(h){return(Math.max(0,Math.min(parseInt(h,16),254)));};return h2d(v.substr(1,2))+','+h2d(v.substr(3,2))+','+h2d(v.substr(5,2));}, 
	
: function(v) {return(document.getElementById(v));}, : function(v) {return(document.createElement(v));}, : function(o,v) {o.appendChild(v); return false;}
}; if(
window.attachEvent) {window.attachEvent("onload",loupe._init);}


auch habe ich das BEISPIEL heruntergebrochen auf das nötigste
so funktioniert es wenn ich es als caribiean.html abspeichere.
    

	
<!
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">
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<
title>Unbenanntes Dokument</title>
</
head>


   
    
<
script src="loupe.js" type="text/javascript"></script>
</
head>

<
div style="float: left; width:356px; height:205px; background:url(images/caribbean/small.jpg) no-repeat; border:1px solid gray; margin-right: 1em; margin-bottom: 0.25em;">


<
img id="caribbean" onload="loupe.add(this,{visible:true,crosshair:true,xview:773,yview:364});" src="images/caribbean/big.jpg" style="cursor:wait;" width="356" height="205" alt="large image" border="0" />
</
div></div>


<
body>
</
body>
</
html>

    




kannst du da mal drüberschauen?

gruß

Offline Benny Change

  • Addicted member
  • ******
  • Posts: 1.788
  • #WWG1WGA
    • View Profile
    • Qlobal-Change
Re: [Mod] Zoom MOD
« Reply #3 on: February 09, 2011, 10:46:13 AM »
Dann versuch es mal zum Test so
media/jpg.html
suche
Code: [Select]
<img src="{media_src}" border="1" alt="{image_name}"{width_height} /><br />ersetzen mit
Code: [Select]
<div align="center" style="width:150px; height:150px; background:url({media_src}) no-repeat; border:1px solid gray; margin-right: 1em; margin-bottom: 0.25em;">
<img  id="caribbean" onload="loupe.add(this,{visible:true,crosshair:true,xview:773,yview:364});" style="cursor: default; -moz-user-select: none;" src="{media_src}" border="1" alt="{image_name}"{width_height} /><br />
</div>

Ist aber nicht getestet!
Beste Grüße
Benny

Offline kubiczek

  • Full Member
  • ***
  • Posts: 212
    • View Profile
    • Gross Peterwitz
Re: [Mod] Zoom MOD
« Reply #4 on: February 09, 2011, 11:49:19 AM »
So

ich habe mal den border auf 10px  hochgestelt  sehe DEMO http://www.grosspeterwitz.org/4images/details.php?image_id=1


<div align="center" style="width:150px; height:150px; background:url({media_src}) no-repeat; border:10px solid gray; margin-right: 1em; margin-bottom: 0.25em;">
<
img  id="caribbean" onload="loupe.add(this,{visible:true,crosshair:true,xview:773,yview:364});" style="cursor: default; -moz-user-select: none;" src="{media_src}" border="1" alt="{image_name}"{width_height} /><br />
</
div>



es ist zu erkennen das ein kleines bild unter dem grossem ist.


ich glaube mann muss noch was in der details.php hineinschreiben damit die lupe angezeigt wird?



habe mein post geändert.


es geht jetzt  im FF Chrome  Safari 

http://www.grosspeterwitz.org/4images/details.php?image_id=1


 habe den pfad in der loupe.js  angepasst

"./js/loupe/"


wie leite ich jetzt die anweisung auf den BIG ordner  um

lt; -moz-user-selectnone;" src="{media_src}" border="1" alt="{image_name}"{width_height} /><br />
</div>


 src="big/{media_src}"    funktioniert nicht

habe auch schon sämtliche Posts zum thema BIG ORDNER durchsucht.



« Last Edit: February 09, 2011, 02:02:03 PM by kubiczek »

Rembrandt

  • Guest
Re: [Mod] Zoom MOD
« Reply #5 on: February 09, 2011, 02:01:26 PM »
so.. ich denke ich habe dich lange genug schwitzen lassen..   :mrgreen:

1.) also in root/js/loupe kopierst du die "loupe.js" und diesen "image" ordner aus den downloadpaket.

2.) deine template/media/jpg.html ersetzt du mit den folgend inhalt:
Code: [Select]
<!-- Template file for JPG Files -->
{ifnot big}
<img src="{media_src}" border="1" alt="{image_name}"{width_height} /><br >
{endifnot big}
{if big}
<script type="text/javascript">
window.onload = function () {
    loupe.add(document.getElementById('{image_name}'));
};
</script>
<div style="width:{width}px;height:{height}px; background:url(./data/media/{cat_id}/{image_file_name}) no-repeat;">
<img id="{image_name}"  src="./data/media/{cat_id}/big/{image_file_name}" style="width:{width}px;height:{height}px;"  alt="{image_name}" border="0" />
</div>
{endif big}

3.) in der templates/header.html suche:
Code: [Select]
{if has_rss}und füge darüber ein:
Code: [Select]
<script type="text/javascript" src="./js/loupe/loupe.js"></script>
<script language="javascript" type="text/javascript">
loupe.defaultResopath  = 'js/loupe/images/loupe/';
loupe.defaultVisible   = false; //BOOLEAN visiblity on startup
loupe.defaultRadius    = 100; //INT/FLOAT 0-100 lense radius (%) of loupe min(height/width)
loupe.defaultXpos      = 8; //INT/FLOAT 0-n (px) horizontal offset of the lense
loupe.defaultYpos      = 6; //INT/FLOAT 0-n (px) vertical offset of the lense
loupe.defaultXview     = 0; //INT/FLOAT 0-n (px) horizontal start position
loupe.defaultYview     = 0; //INT/FLOAT 0-n (px) vertical start position
loupe.defaultCrosshair = true; //BOOLEAN show crosshair
loupe.defaultOpacity   = 25; //INT/FLOAT 0-100 (%) crosshair opacity
loupe.defaultColor     = '#0000ff'; //STRING crosshair color
loupe.defaultName      = ''; //STRING (canvas name|id)</script>

4.) damit keine fehler aufscheinen wenn kein "big" blid vorhanden ist, suche in der includes/functions.php:
"width_height" => $width_height,
füge darunter ein:
"big" => (file_exists(MEDIA_PATH.(($cat_id != 0) ? "/".$cat_id "")."/"."big"."/".$media_file_name)) ? 1:"",

deine großen bilder sollen eh im order "big" liegen, wenn nicht mußt du den pfad anpassen.
deine änderung n der loupe.js mache wieder rückgängig.

mfg Andi
« Last Edit: December 25, 2011, 04:33:27 PM by Rembrandt »

Offline kubiczek

  • Full Member
  • ***
  • Posts: 212
    • View Profile
    • Gross Peterwitz
Re: [Mod] Zoom MOD
« Reply #6 on: February 09, 2011, 03:39:19 PM »

Rembrandt

  • Guest
Re: [Mod] Zoom MOD
« Reply #7 on: February 09, 2011, 04:24:13 PM »
wenn ich in deinen quellcode sehe hast du "big" nicht in der jpg.html drinnen stehn:
Code: [Select]
<div style=" width:480px;height:600px; background:url(./data/media/1/Bild056.jpg) no-repeat; border:1px solid gray; margin-right: 1em; margin-bottom: 0.25em;">
<img id="ohne leerzeichen"  src="./data/media/1/Bild056.jpg" style="cursor:wait;width:480px;height:600px;"  alt="Bild056.jpg" border="0" />
</div>
desweiteren hast du im header das script 2x drinnen stehn.

Offline kubiczek

  • Full Member
  • ***
  • Posts: 212
    • View Profile
    • Gross Peterwitz
Re: [Mod] Zoom MOD
« Reply #8 on: February 09, 2011, 05:00:35 PM »
 hallo

das ist deine

jpg.html

Code: [Select]
<script type="text/javascript">
window.onload = function () {
    loupe.add(document.getElementById('{image_name}'));
};
</script>
<div style=" background:url(/data/media/{cat_id}/{image_file_name}) no-repeat;">
<img id="{image_name}"  src="/data/media/{cat_id}/big/{image_file_name}" style="cursor:wait;width:{width}px;height:{height}px;"  alt="{image_file_name}" border="0" />
</div>



wenn ich es so mache

<script type="text/javascript"
window.onload = function () { 
    
loupe.add(document.getElementById('{image_name}')); 
};
</
script>
<
div style="position:static; width:{width}px; height:{height}px; border:0px; background: url(./data/media/{cat_id}/{image_file_name})top left no-repeat; text-align:left;">
<
img id="{image_name}"  src="./data/media/{cat_id}/big/{image_file_name}" style="cursor:wait;width:{width}px;height:{height}px;"  alt="{image_file_name}" border="0" />
</
div>




funktioniert meine testumgebung 1.7.9 petfekt im FF IE und Chrome
http://www.grosspeterwitz.org/4images/details.php?image_id=1


habe es eben noch mal kontrliert im header.html ist das script nur ein mal.

Rembrandt

  • Guest
Re: [Mod] Zoom MOD
« Reply #9 on: February 09, 2011, 05:11:54 PM »
ist ja kein unterschied, jetzt stimmt auch der quelltext.

Offline kubiczek

  • Full Member
  • ***
  • Posts: 212
    • View Profile
    • Gross Peterwitz
Re: [Mod] Zoom MOD
« Reply #10 on: February 09, 2011, 05:37:09 PM »
so.. ich denke ich habe dich lange genug schwitzen lassen..   :mrgreen:

also in root/js/loupe kopierst du die "loupe.js" und diesen "image" ordner aus den downloadpaket.
deine template/media/jpg.html ersetzt du mit den folgend inhalt:
Code: [Select]
<script type="text/javascript">
window.onload = function () {
    loupe.add(document.getElementById('{image_name}'));
};
</script>
<div style=" background:url(/data/media/{cat_id}/{image_file_name}) no-repeat;">
<img id="{image_name}"  src="/data/media/{cat_id}/big/{image_file_name}" style="cursor:wait;width:{width}px;height:{height}px;"  alt="{image_file_name}" border="0" />
</div>

in der templates/header.html suche:
Code: [Select]
{if has_rss}und füge darüber ein:
Code: [Select]
<script type="text/javascript" src="./js/loupe/loupe.js"></script>
<script language="javascript" type="text/javascript">
loupe.defaultResopath  = 'js/loupe/images/loupe/';
loupe.defaultVisible   = false; //BOOLEAN visiblity on startup
loupe.defaultRadius    = 100; //INT/FLOAT 0-100 lense radius (%) of loupe min(height/width)
loupe.defaultXpos      = 8; //INT/FLOAT 0-n (px) horizontal offset of the lense
loupe.defaultYpos      = 6; //INT/FLOAT 0-n (px) vertical offset of the lense
loupe.defaultXview     = 0; //INT/FLOAT 0-n (px) horizontal start position
loupe.defaultYview     = 0; //INT/FLOAT 0-n (px) vertical start position
loupe.defaultCrosshair = true; //BOOLEAN show crosshair
loupe.defaultOpacity   = 25; //INT/FLOAT 0-100 (%) crosshair opacity
loupe.defaultColor     = '#0000ff'; //STRING crosshair color
loupe.defaultName      = ''; //STRING (canvas name|id)</script>

deine großen bilder sollen eh im order "big" liegen, wenn nicht mußt du den pfad anpassen.
deine änderung n der loupe.js mache wieder rückgängig.
aussehn würde es dann so demo

mfg Andi



es ist noch was faul, 

wenn ich es nach deiner anweisung einbaue, habe ich weder in der

-Testumgebung 1.7.9 (ganz frisch)

- Galerie(1.7.6)

- Friedhof (1.7.4)

eine anzeige obwohl Big Ordner vorhanden sind.


laut Firefox Datei INFO wird die {cat_id} nicht übertragen.


gruß

Rembrandt

  • Guest
Re: [Mod] Zoom MOD
« Reply #11 on: February 09, 2011, 05:51:43 PM »
so ich habe in meinen ersten post einen schritt hinzugefügt, damit kein fehler auftaucht wenn kein "big" bild vorhanden ist:

http://www.4homepages.de/forum/index.php?topic=29056.msg155686#msg155686

mfg Andi
« Last Edit: February 09, 2011, 07:14:49 PM by Rembrandt »

Offline rsmarty

  • Pre-Newbie
  • Posts: 5
    • View Profile
Re: [Mod] Zoom MOD
« Reply #12 on: February 22, 2011, 03:24:08 PM »
hi  :D

ich finde das mit der lupe super und würde das auch gerne verwenden nur leider verwende ich keinen ordener "big" oder ähnliches. ich verwende stattdessen eine funktion welche das volle bild lädt aber dieses so gross anzeigt wie es der browser maximal anzeigen kann. was irgendwie habe ich das mit dem "big" weglassen wohl falsch gemacht, jedenfalls funktioniert es bei mir nicht.

kleiner tip :D

greez

rsmarty

Offline Lukas

  • Pre-Newbie
  • Posts: 2
    • View Profile
Re: [Mod] Zoom MOD
« Reply #13 on: October 05, 2018, 11:29:08 AM »
Hallo zusammen  8)

habe Version 1.8 und alles wie in :

http://www.4homepages.de/forum/index.php?topic=29056.msg155686#msg155686

..beschrieben geändert !. Aber passieren tut überhaupt nichts.

Da ich Blond bin, frage ich besser nochmal nach LACH  :lol: dieses Mod ist doch dafür - wenn man mit der Maus über ein Vorschaubild fährt - es dieses Vergrößert (oder) :?:

Ach Hilfe...

Offline nobby

  • 4images Guru
  • *******
  • Posts: 2.863
    • View Profile
Re: [Mod] Zoom MOD
« Reply #14 on: October 05, 2018, 05:31:17 PM »
Hallo,

das sollte so sein. Allerdings darfst Du nicht vergessen das dieses Mod 2011 erstellt wurde.

Es ist also schon eine Weile her und seither hat sich nicht mehr viel getan.

Dann hat sich Rembrandt auch hier aus dem Forum veranschiedet.

Also es passiert hier nicht mehr sehr viel  :(

nobby