PDA

View Full Version : Adding prev and next buttons to fadeDiv.js



Zaphodz
12-17-2013, 04:29 PM
Hi,

I have been using this fadeDiv.js script which I guess from my searching of this forum is one of Vic Phillips' scripts. It works really well and I have managed to add a small accomanying script to manage thumbnails (I am not a coder), but I am totally stumped trying to add "prev" and "next" buttons that work for this. If anyone (or Vic) can shed any light as to how to do this I would be most grateful.


function zxcBAnimator(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime){
if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
if (!zxcobj||(!zxcsrt&&!zxcfin)||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;
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 zxcOpacity(this.obj,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 zxcOpacity(this.obj,this.data[0]);
}
}

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

function zxcFadeSS(zxcid,zxcimgnu,zxcsrt,zxcspd,zxchold,zxcud){
var zxcp=document.getElementById(zxcid);
var zxcoop=zxcp.oop;
if (!zxcp.oop){
zxcoop=zxcp.oop=new zxcFadeSSOOP(zxcp,zxcimgnu,zxcsrt,zxcspd,zxchold,zxcud);
if (typeof(zxcsrt)=='number') zxcoop.srtto=setTimeout(function(){zxcoop.cng(); },zxcsrt);
}
else {
clearTimeout(zxcoop.to);
clearTimeout(zxcoop.srtto);
zxcoop.ud=zxcud||zxcoop.ud;
zxcoop.spd=zxcspd||zxcoop.spd;
zxcoop.hold=zxchold||zxcoop.hold;
if (typeof(zxcimgnu)=='number'){
if (typeof(zxcsrt)=='number') zxcoop.srtto=setTimeout(function(){zxcoop.cng(); },zxcsrt);
else zxcoop.cng(zxcimgnu+1);
}
else if (zxcimgnu) zxcoop.cng();
}
}

function zxcFadeSSOOP(zxcp,zxcimgnu,zxcsrt,zxcspd,zxchold,zxcud){
this.p=zxcp;
this.ary=[];
var zxcclds=zxcp.childNodes;
for (var zxccnt=0,zxc0=0;zxc0<zxcclds.length;zxc0++){
if (zxcclds[zxc0].nodeType==1){
this.ary[zxccnt]=zxcclds[zxc0];
zxcclds[zxc0].style.zIndex='0';
zxcOpacity(zxcclds[zxc0],0);
zxccnt++;
}
}
this.ary=this.ary.reverse();
this.cnt=zxcimgnu||0;
this.lst=this.ary[this.cnt];
this.lst.style.zIndex='1';
zxcOpacity(this.lst,100);
this.ud=zxcud||1;
this.to=null;
this.srtto=null;
this.spd=zxcspd||1000;
this.hold=zxchold||2000;
}

zxcFadeSSOOP.prototype.cng=function(zxcnu){
this.lst.style.zIndex=0;
var zxcoop=this.lst.opacityoop;
zxcBAnimator('opacity',this.lst,zxcoop?zxcoop.data[0]:100,0,this.spd);
if (typeof(zxcnu)!='number') this.cnt+=this.ud;
else this.cnt=zxcnu-1;
this.cnt=this.cnt<0?this.ary.length-1:this.cnt==this.ary.length?0:this.cnt;
this.lst=this.ary[this.cnt];
this.lst.style.zIndex=1;
zxcoop=this.lst.opacityoop;
zxcBAnimator('opacity',this.lst,(zxcoop?zxcoop.data[0]:0)+1,100,this.spd);
if (!zxcnu) this.to=setTimeout(function(zxcoop){return function(){zxcoop.cng();}}(this),this.hold);
}


Many thanks - Zaphodz

vwphillips
12-18-2013, 08:46 AM
you will need to post the scripting you have made, any initilazion script and the relavent HTML and CSS code

Zaphodz
12-18-2013, 04:36 PM
Hi Vic,

Thank you for responding.

The body call is:


<body onload="zxcFadeSS('picContent1',0,4000,2000,5000);">

The div that the images are in looks like this:


<div id="picContent1">
[[!getImageList? &tvname=`galleryCaption1` &tpl=`galleryItemTpl1` &reverse=`1` &imageHeight=`MIGXimageHeight`]]
</div>

I'm using a CMS (called MODX) which puts each image into a template, so this code is repeated for each div with the placeholders pulling in the individual images:


<div id="picFadeContentMx" style="opacity:[[+_first]];">
<div class="picShadow" id="picShadow1" style="width:[[+imageWidth]]px;height:[[+imageHeight]]px;">
<img src="[[+image]]" width="[[+imageWidth]]px" height="[[+imageHeight]]px" alt="[[+altText]]" border="0" />
</div>
</div>

This renders the html like this:


<div id="picContent1">
<div id="picFadeContentMx" style="opacity:1;">
<div class="picShadow" id="picShadow1" style="width:540px;height:720px;">
<img src="pics/Street_Couple_01_PPc_mono_720px.jpg" width="540px" height="720px" alt="Street photography" border="0" />
</div>
<div class="picCaption1">Street Photography - "Steppin' Out"</div>
</div><div id="picFadeContentMx" style="opacity:;">
<div class="picShadow" id="picShadow1" style="width:540px;height:720px;">
<img src="pics/Street_Man_01PPc_mono_720px.jpg" width="540px" height="720px" alt="Street photography" border="0" />
</div>
<div class="picCaption1">Street Photography - "Man & Can"</div>
</div><div id="picFadeContentMx" style="opacity:;">
<div class="picShadow" id="picShadow1" style="width:960px;height:720px;">
<img src="pics/Buick_Century_01_1PPc_720px.jpg" width="960px" height="720px" alt="Street photography" border="0" />
</div>
</div>


I have created a test button which in principle needs code something like this:


<div class="testButtonContainer">
<a onclick="zxcFadeSS('picContent1',n+1);">
<img src="graphics/fwd_but_01.png" width="50" height="100px" border="0px">
</a>
</div>

where "n" needs to be the value of the current displayed div. I guess I need a call (maybe a separate function) that that specifies the image number to be the current image number + or - 1, which is beyond my very basic understanding of javascript.

Related CSS is:


#picContent1 {
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 0px;
height: 720px;
}

#picFadeContentMx {
position: absolute;
top: 0px;
left: 0px;
margin-top: 0px;
margin-bottom: 0px;
height:auto;
width: 960px;
opacity: 0;
filter: alpha(opacity=0);
z-index: 150;
border: 0px none #FF0000;
}

.picShadow {
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
height: 720px;
background: none;
padding: 0px;
box-shadow: 0px 10px 20px rgba(0,0,0,1);
}

.picCaption1 {
clear: both;
margin-left: auto;
margin-right: auto;
margin-top: 15px;
margin-bottom: 15px;
width: 960px;
height: auto;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 16px;
text-align: center;
color: #CCC;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-decoration: none;
}


I hope this give a clear idea of what I'm doing with your script.

Thanks - Mark

Zaphodz
12-19-2013, 04:19 AM
Hi Vic,

Well I did some more playing around with the existing setup and found that putting different parameter values in the script call on each button achieved the desired effect, even if a little unorthodox. This is what seems to work:


<!--PLAY-->
<div class="testButtonContainer">
<a onclick="zxcFadeSS('picContent1',0,0,2000,6000,1);">
<img src="graphics/mza_ply_but_01.png" width="50" height="100px" border="0px">
</a>
</div>

<!--PAUSE-->
<div class="testButtonContainer">
<a onclick="zxcFadeSS('picContent1',0,1000000000,0,0,0);">
<img src="graphics/mza_pse_but_01.png" width="50" height="100px" border="0px">
</a>
</div>

<!--NEXT-->
<div class="testButtonContainer">
<a onclick="zxcFadeSS('picContent1',0,0,2000,1000000000,1);">
<img src="graphics/mza_fwd_but_01.png" width="50" height="100px" border="0px">
</a>
</div>

<!--PREV-->
<div class="testButtonContainer">
<a onclick="zxcFadeSS('picContent1',0,0,2000,1000000000,-1);">
<img src="graphics/mza_bck_but_01.png" width="50" height="100px" border="0px">
</a>
</div>

I'd be interested to know what your thoughts on this are, especially if there's a better way to do this.

One other thing, the version of your script I have has no credit info etc. with it, if you post this I will gladly add it to the script I am using. A lot of people benefit from your scripts (and help judging from what I see on this and other scripting fora), and I think credit should be given where it's due.

Cheers - Mark :)

vwphillips
12-19-2013, 12:18 PM
I am glad I sorted this out yourself

The script is very old but I I have some changes to make it easier to control

changes in redf


<!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[*/
#picContent1 {
position:relative;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
margin-bottom: 0px;
height: 720px;
}

#picFadeContentMx {
position: absolute;
top: 0px;
left: 0px;
margin-top: 0px;
margin-bottom: 0px;
height:auto;
width: 960px;
opacity: 0;
filter: alpha(opacity=0);
z-index: 150;
border: 0px none #FF0000;
}

.picShadow {
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
height: 720px;
background: none;
padding: 0px;
box-shadow: 0px 10px 20px rgba(0,0,0,1);
}

.picCaption1 {
clear: both;
margin-left: auto;
margin-right: auto;
margin-top: 15px;
margin-bottom: 15px;
width: 960px;
height: auto;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 16px;
text-align: center;
color: #CCC;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-decoration: none;
}

/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
function zxcBAnimator(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime){
if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
if (!zxcobj||(!zxcsrt&&!zxcfin)||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;
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 zxcOpacity(this.obj,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 zxcOpacity(this.obj,this.data[0]);
}
}

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

function zxcFadeSS(zxcid,zxcimgnu,zxcsrt,zxcspd,zxchold,zxcud){
var zxcp=document.getElementById(zxcid);
var zxcoop=zxcp.oop;
if (!zxcp.oop){
zxcFadeSS[zxcid]=zxcoop=zxcp.oop=new zxcFadeSSOOP(zxcp,zxcimgnu,zxcsrt,zxcspd,zxchold,zxcud);
if (typeof(zxcsrt)=='number') zxcoop.srtto=setTimeout(function(){zxcoop.cng(); },zxcsrt);
}
else {
clearTimeout(zxcoop.to);
clearTimeout(zxcoop.srtto);
zxcoop.ud=zxcud||zxcoop.ud;
zxcoop.spd=zxcspd||zxcoop.spd;
zxcoop.hold=zxchold||zxcoop.hold;
if (typeof(zxcimgnu)=='number'){
if (typeof(zxcsrt)=='number') zxcoop.srtto=setTimeout(function(){zxcoop.cng(); },zxcsrt);
else zxcoop.cng(zxcimgnu+1);
}
else if (zxcimgnu) zxcoop.cng();
}
}

function zxcFadeSSOOP(zxcp,zxcimgnu,zxcsrt,zxcspd,zxchold,zxcud){
this.p=zxcp;
this.ary=[];
var zxcclds=zxcp.childNodes;
for (var zxccnt=0,zxc0=0;zxc0<zxcclds.length;zxc0++){
if (zxcclds[zxc0].nodeType==1){
this.ary[zxccnt]=zxcclds[zxc0];
zxcclds[zxc0].style.zIndex='0';
zxcOpacity(zxcclds[zxc0],0);
zxccnt++;
}
}
this.ary=this.ary.reverse();
this.cnt=zxcimgnu||0;
this.lst=this.ary[this.cnt];
this.lst.style.zIndex='1';
zxcOpacity(this.lst,100);
this.ud=zxcud||1;
this.to=null;
this.srtto=null;
this.spd=zxcspd||1000;
this.hold=zxchold||2000;
}

zxcFadeSSOOP.prototype.cng=function(zxcnu){
clearTimeout(this.to);
this.lst.style.zIndex=0;
var zxcoop=this.lst.opacityoop;
zxcBAnimator('opacity',this.lst,zxcoop?zxcoop.data[0]:100,0,this.spd);
if (typeof(zxcnu)!='number') this.cnt+=this.ud;
else this.cnt=zxcnu;
this.cnt=this.cnt<0?this.ary.length-1:this.cnt==this.ary.length?0:this.cnt;
this.lst=this.ary[this.cnt];
this.lst.style.zIndex=1;
zxcoop=this.lst.opacityoop;
zxcBAnimator('opacity',this.lst,(zxcoop?zxcoop.data[0]:0)+1,100,this.spd);
if (!zxcnu) this.to=setTimeout(function(zxcoop){return function(){zxcoop.cng();}}(this),this.hold);
}


function zxcFadeSSNext(id,ud){
var o=zxcFadeSS[id],ud=typeof(ud)=='number'&&ud<0?-1:1;
if (o){
o.ud=ud;
o.cng(o.cnt+ud);
}
}

function zxcFadeSSPause(id){
var o=zxcFadeSS[id];
if (o){
clearTimeout(o.to);
}
}

function zxcFadeSSAuto(id){
var o=zxcFadeSS[id];
if (o){
clearTimeout(o.to);
o.to=setTimeout(function(){ o.cng(); },200);
}
}

function zxcFadeSSGoTo(id,n){
var o=zxcFadeSS[id];
if (o){
clearTimeout(o.to);
if (o.ary[n]&&n!=o.cnt){
o.cng(n);
}
}
}

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

<body onload="zxcFadeSS('picContent1',0,4000,2000,5000);">

<input type="button" name="" value="Next" onmouseup="zxcFadeSSNext('picContent1',1);" />
<input type="button" name="" value="Back" onmouseup="zxcFadeSSNext('picContent1',-1);" />
<input type="button" name="" value="Pause" onmouseup="zxcFadeSSPause('picContent1');" />
<input type="button" name="" value="Auto" onmouseup="zxcFadeSSAuto('picContent1');" />
<input type="button" name="" value="GoTo 0" onmouseup="zxcFadeSSGoTo('picContent1',0);" />
<input type="button" name="" value="GoTo 1" onmouseup="zxcFadeSSGoTo('picContent1',1);" />
<input type="button" name="" value="GoTo 2" onmouseup="zxcFadeSSGoTo('picContent1',2);" />

<div id="picContent1">

<div id="picFadeContentMx" style="opacity:1;">
<div class="picShadow" id="picShadow1" style="width:540px;height:720px;">
<img src="../StdImages/3.gif" width="540px" height="720px" alt="Street photography" border="0" />
</div>
<div class="picCaption1">Street Photography - "Steppin' Out"</div>
</div>

<div id="picFadeContentMx" style="opacity:;">
<div class="picShadow" id="picShadow1" style="width:540px;height:720px;">
<img src="../StdImages/2.gif" width="540px" height="720px" alt="Street photography" border="0" />
</div>
<div class="picCaption1">Street Photography - "Man & Can"</div>
</div>

<div id="picFadeContentMx" style="opacity:;">
<div class="picShadow" id="picShadow1" style="width:960px;height:720px;">
<img src="../StdImages/1.gif" width="960px" height="720px" alt="Street photography" border="0" />
</div>
</div>

</div>

</body>

</html>

Zaphodz
12-19-2013, 03:13 PM
Hi Vic,

Thanks for that, it does make it "better defined", I will add this update to site.

On another topic, did you sort out a new server for your site? I ask this as I have a server and could possibly host your site (for free) depending on the amount of space and bandwidth you need. The server is managed by a very high quality provider with data centres in the UK and US with ns1 in UK and ns2 in US. PM me if this is something that interests you (I assume it is possible to send a PM on this site).

Thank you once again, all the best - Mark

vwphillips
12-21-2013, 05:03 PM
i have had a lot of problems with hosting and forwarding

the new hosting will be vicsjavasripts.org when it clears