PDA

View Full Version : Expando Images 'on top' is it possible



MarieMarie
11-23-2009, 09:37 AM
1) Script Title: Expando Image Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/expandoimage.htm

3) Describe problem:
Hello,
I find this a very nice effect.
Still it's a bit annoying if you have a table of thumbnails and want to enlarge them, because everything is floating around.

I wonder if there is a possibility to have the enlargement 'on top' of the existing images so that everything remains in place and the enlarged image appears on top of the thumbnail table.

Hope it can be understood what I mean.
Thanks for help

MarieMarie

jscheuer1
11-23-2009, 03:33 PM
You may really want:

http://www.dynamicdrive.com/dynamicindex4/imagemagnify.htm

But Expando has been enhanced, see this thread:

http://www.dynamicdrive.com/forums/showthread.php?p=180793#post180793

Here's the real life result:

http://www.rubescartoons.com/

vwphillips
11-23-2009, 03:49 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>
<script type="text/javascript">
/*<![CDATA[*/
/* Expando Image Script 2008 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/

if (document.images){
(function(){
var cos, a = /Apple/.test(navigator.vendor), times = a? 20 : 40, speed = a? 40 : 20;
var expConIm = function(im){
im = im || window.event;
if (!expConIm.r.test(im.className)){
im = im.target || im.srcElement || null;
}
if (!im || !expConIm.r.test (im.className)){
return;
}
if (!im.clone){
im.clone=im.cloneNode(true);
document.body.appendChild(im.clone);
im.clone.style.position='absolute';
im.clone.style.zIndex='101';

}
im.clone.style.visibility='visible';
im.clone.style.left=zxcPos(im)[0]+im.width+2+'px';
im.clone.style.top=zxcPos(im)[1]+'px';
var e = expConIm,
widthHeight = function(dim){
return dim[0] * cos + dim[1] + 'px';
},

resize = function(){
cos = (1 - Math.cos((e.ims[i].jump / times) * Math.PI)) / 2;
im.clone.style.width = widthHeight (e.ims[i].w);
im.clone.style.height = widthHeight (e.ims[i].h);
if (e.ims[i].d && times > e.ims[i].jump){
++e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
}
else if (!e.ims[i].d && e.ims[i].jump > 0){
--e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
}
else if (times > e.ims[i].jump) {
im.clone.style.visibility='hidden';
}
},
d = document.images, i = d.length - 1;
for (i; i > -1; --i)
if(d[i] == im) break;
i = i + im.src;
if (!e.ims[i]){
im.title = '';
e.ims[i] = {im : new Image(), jump : 0};
e.ims[i].im.onload = function(){
e.ims[i].w = [e.ims[i].im.width - im.width, im.width];
e.ims[i].h = [e.ims[i].im.height - im.height, im.height];
e (im);
};
e.ims[i].im.src = im.src;
return;
}
if (e.ims[i].timer) clearTimeout(e.ims[i].timer);
e.ims[i].d = !e.ims[i].d;
resize ();
};

expConIm.ims = {};

expConIm.r = new RegExp('\\bexpando\\b');

if (document.addEventListener){
document.addEventListener('mouseover', expConIm, false);
document.addEventListener('mouseout', expConIm, false);
}
else if (document.attachEvent){
document.attachEvent('onmouseover', expConIm);
document.attachEvent('onmouseout', expConIm);
}
})();
}


function zxcPos(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
}



/*]]>*/
</script></head>

<body>

</body>
<img class="expando" src="http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg" width="88" height="66" />width="351" height="263"

</html>

vwphillips
11-23-2009, 05:25 PM
or


<!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>
<script type="text/javascript">
// Animate (10-November-2009)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
// With the ability to scale the effect time on specified minimum/maximum values
// and with three types of progression 'sin' and 'cos' and liner.

// **** Application Notes

// **** The HTML Code
//
// when moving an element the inline or class rule style position of the element should be assigned as
// 'position:relative;' or 'position:absolute;'
//
// The element would normally be assigned a unique ID name.
//

// **** Initialising the Script.
//
// The script is initialised by assigning an instance of the script to a variable.
// e.g A = new zxcAnimate('left','id1')
// where:
// A = a global variable (variable)
// parameter 0 = the mode(see Note 1). (string)
// parameter 1 = the unique ID name or element object. (string or element object)
// parameter 1 = the initial value. (digits, default = 0)

// **** Executing the Effect
//
// The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);'
// where:
// A = the global referencing the script instance. (variable)
// parameter 0 = the start value. (digits, for opacity minimum 0, maximum 100)
// parameter 1 = the finish value. (digits, for opacity minimum 0, maximum 100)
// parameter 2 = period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds)
// parameter 3 = (optional) to scale the effect time on a specified minimum/maximum. (array, see Note 3)
// field 0 the minimum value. (digits)
// field 1 the maximum value. (digits)
// parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'. (string, default = 'liner')
// 'sin' progression starts fast and ends slow.
// 'cos' progression starts slow and ends fast.
//
// Note 1: Examples modes: 'left', 'top', 'width', 'height', 'opacity.
// Note 2: The default units(excepting opacity) are 'px'.
// For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
// Note 3: The scale is of particular use when re-calling the effect
// in mid progression to retain an constant rate of progression.
// Note 4: The current effect value is recorded in A.data[0].
// Note 5: A function may be called on completion of the effect by assigning the function
// to the animator intance property .Complete.
// e.g. [instance].Complete=function(){ alert(this.data[0]); };
//



// **** Functional Code(1.58K) - NO NEED to Change

function zxcAnimate(mde,obj,srt){
this.to=null;
this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
this.mde=mde.replace(/\W/g,'');
this.data=[srt||0];
return this;
}

zxcAnimate.prototype.animate=function(srt,fin,ms,scale,c){
clearTimeout(this.to);
this.time=ms||this.time||0;
this.data=[srt,srt,fin];
this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
this.inc=Math.PI/(2*this.mS);
this.srttime=new Date().getTime();
this.cng();
}

zxcAnimate.prototype.cng=function(){
var oop=this,ms=new Date().getTime()-this.srttime;
this.data[0]=(this.c=='s')?Math.floor((this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]):(this.c=='c')?(this.data[2])-Math.floor((this.data[2]-this.data[1])*Math.cos(this.inc*ms)):(this.data[2]-this.data[1])/this.mS*ms+this.data[1];
this.apply();
if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
else {
this.data[0]=this.data[2];
this.apply();
if (this.Complete) this.Complete(this);
}
}

zxcAnimate.prototype.apply=function(){
if (isFinite(this.data[0])){
if (this.mde!='left'&&this.mde!='top'&&this.data[0]<0) this.data[0]=0;
if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
else zxcOpacity(this.obj,this.data[0]);
}
}

function zxcOpacity(obj,opc){
if (opc<0||opc>100) return;
obj.style.filter='alpha(opacity='+opc+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}


</script>

<script type="text/javascript">
/*<![CDATA[*/

function ExpandImage(cls,ms){
var imgs=zxcByClassName(cls);
ms=ms||1000;
for (var z0=0;z0<imgs.length;z0++){
new Expand(imgs[z0],ms);
}
}

function Expand(img,ms){
this.load=new Image();
this.load.src=img.src;
this.clone=document.createElement('IMG');
this.clone.src=img.src;
document.body.appendChild(this.clone);
this.clone.style.position='absolute';
this.clone.style.zIndex='101';
this.clone.style.visibility='hidden';
this.img=img;
this.woop=new zxcAnimate('width',this.clone,img.width);
this.woop.hide=img.width;
this.woop.Complete=function(){
if (this.ud){
this.obj.style.visibility='hidden';
}
}
this.hoop=new zxcAnimate('height',this.clone,img.height);
this.loop=new zxcAnimate('left',this.clone);
this.toop=new zxcAnimate('top',this.clone);
this.ms=ms||1000;
this.w=false;
this.addevt(img,'mouseover','Expand',true);
this.addevt(this.clone,'mouseout','Expand',false);
}

Expand.prototype.Expand=function(ud){
if (this.load.complete&&this.load.width>50){
if (!this.w){
this.w=this.clone.width;
this.h=this.clone.height;
}
this.clone.style.visibility='visible';
this.woop.animate(this.woop.data[0],ud?this.w:this.img.width,this.ms);
this.woop.ud=!ud;
this.hoop.animate(this.hoop.data[0],ud?this.h:this.img.height,this.ms);
this.loop.animate(ud?zxcPos(this.img)[0]:this.loop.data[0],zxcPos(this.img)[0]-(ud?(this.w-this.img.width)/2:0),this.ms);
this.toop.animate(ud?zxcPos(this.img)[1]:this.toop.data[0],zxcPos(this.img)[0]-(ud?(this.h-this.img.height)/2:0),this.ms);
}
}

Expand.prototype.addevt=function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p); });
else {
var prev=o['on'+t];
if (prev) o['on'+t]=function(e){ prev(e); oop[f](p); };
else o['on'+t]=o[f];
}
}

function zxcByClassName(nme,el,tag){
if (typeof(el)=='string') el=document.getElementById(el);
el=el||document;
for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
if(reg.test(els[z0].className)) ary.push(els[z0]);
}
return ary;
}

function zxcPos(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
}




/*]]>*/
</script>

</head>

<body onload="ExpandImage('expando',1000)">
<img class="expando" src="http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg" width="88" height="66" />

</body>
</html>

jscheuer1
11-23-2009, 08:10 PM
Vic, that second one expand beyond the left and top of the window.

vwphillips
11-24-2009, 10:26 AM
<!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>
<script type="text/javascript">
// Animate (10-November-2009)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
// With the ability to scale the effect time on specified minimum/maximum values
// and with three types of progression 'sin' and 'cos' and liner.

// **** Application Notes

// **** The HTML Code
//
// when moving an element the inline or class rule style position of the element should be assigned as
// 'position:relative;' or 'position:absolute;'
//
// The element would normally be assigned a unique ID name.
//

// **** Initialising the Script.
//
// The script is initialised by assigning an instance of the script to a variable.
// e.g A = new zxcAnimate('left','id1')
// where:
// A = a global variable (variable)
// parameter 0 = the mode(see Note 1). (string)
// parameter 1 = the unique ID name or element object. (string or element object)
// parameter 1 = the initial value. (digits, default = 0)

// **** Executing the Effect
//
// The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);'
// where:
// A = the global referencing the script instance. (variable)
// parameter 0 = the start value. (digits, for opacity minimum 0, maximum 100)
// parameter 1 = the finish value. (digits, for opacity minimum 0, maximum 100)
// parameter 2 = period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds)
// parameter 3 = (optional) to scale the effect time on a specified minimum/maximum. (array, see Note 3)
// field 0 the minimum value. (digits)
// field 1 the maximum value. (digits)
// parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'. (string, default = 'liner')
// 'sin' progression starts fast and ends slow.
// 'cos' progression starts slow and ends fast.
//
// Note 1: Examples modes: 'left', 'top', 'width', 'height', 'opacity.
// Note 2: The default units(excepting opacity) are 'px'.
// For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
// Note 3: The scale is of particular use when re-calling the effect
// in mid progression to retain an constant rate of progression.
// Note 4: The current effect value is recorded in A.data[0].
// Note 5: A function may be called on completion of the effect by assigning the function
// to the animator intance property .Complete.
// e.g. [instance].Complete=function(){ alert(this.data[0]); };
//



// **** Functional Code(1.58K) - NO NEED to Change

function zxcAnimate(mde,obj,srt){
this.to=null;
this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
this.mde=mde.replace(/\W/g,'');
this.data=[srt||0];
return this;
}

zxcAnimate.prototype.animate=function(srt,fin,ms,scale,c){
clearTimeout(this.to);
this.time=ms||this.time||0;
this.data=[srt,srt,fin];
this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
this.inc=Math.PI/(2*this.mS);
this.srttime=new Date().getTime();
this.cng();
}

zxcAnimate.prototype.cng=function(){
var oop=this,ms=new Date().getTime()-this.srttime;
this.data[0]=(this.c=='s')?Math.floor((this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]):(this.c=='c')?(this.data[2])-Math.floor((this.data[2]-this.data[1])*Math.cos(this.inc*ms)):(this.data[2]-this.data[1])/this.mS*ms+this.data[1];
this.apply();
if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
else {
this.data[0]=this.data[2];
this.apply();
if (this.Complete) this.Complete(this);
}
}

zxcAnimate.prototype.apply=function(){
if (isFinite(this.data[0])){
if (this.mde!='left'&&this.mde!='top'&&this.data[0]<0) this.data[0]=0;
if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
else zxcOpacity(this.obj,this.data[0]);
}
}

function zxcOpacity(obj,opc){
if (opc<0||opc>100) return;
obj.style.filter='alpha(opacity='+opc+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}


</script>

<script type="text/javascript">
/*<![CDATA[*/

function ExpandImage(cls,ms){
var imgs=zxcByClassName(cls);
ms=ms||1000;
for (var z0=0;z0<imgs.length;z0++){
new Expand(imgs[z0],ms);
}
}

function Expand(img,ms){
this.load=new Image();
this.load.src=img.src;
this.clone=document.createElement('IMG');
this.clone.src=img.src;
document.body.appendChild(this.clone);
this.clone.style.position='absolute';
this.clone.style.zIndex='101';
this.clone.style.visibility='hidden';
this.img=img;
this.woop=new zxcAnimate('width',this.clone,img.width);
this.woop.ud=true;
this.woop.Complete=function(){
if (this.ud){
this.obj.style.visibility='hidden';
}
}
this.hoop=new zxcAnimate('height',this.clone,img.height);
this.loop=new zxcAnimate('left',this.clone);
this.toop=new zxcAnimate('top',this.clone);
this.ms=ms||1000;
this.w=false;
this.addevt(img,'mouseover','Expand',true);
this.addevt(this.clone,'mouseout','Expand',false);
}

Expand.prototype.Expand=function(ud){
if (this.load.complete&&this.load.width>50&&(this.woop.ud||!ud)){
if (!this.w){
this.w=this.clone.width;
this.h=this.clone.height;
}
this.clone.style.visibility='visible';
this.woop.animate(this.woop.data[0],ud?this.w:this.img.width,this.ms);
this.woop.ud=!ud;
this.hoop.animate(this.hoop.data[0],ud?this.h:this.img.height,this.ms);
var wwhs=this.WWHS();
this.loop.animate(ud?zxcPos(this.img)[0]:this.loop.data[0],Math.min(Math.max(zxcPos(this.img)[0]-(ud?(this.w-this.img.width)/2:0),2),ud?wwhs[0]+wwhs[2]-this.w-2:zxcPos(this.img)[0]),this.ms);
this.toop.animate(ud?zxcPos(this.img)[1]:this.toop.data[0],Math.min(Math.max(zxcPos(this.img)[1]-(ud?(this.h-this.img.height)/2:0),2),ud?wwhs[1]+wwhs[3]-this.h-2:zxcPos(this.img)[1]),this.ms);
}
}

Expand.prototype.WWHS=function(){
if (window.innerHeight) return [window.innerWidth,window.innerHeight,window.pageXOffset,window.pageYOffset];
else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth,document.documentElement.clientHeight,document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
}

Expand.prototype.addevt=function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p); });
else {
var prev=o['on'+t];
if (prev) o['on'+t]=function(e){ prev(e); oop[f](p); };
else o['on'+t]=o[f];
}
}

function zxcByClassName(nme,el,tag){
if (typeof(el)=='string') el=document.getElementById(el);
el=el||document;
for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
if(reg.test(els[z0].className)) ary.push(els[z0]);
}
return ary;
}

function zxcPos(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
}




/*]]>*/
</script>

</head>

<body onload="ExpandImage('expando',1000)">
<img class="expando" src="http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg" width="88" height="66"
style="position:absolute;left:800px;top:500px;" />
<img class="expando" src="http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg" width="88" height="66"
style="position:absolute;left:50px;top:500px;" />
<img class="expando" src="http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg" width="88" height="66"
style="position:absolute;left:950px;top:20px;" />
<img class="expando" src="http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg" width="88" height="66"
style="position:absolute;left:20px;top:20px;" />

</body>
</html>