Menu
I think this is a javascript issue, but I’m not certain and I hope I won’t confuse you with my question! ?
Okay..here goes. If you click on this [URL=”http://sarota.net/”]site
I’d like to do that with my blog, but instead of just a photo being zoomed into, I’d like it to display the blog entry page for that thumbnail image. Does that make sense? Basically the main page will be a page with a bunch of thumbnail images, and when they click on a thumbnail, that “zoom” effect occurs and opens up a window (within that current window) with my blog entry. They can scroll through it, click on links, and read stuff. Once they finish reading it, they can close it (just like closing an image from that site I linked up there).
I’ve googled the thumbnail zoom effect and it appears to be in javascript, so I’m assuming that this would be too, but am really open to anything since I’m a bit clueless as to how to approach this ?
Any advice on this (redirection, terms on how to research this, the language it is probably done in, etc.) would be greatly appreciated!! Thanks in advance for any help you can provide ?
[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[*/
.tst {
width:400px;
border:solid black 1px;
padding:10px;
background-Color:#FFFFCC;
display:none;
position:absolute;
}
.tstpop {
width:450px;
border:solid black 1px;
background-Color:#FFCC66;
}
/*]]>*/
</style>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
// Basic Element Animator (13-March-2008) DRAFT
// 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.
// **** 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.
//
// **** Executing the Effect(Script)
//
// The effect is executed by an event call to function 'zxcBAnimator('left','tst1',20,260,2000);'
// where:
// parameter 0 = the mode(see Note 1). (string)
// parameter 1 = the unique ID name or element object. (string or element object)
// parameter 2 = the start position of the effect. (digits, for opacity minimum 0, maximum 100)
// parameter 3 = the finish position of the effect. (digits, for opacity minimum 0, maximum 100)
// parameter 4 = (optional) period of time between the start and finish of the effect in milliseconds. (digits or defaults to 2000 milliSeconds)
//
// Note 1: The default units(excepting opacity) are 'px'.
// Note 2: Examples modes: 'left', 'top', 'width', 'height', 'opacity.
// For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
// Note 3: To 'toggle' the effect include '#' in parameter 0.
// The first call will set the toggle parameters.
// Subsequent calls with '#' in parameter 0 and the same start and finish parameters will 'toggle' the effect.
// Note 4: The function may be re-executed with a different set of parameters (start/finish time or period)
// whenever required, say from an onclick/mouseover/out event.
// The period parameter will be retained unless re-specified.
//
// **** Advanced Applications
//
// It may be required to access the current value of the effect.
// The element effect is accessible from the element property
// element effect = elementobject[mode.replace(/[-#]/g,'')+'oop'];
// where mode is parameter 0 of the initial call.
// An array storing the current, start and finish values of the element effect may be accessed
// from the element effect.data as fields 0, 1 and 2 respectively
//
// **** General
//
// All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts.
// These characters may be changed to characters of choice using global find and replace.
//
// The Functional Code(about 2K) is best as an External JavaScript.
//
// Tested with IE7 and Mozilla FireFox on a PC.
//
// **** Functional Code - NO NEED to Change
function zxcBAnimator(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime){
if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
if (!zxcobj||(!zxcsrt&&!zxcfin)) return;
var zxcoop=zxcobj[zxcmde.replace(/[-#]/g,'')+'oop'];
if (zxcoop){
clearTimeout(zxcoop.to);
if (zxcoop.srtfin[0]==zxcsrt&&zxcoop.srtfin[1]==zxcfin&&zxcmde.match('#')) zxcoop.update([zxcoop.data[0],(zxcoop.srtfin[0]==zxcoop.data[2])?zxcfin:zxcsrt],zxctime);
else zxcoop.update([zxcsrt,zxcfin],zxctime);
}
else zxcobj[zxcmde.replace(/[-#]/g,'')+'oop']=new zxcBAnimatorOOP(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime);
}
function zxcBAnimatorOOP(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime){
this.srtfin=[zxcsrt,zxcfin];
this.to=null;
this.obj=zxcobj;
this.mde=zxcmde.replace(/[-#]/g,'');
this.update([zxcsrt,zxcfin],zxctime);
}
zxcBAnimatorOOP.prototype.update=function(zxcsrtfin,zxctime){
this.time=zxctime||this.time||2000;
if (zxcsrtfin[0]==zxcsrtfin[1]) return;
this.data=[zxcsrtfin[0],zxcsrtfin[0],zxcsrtfin[1]];
this.srttime=new Date().getTime();
this.cng();
}
zxcBAnimatorOOP.prototype.cng=function(){
var zxcms=new Date().getTime()-this.srttime;
this.data[0]=(this.data[2]-this.data[1])/this.time*zxcms+this.data[1];
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 this.opacity(this.data[0]);
if (zxcms<this.time) this.to=setTimeout(function(zxcoop){return function(){zxcoop.cng();}}(this), 10);
else {
this.data[0]=this.data[2];
if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
else this.opacity(this.data[0]);
}
}
zxcBAnimatorOOP.prototype.opacity=function(zxcopc){
if (zxcopc<0||zxcopc>100){ return; }
this.obj.style.filter='alpha(opacity='+zxcopc+')';
this.obj.style.opacity=this.obj.style.MozOpacity=this.obj.style.KhtmlOpacity=zxcopc/100-.001;
}
/*]]>*/
</script>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
function zxcPopUp(zxcid,zxccls,zxcspd){
var zxcobj=document.getElementById(zxcid);
if (!zxcobj.p){
zxcES(zxcobj,{display:'block'});
zxcobj.p=zxcES('DIV',{position:'absolute',overflow:'hidden'},document.getElementsByTagName('BODY')[0]);
zxcobj.p.className=zxccls;
zxcobj.maxmin=[parseInt(zxcStyleValue(zxcobj.p,'width')),50];
zxcobj.maxmin[2]=zxcobj.offsetHeight+zxcobj.maxmin[0]-zxcobj.offsetWidth;
zxcobj.maxmin[3]=zxcobj.maxmin[1]*(zxcobj.maxmin[2]/zxcobj.maxmin[0]);
zxcobj.maxmin[4]=(zxcobj.maxmin[0]-zxcobj.offsetWidth)/2;
zxcES(zxcobj,{position:'absolute'},zxcobj.p);
zxcES(zxcobj.p,{width:'50px',height:'50px'});
}
zxcspd=zxcspd||2000;
zxcBAnimator('opacity#',zxcobj.p,0,100,zxcspd);
zxcBAnimator('width#',zxcobj.p,zxcobj.maxmin[1],zxcobj.maxmin[0],zxcspd);
zxcBAnimator('height#',zxcobj.p,zxcobj.maxmin[3],zxcobj.maxmin[2],zxcspd);
zxcBAnimator('left#',zxcobj,0,zxcobj.maxmin[4],zxcspd);
zxcBAnimator('top#',zxcobj,0,zxcobj.maxmin[4],zxcspd);
if (zxcobj.p.widthoop.data[2]==zxcobj.maxmin[0]) zxcES(zxcobj.p,{visibility:'visible'});
else zxcobj.to=setTimeout(function(){zxcES(zxcobj.p,{visibility:'hidden'}); },zxcspd);
}
function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
if (typeof(zxcele)=='string') zxcele=document.createElement(zxcele);
for (key in zxcstyle) zxcele.style[key]=zxcstyle[key];
if (zxcp) zxcp.appendChild(zxcele);
if (zxctxt) zxcele.appendChild(document.createTextNode(zxctxt));
return zxcele;
}
function zxcStyleValue(zxcobj,zxcp){
if (zxcobj.style[zxcp.replace(/-/g,'')]) return zxcobj.style[zxcp.replace(/-/g,'')];
if (zxcobj.currentStyle) return zxcobj.currentStyle[zxcp.replace(/-/g,'')];
return document.defaultView.getComputedStyle(zxcobj,null).getPropertyValue(zxcp.toLowerCase());
}
/*]]>*/
</script>
</head>
<body>
http://www.webdeveloper.com/forum/showthread.php?t=185992<br />
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="50" height="50"
onclick="zxcPopUp('tst','tstpop',5000);"
/>
<div id="tst" class="tst" >
think this is a javascript issue, but I'm not certain and I hope I won't confuse you with my question!
Okay..here goes. If you click on this site and click on one of the thumbnails, it opens up a window that zooms in the photo you selected.
I'd like to do that with my blog, but instead of just a photo being zoomed into, I'd like it to display the blog entry page for that thumbnail image. Does that make sense? Basically the main page will be a page with a bunch of thumbnail images, and when they click on a thumbnail, that "zoom" effect occurs and opens up a window (within that current window) with my blog entry. They can scroll through it, click on links, and read stuff. Once they finish reading it, they can close it (just like closing an image from that site I linked up there).
I've googled the thumbnail zoom effect and it appears to be in javascript, so I'm assuming that this would be too, but am really open to anything since I'm a bit clueless as to how to approach this
Any advice on this (redirection, terms on how to research this, the language it is probably done in, etc.) would be greatly appreciated!! Thanks in advance for any help you can provide
Reply With Quote
</div>
</body>
</html>[/CODE][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[*/
.tst {
height:250px;
width:420px;
border:solid black 1px;
background-Color:#FFFFCC;
position:absolute;
display:none;
z-Index:101;
}
.tstscroll {
width:400px;
height:200px;
border:solid black 0px;
padding:10px;
background-Color:#FFFFCC;
overflow:auto;
}
.tstpop {
width:500px;
border:solid black 1px;
background-Color:#FFCC66;
}
/*]]>*/
</style>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
// Basic Element Animator (13-March-2008) DRAFT
// 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.
// **** Functional Code - NO NEED to Change
function zxcBAnimator(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime){
if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
if (!zxcobj||(!zxcsrt&&!zxcfin)) return;
var zxcoop=zxcobj[zxcmde.replace(/[-#]/g,'')+'oop'];
if (zxcoop){
clearTimeout(zxcoop.to);
if (zxcoop.srtfin[0]==zxcsrt&&zxcoop.srtfin[1]==zxcfin&&zxcmde.match('#')) zxcoop.update([zxcoop.data[0],(zxcoop.srtfin[0]==zxcoop.data[2])?zxcfin:zxcsrt],zxctime);
else zxcoop.update([zxcsrt,zxcfin],zxctime);
}
else zxcobj[zxcmde.replace(/[-#]/g,'')+'oop']=new zxcBAnimatorOOP(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime);
}
function zxcBAnimatorOOP(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime){
this.srtfin=[zxcsrt,zxcfin];
this.to=null;
this.obj=zxcobj;
this.mde=zxcmde.replace(/[-#]/g,'');
this.update([zxcsrt,zxcfin],zxctime);
}
zxcBAnimatorOOP.prototype.update=function(zxcsrtfin,zxctime){
this.time=zxctime||this.time||2000;
if (zxcsrtfin[0]==zxcsrtfin[1]) return;
this.data=[zxcsrtfin[0],zxcsrtfin[0],zxcsrtfin[1]];
this.srttime=new Date().getTime();
this.cng();
}
zxcBAnimatorOOP.prototype.cng=function(){
var zxcms=new Date().getTime()-this.srttime;
this.data[0]=(this.data[2]-this.data[1])/this.time*zxcms+this.data[1];
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 this.opacity(this.data[0]);
if (zxcms<this.time) this.to=setTimeout(function(zxcoop){return function(){zxcoop.cng();}}(this), 10);
else {
this.data[0]=this.data[2];
if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
else this.opacity(this.data[0]);
}
}
zxcBAnimatorOOP.prototype.opacity=function(zxcopc){
if (zxcopc<0||zxcopc>100){ return; }
this.obj.style.filter='alpha(opacity='+zxcopc+')';
this.obj.style.opacity=this.obj.style.MozOpacity=this.obj.style.KhtmlOpacity=zxcopc/100-.001;
}
/*]]>*/
</script>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
var zxcLast;
function zxcPopUp(zxcid,zxcspd,zxccls,zxcsrt){
var zxcobj=document.getElementById(zxcid);
if (zxcLast&&zxcLast!=zxcobj) zxcPopDo(zxcLast,zxcLast.spd);
if (zxcobj.to) clearTimeout(zxcobj.to);
if (!zxcobj.p){
zxcES(zxcobj,{display:'block'});
zxcobj.p=zxcES('DIV',{position:'absolute',overflow:'hidden',visibility:'hidden'},document.getElementsByTagName('BODY')[0]);
zxcobj.p.className=zxccls;
zxcobj.maxmin=[parseInt(zxcStyleValue(zxcobj.p,'width')),zxcsrt||5];
zxcobj.maxmin[2]=zxcobj.offsetHeight+zxcobj.maxmin[0]-zxcobj.offsetWidth;
zxcobj.maxmin[3]=zxcobj.maxmin[1]*(zxcobj.maxmin[2]/zxcobj.maxmin[0]);
zxcobj.maxmin[4]=(zxcobj.maxmin[0]-parseInt(zxcStyleValue(zxcobj,'width')))/2;
zxcES(zxcobj,{position:'absolute'},zxcobj.p);
zxcobj.spd=zxcspd||2000;
}
zxcspd=zxcspd||zxcobj.spd;
zxcPopDo(zxcobj,zxcspd);
}
function zxcPopDo(zxcobj,zxcspd){
zxcBAnimator('opacity#',zxcobj.p,0,100,zxcspd);
zxcBAnimator('width#',zxcobj.p,zxcobj.maxmin[1],zxcobj.maxmin[0],zxcspd);
zxcBAnimator('height#',zxcobj.p,zxcobj.maxmin[3],zxcobj.maxmin[2],zxcspd);
zxcBAnimator('left#',zxcobj,0,zxcobj.maxmin[4],zxcspd);
zxcBAnimator('top#',zxcobj,0,zxcobj.maxmin[4],zxcspd);
if (zxcobj.p.widthoop.data[2]==zxcobj.maxmin[0]) zxcES(zxcobj.p,{visibility:'visible'});
else zxcobj.to=setTimeout(function(){zxcES(zxcobj.p,{visibility:'hidden'}); },zxcspd);
zxcLast=zxcobj;
}
function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
if (typeof(zxcele)=='string') zxcele=document.createElement(zxcele);
for (key in zxcstyle) zxcele.style[key]=zxcstyle[key];
if (zxcp) zxcp.appendChild(zxcele);
if (zxctxt) zxcele.appendChild(document.createTextNode(zxctxt));
return zxcele;
}
function zxcStyleValue(zxcobj,zxcp){
if (zxcobj.style[zxcp.replace(/-/g,'')]) return zxcobj.style[zxcp.replace(/-/g,'')];
if (zxcobj.currentStyle) return zxcobj.currentStyle[zxcp.replace(/-/g,'')];
return document.defaultView.getComputedStyle(zxcobj,null).getPropertyValue(zxcp.toLowerCase());
}
/*]]>*/
</script>
</head>
<body>
http://www.webdeveloper.com/forum/showthread.php?t=185992<br />
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="50" height="50"
onclick="zxcPopUp('tst',5000,'tstpop',20);"
/>
<div id="tst" class="tst" >
<input type="button" name="" value="Close" onclick="zxcPopUp('tst',500);" />
<div class="tstscroll">
think this is a javascript issue, but I'm not certain and I hope I won't confuse you with my question!
Okay..here goes. If you click on this site and click on one of the thumbnails, it opens up a window that zooms in the photo you selected.
I'd like to do that with my blog, but instead of just a photo being zoomed into, I'd like it to display the blog entry page for that thumbnail image. Does that make sense? Basically the main page will be a page with a bunch of thumbnail images, and when they click on a thumbnail, that "zoom" effect occurs and opens up a window (within that current window) with my blog entry. They can scroll through it, click on links, and read stuff. Once they finish reading it, they can close it (just like closing an image from that site I linked up there).
I've googled the thumbnail zoom effect and it appears to be in javascript, so I'm assuming that this would be too, but am really open to anything since I'm a bit clueless as to how to approach this
Any advice on this (redirection, terms on how to research this, the language it is probably done in, etc.) would be greatly appreciated!! Thanks in advance for any help you can provide
Reply With Quote
</div></div>
<img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="50" height="50"
onclick="zxcPopUp('tst1',5000,'tstpop',20);"
/>
<div id="tst1" class="tst" >
<input type="button" name="" value="Close" onclick="zxcPopUp('tst1',500);" />
<div class="tstscroll">
// The effect is executed by an event call to function 'zxcBAnimator('left','tst1',20,260,2000);'
// where:
// parameter 0 = the mode(see Note 1). (string)
// parameter 1 = the unique ID name or element object. (string or element object)
// parameter 2 = the start position of the effect. (digits, for opacity minimum 0, maximum 100)
// parameter 3 = the finish position of the effect. (digits, for opacity minimum 0, maximum 100)
// parameter 4 = (optional) period of time between the start and finish of the effect in milliseconds. (digits or defaults to 2000 milliSeconds)
//
// Note 1: The default units(excepting opacity) are 'px'.
// Note 2: Examples modes: 'left', 'top', 'width', 'height', 'opacity.
// For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
// Note 3: To 'toggle' the effect include '#' in parameter 0.
// The first call will set the toggle parameters.
// Subsequent calls with '#' in parameter 0 and the same start and finish parameters will 'toggle' the effect.
// Note 4: The function may be re-executed with a different set of parameters (start/finish time or period)
// whenever required, say from an onclick/mouseover/out event.
// The period parameter will be retained unless re-specified.
//
// **** Advanced Applications
</div></div>
</body>
</html>[/CODE][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[*/
.tst {
height:250px;
width:420px;
border:solid black 1px;
background-Color:#FFFFCC;
position:absolute;
display:none;
z-Index:101;
}
.tstscroll {
width:400px;
height:200px;
border:solid black 0px;
padding:10px;
background-Color:#FFFFCC;
overflow:auto;
}
.tstpop {
width:500px;
left:400px;
border:solid black 1px;
background-Color:#FFCC66;
}
.tstpop1 {
width:500px;
left:100px;
border:solid black 1px;
background-Color:#FFCC66;
}
/*]]>*/
</style>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
// Basic Element Animator (13-March-2008) DRAFT
// 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.
// **** Functional Code - NO NEED to Change
function zxcBAnimator(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime){
if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
if (!zxcobj||(!zxcsrt&&!zxcfin)) return;
var zxcoop=zxcobj[zxcmde.replace(/[-#]/g,'')+'oop'];
if (zxcoop){
clearTimeout(zxcoop.to);
if (zxcoop.srtfin[0]==zxcsrt&&zxcoop.srtfin[1]==zxcfin&&zxcmde.match('#')) zxcoop.update([zxcoop.data[0],(zxcoop.srtfin[0]==zxcoop.data[2])?zxcfin:zxcsrt],zxctime);
else zxcoop.update([zxcsrt,zxcfin],zxctime);
}
else zxcobj[zxcmde.replace(/[-#]/g,'')+'oop']=new zxcBAnimatorOOP(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime);
}
function zxcBAnimatorOOP(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime){
this.srtfin=[zxcsrt,zxcfin];
this.to=null;
this.obj=zxcobj;
this.mde=zxcmde.replace(/[-#]/g,'');
this.update([zxcsrt,zxcfin],zxctime);
}
zxcBAnimatorOOP.prototype.update=function(zxcsrtfin,zxctime){
this.time=zxctime||this.time||2000;
if (zxcsrtfin[0]==zxcsrtfin[1]) return;
this.data=[zxcsrtfin[0],zxcsrtfin[0],zxcsrtfin[1]];
this.srttime=new Date().getTime();
this.cng();
}
zxcBAnimatorOOP.prototype.cng=function(){
var zxcms=new Date().getTime()-this.srttime;
this.data[0]=(this.data[2]-this.data[1])/this.time*zxcms+this.data[1];
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 this.opacity(this.data[0]);
if (zxcms<this.time) this.to=setTimeout(function(zxcoop){return function(){zxcoop.cng();}}(this), 10);
else {
this.data[0]=this.data[2];
if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
else this.opacity(this.data[0]);
}
}
zxcBAnimatorOOP.prototype.opacity=function(zxcopc){
if (zxcopc<0||zxcopc>100){ return; }
this.obj.style.filter='alpha(opacity='+zxcopc+')';
this.obj.style.opacity=this.obj.style.MozOpacity=this.obj.style.KhtmlOpacity=zxcopc/100-.001;
}
/*]]>*/
</script>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
var zxcLast;
function zxcPopUp(zxcid,zxcspd,zxccls,zxcsrt){
var zxcobj=document.getElementById(zxcid);
if (zxcLast&&zxcLast!=zxcobj&&zxcLast.p.widthoop.data[2]==zxcLast.maxmin[0]) zxcPopDo(zxcLast,zxcLast.spd);
if (zxcobj.to) clearTimeout(zxcobj.to);
if (!zxcobj.p){
zxcES(zxcobj,{display:'block'});
zxcobj.p=zxcES('DIV',{position:'absolute',overflow:'hidden',visibility:'hidden'},document.getElementsByTagName('BODY')[0]);
zxcobj.p.className=zxccls;
zxcobj.maxmin=[parseInt(zxcStyleValue(zxcobj.p,'width')),zxcsrt||5];
zxcobj.maxmin[2]=zxcobj.offsetHeight+zxcobj.maxmin[0]-zxcobj.offsetWidth;
zxcobj.maxmin[3]=zxcobj.maxmin[1]*(zxcobj.maxmin[2]/zxcobj.maxmin[0]);
zxcobj.maxmin[4]=(zxcobj.maxmin[0]-parseInt(zxcStyleValue(zxcobj,'width')))/2;
zxcES(zxcobj,{position:'absolute'},zxcobj.p);
zxcobj.spd=zxcspd||2000;
}
zxcspd=zxcspd||zxcobj.spd;
zxcPopDo(zxcobj,zxcspd);
}
function zxcPopDo(zxcobj,zxcspd){
zxcBAnimator('opacity#',zxcobj.p,0,100,zxcspd);
zxcBAnimator('width#',zxcobj.p,zxcobj.maxmin[1],zxcobj.maxmin[0],zxcspd);
zxcBAnimator('height#',zxcobj.p,zxcobj.maxmin[3],zxcobj.maxmin[2],zxcspd);
zxcBAnimator('left#',zxcobj,0,zxcobj.maxmin[4],zxcspd);
zxcBAnimator('top#',zxcobj,0,zxcobj.maxmin[4],zxcspd);
if (zxcobj.p.widthoop.data[2]==zxcobj.maxmin[0]) zxcES(zxcobj.p,{visibility:'visible'});
else zxcobj.to=setTimeout(function(){zxcES(zxcobj.p,{visibility:'hidden'}); },zxcspd);
zxcLast=zxcobj;
}
function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
if (typeof(zxcele)=='string') zxcele=document.createElement(zxcele);
for (key in zxcstyle) zxcele.style[key]=zxcstyle[key];
if (zxcp) zxcp.appendChild(zxcele);
if (zxctxt) zxcele.appendChild(document.createTextNode(zxctxt));
return zxcele;
}
function zxcStyleValue(zxcobj,zxcp){
if (zxcobj.style[zxcp.replace(/-/g,'')]) return zxcobj.style[zxcp.replace(/-/g,'')];
if (zxcobj.currentStyle) return zxcobj.currentStyle[zxcp.replace(/-/g,'')];
return document.defaultView.getComputedStyle(zxcobj,null).getPropertyValue(zxcp.toLowerCase());
}
/*]]>*/
</script>
</head>
<body>
http://www.webdeveloper.com/forum/showthread.php?t=185992<br />
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="50" height="50"
onclick="zxcPopUp('tst',5000,'tstpop1',20);"
/>
<div id="tst" class="tst" >
<input type="button" name="" value="Close" onclick="zxcPopUp('tst',500);" />
<div class="tstscroll">
think this is a javascript issue, but I'm not certain and I hope I won't confuse you with my question!
Okay..here goes. If you click on this site and click on one of the thumbnails, it opens up a window that zooms in the photo you selected.
I'd like to do that with my blog, but instead of just a photo being zoomed into, I'd like it to display the blog entry page for that thumbnail image. Does that make sense? Basically the main page will be a page with a bunch of thumbnail images, and when they click on a thumbnail, that "zoom" effect occurs and opens up a window (within that current window) with my blog entry. They can scroll through it, click on links, and read stuff. Once they finish reading it, they can close it (just like closing an image from that site I linked up there).
I've googled the thumbnail zoom effect and it appears to be in javascript, so I'm assuming that this would be too, but am really open to anything since I'm a bit clueless as to how to approach this
Any advice on this (redirection, terms on how to research this, the language it is probably done in, etc.) would be greatly appreciated!! Thanks in advance for any help you can provide
Reply With Quote
</div></div>
<img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="50" height="50"
onclick="zxcPopUp('tst1',5000,'tstpop',20);"
/>
<div id="tst1" class="tst" style="left:400px;">
<input type="button" name="" value="Close" onclick="zxcPopUp('tst1',500);" />
<div class="tstscroll">
// The effect is executed by an event call to function 'zxcBAnimator('left','tst1',20,260,2000);'
// where:
// parameter 0 = the mode(see Note 1). (string)
// parameter 1 = the unique ID name or element object. (string or element object)
// parameter 2 = the start position of the effect. (digits, for opacity minimum 0, maximum 100)
// parameter 3 = the finish position of the effect. (digits, for opacity minimum 0, maximum 100)
// parameter 4 = (optional) period of time between the start and finish of the effect in milliseconds. (digits or defaults to 2000 milliSeconds)
//
// Note 1: The default units(excepting opacity) are 'px'.
// Note 2: Examples modes: 'left', 'top', 'width', 'height', 'opacity.
// For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
// Note 3: To 'toggle' the effect include '#' in parameter 0.
// The first call will set the toggle parameters.
// Subsequent calls with '#' in parameter 0 and the same start and finish parameters will 'toggle' the effect.
// Note 4: The function may be re-executed with a different set of parameters (start/finish time or period)
// whenever required, say from an onclick/mouseover/out event.
// The period parameter will be retained unless re-specified.
//
// **** Advanced Applications
</div></div>
</body>
</html>[/CODE]0.1.9 — BETA 6.17