dbooksta
08-20-2013, 02:56 PM
I'm using Gridiculous (http://gridiculo.us/) for layout, which automatically shrinks images down to fit the grid.
I want the Expando (http://www.dynamicdrive.com/dynamicindex4/expandoimage.htm) image effect, but as written that can't restore an image beyond the confines of its surrounding <div>.
Looking for a script and/or layout method that will allow images to shrink to fit browser size but will grow them to 100% size on mouse-over.
Thanks!
jscheuer1
08-20-2013, 04:30 PM
Try:
http://www.dynamicdrive.com/dynamicindex4/imagemagnify.htm
vwphillips
08-20-2013, 06:36 PM
<!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>
</head>
<body>
<center>
<br /><br /><br /><br /><br /><br />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" class="expand Magnify:2 Animate:500 SRC:http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" class="expand Magnify:1.5 " />
</center>
<script type="text/javascript">
/*<![CDATA[*/
// Image Expand (30-August-2013) DRAFT
// by Vic Phillips - http://www.vicsjavascripts.org.uk/
// SRC default = the image src
// Animate default = 1000
// zIndex default = 101
function zxcImageExpand(cls){
var imgs=document.body.getElementsByTagName('IMG'),c,o,i,z0=0,z0a;
for (;z0<imgs.length;z0++){
c=imgs[z0].className;
if ((' '+c+' ').match(' '+cls+' ')){
o={img:imgs[z0]};
c=c.split(' ');
for (z0a=0;z0a<c.length;z0a++){
i=c[z0a].indexOf(':');
if (i>2){
o[c[z0a].slice(o,i).toLowerCase()]=c[z0a].slice(i+1);
}
}
new zxcImageExpandOOP(o);
}
}
}
function zxcImageExpandOOP(o){
var c=document.createElement('IMG'),ms=o.Animate,m=o.magnify,z=o.zindex;
c.style.position='absolute';
c.style.zIndex=isFinite(z*1)?Math.max(z*1,2):'101';
c.style.left=c.style.top='101px';
c.src=o.src||o.img.src;
o.c=c;
o.ms=isFinite(ms*1)?Math.max(ms*1,20):1000;
o.m=isFinite(m*1)?Math.max(m*1,1.1):2;
o.a=[['left'],['top'],['width'],['height'],[false]];
o.ud=false;
this.addevt(o.img,'mouseover','expand',o,true);
this.addevt(o.c,'mouseout','expand',o,false);
}
zxcImageExpandOOP.prototype={
expand:function(o,ud){
o.ud=ud;
zxcImageExpand.o&&zxcImageExpand.o!=o&&zxcImageExpand.o.ud?this.expand(zxcImageExpand.o,false):null;
var p=this.pos(o.img),iw=o.img.width,ih=o.img.height,cw=iw*o.m,ch=ih*o.m;
document.body.appendChild(o.c);
this.animate(o,o.a[0],ud?p[0]:o.a[0][1],p[0]-(ud?(cw-iw)/2:0),new Date(),o.ms);
this.animate(o,o.a[1],ud?p[1]:o.a[1][1],p[1]-(ud?(ch-ih)/2:0),new Date(),o.ms,!ud);
this.animate(o,o.a[2],ud?iw:o.a[2][1],(ud?cw:iw),new Date(),o.ms);
this.animate(o,o.a[3],ud?ih:o.a[3][1],(ud?ch:ih),new Date(),o.ms);
this.animate(o,o.a[4],ud?0:o.a[4][1],(ud?100:0),new Date(),o.ms);
zxcImageExpand.o=o;
},
animate:function(o,a,f,t,srt,mS,ud){
clearTimeout(a[2]);
var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
if (isFinite(n)){
a[1]=Math.max(f<0||t<0?n:0,n);
a[0]?o.c.style[a[0]]=a[1]+'px':oop.opc(o.c,a[1]);
}
if (ms<mS){
a[2]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,ud); },10);
}
else {
a[1]=t;
a[0]?o.c.style[a[0]]=(ud?-3000:t)+'px':oop.opc(o.c,t);
}
},
opc:function(o,t){
o.style.filter='alpha(opacity='+t+')';
o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=t/100-.001;
},
pos:function(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
},
addevt:function(o,t,f,p,p1){
var oop=this;
o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
}
}
zxcImageExpand('expand');
/*]]>*/
</script>
</body>
</html>
dbooksta
08-20-2013, 08:17 PM
Vic: That's pretty cool! I put it in this JSFiddle (http://jsfiddle.net/DgMAL/).
I'm trying to figure out how it works but can't. If you have time I'd appreciate any code comments you could add.
Powered by vBulletin® Version 4.2.2 Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.