Jcarousel Fade Effect

**round** · 10-25-2012, 11:50 AM

http://xhtmljunkies.net/Magento/Alex....php/catalogue

I am having issue here:
Two big photos are there. I have provided sliding effect. Actually I want fade effect so that it doesn't seem like these photos are sliding.

I have tried in j('#mycarousel1234').jcarousel(... but could not succeed. And yes fade should take place in every 5 seconds.

It is Jcarousel. I am really confused that how to achieve fade effect in it.

Can anyone please help?

**Beverleyh** · 10-25-2012, 12:38 PM

That's a nice looking site round

The documentation for jCarousel is here: http://sorgalla.com/projects/jcarousel/ I had a quick look but I couldnt see a fade option.

Maybe you could try using a different jQuery plugin - something like Pikachoose? http://www.pikachoose.com/

I use Pikachoose for the main banner image on this site: http://hmsgardendesign.co.uk/

As you can see, I've hidden the default thumbnails and text/nav overlay so it looks less cluttered. That was done with CSS - you can hide the counter too with these styles;

Code:

#main-demo .pika-thumbs li, #main-demo .pika-textnav, #main-demo .pika-counter { display:none; }

Hope that helps

**round** · 10-25-2012, 12:46 PM

Hi Beverleyh, Thank you for your kind reply.
But I would like to inform you one thing that is : if you see in view source of that page. The following jquery file is there.
jquery-1.2.3.pack.js now if you look at it by js beautifier you will find that there are functions like fadeIn, fadeOut & fadeTo.
Can you please tell me how to use it? I tried a lot but failed.

Thank you.

**vwphillips** · 10-25-2012, 01:33 PM

you do not say if any additional functionality is required but

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[*/
#mycarousel123 {
  position:relative;overflow:hidden;width:352px;height:352px;border:solid red 1px;
}

#mycarousel123 IMG {
  width:352px;height:352px;border-Width:0px;
}

/*]]>*/
</style></head>

<body>

 <div id="mycarousel123" class="catalogue_left">
  <a href="#"><img id="wows1_0" src="http://xhtmljunkies.net/Magento/Alex/skin/frontend/default/alex/images/catalogue01.jpg" alt="product_fix" /></a>
  <a href="#"><img id="wows1_1" src="http://xhtmljunkies.net/Magento/Alex/skin/frontend/default/alex/images/catalogue02.jpg" alt="product_scroll_left" /></a>
  <a href="#"><img id="wows1_2" src="http://xhtmljunkies.net/Magento/Alex/skin/frontend/default/alex/images/catalogue01.jpg" alt="product_scroll_right" /></a>
 </div>

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

var zxcFadeSS={

 init:function(o){
  var id=o.ID,oop=zxcFadeSS['zxc'+id],obj=document.getElementById(id),ms=o.FadeDuration,ms=typeof(ms)=='number'?ms:1000,hold=o.AutoHold,imgs=obj.getElementsByTagName('IMG'),ary=[],z0=0,z1=0;
  for (;z0<imgs.length;z0++){
   imgs[z0].style.position='absolute';
   imgs[z0].style.zIndex=z0>0?'0':'1';
   imgs[z0].style.left='0px';
   imgs[z0].style.top='0px';
   imgs[z0].style.width='100%';
   imgs[z0].style.height='100%';
   this.opacity(imgs[z0],z0>0?0:100);
   ary.push([imgs[z0],z0>0?0:100,'dly'+z0]);
  }
  o=zxcFadeSS['zxc'+id]={
   id:id,
   ary:ary,
   lgth:ary.length,
   cnt:0,
   ms:ms,
   hold:typeof(hold)=='number'?hold:ms*2
  }
  this.Auto(id,o.hold);
 },

 Auto:function(id,ms){
  var o=zxcFadeSS['zxc'+id],oop=this;
  if (o){
   o.dly=setTimeout(function(){ oop.GoTo(id,(o.cnt+1)%o.lgth,true); },o.hold);
  }
 },

 GoTo:function(id,nu,auto){
  var o=zxcFadeSS['zxc'+id];
  if (o&&o.ary[nu]){
   clearTimeout(o.dly);
   o.auto=auto===true;
   o.ary[o.cnt][0].style.zIndex='0';
   clearTimeout(o[o.ary[o.cnt][2]]);
   this.animate(o,o.ary[o.cnt],o.ary[o.cnt][1],0,new Date(),o.ms);
   o.cnt=nu;
   o.ary[o.cnt][0].style.zIndex='1';
   clearTimeout(o[o.ary[o.cnt][2]]);
   this.animate(o,o.ary[o.cnt],o.ary[o.cnt][1],100,new Date(),o.ms);
  }
 },

 animate:function(o,ary,f,t,srt,mS,auto){
  var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
  if (isFinite(now)){
   this.opacity(ary[0],now);
   ary[1]=now;
  }
  if (ms<mS){
   o[ary[2]]=setTimeout(function(){ oop.animate(o,ary,f,t,srt,mS,auto); },10);
  }
  else {
   this.opacity(ary[0],t);
   ary[1]=t;
   if (o.auto&&t==100){
    oop.Auto(o.id,o.hold);
   }
  }
 },

 opacity:function(obj,opc){
  obj.style.filter='alpha(opacity='+opc+')';
  obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
 }


}


zxcFadeSS.init({
 ID:'mycarousel123', // the unique ID name of the parent DIV.                       (string)
 FadeDuration:1000,  //(optional) the fade duration on milli seconds.               (number, default = 1000)
 AutoHold:5000       //(optional) the auto rotate  hold' duration on milli seconds. (number, default = FadeDuration*2)
});

/*]]>*/
</script>

</body>

</html>

**round** · 10-25-2012, 02:10 PM

Hi vwphillips, ummmm..... I need to add this things? And if I add this thing, Will it affect other sliders? Sorry but I am scarred to see this code. I thought it may be simple. Now I think I am heavily wrong.

One more thing can please tell me how to make this slider continuous? (Means appart from fade).

Thanks vwphillips for your kind reply. I am trying this & let you inform.

**vwphillips** · 10-25-2012, 03:30 PM

the previous script will not interfere with your other scripts, nor will this simple slider

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[*/
#mycarousel123 {
  position:relative;width:352px;height:352px;border:solid red 1px;
}

#mycarousel123 IMG {
  width:352px;height:352px;border-Width:0px;float:left;
}

/*]]>*/
</style>

<script type="text/javascript">

var zxcSlider={

 init:function(o){
  var id=o.ID,oop=zxcSlider['zxc'+id],obj=document.getElementById(id),ms=o.SlideDuration,ms=typeof(ms)=='number'?ms:1000,hold=o.AutoHold,slide=obj.getElementsByTagName('DIV')[0],imgs=slide.getElementsByTagName('IMG'),ary=[],c,sz=0,z0=0,z1=0;
  obj.style.overflow='hidden';
  sz=imgs[0].width;
  slide.style.position='absolute';
  slide.style.width=3000+'px';
  c=imgs[0].cloneNode(true);
  slide.appendChild(c);
  o=zxcSlider['zxc'+id]={
   id:id,
   slide:slide,
   lgth:imgs.length-1,
   cnt:0,
   sz:sz,
   ms:ms,
   hold:typeof(hold)=='number'?hold:ms*2
  }
  this.Auto(id,o.hold);
 },

 Auto:function(id,ms){
  var o=zxcSlider['zxc'+id],oop=this;
  if (o){
   o.to=setTimeout(function(){ oop.GoTo(id,o.cnt+1,true); },o.hold);
  }
 },

 GoTo:function(id,nu,auto){
  var o=zxcSlider['zxc'+id],to;
  if (o){
   clearTimeout(o.to);
   clearTimeout(o.dly);
   o.auto=auto===true;
   to=o.sz*nu;
   if (to>o.sz*o.lgth){
    o.slide.style.left=0+'px';
    to=o.sz;
    nu=1;
   }
   o.cnt=nu;
   this.animate(o,o.slide.offsetLeft,-to,new Date(),o.ms);
  }
 },

 animate:function(o,f,t,srt,mS,auto){
  var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
  if (isFinite(now)){
   o.slide.style.left=now+'px';
  }
  if (ms<mS){
   o.dly=setTimeout(function(){ oop.animate(o,f,t,srt,mS,auto); },10);
  }
  else {
   o.slide.style.left=t+'px';
   if (o.auto){
    oop.Auto(o.id,o.hold);
   }
  }
 },

 opacity:function(obj,opc){
  obj.style.filter='alpha(opacity='+opc+')';
  obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
 }


}


</script>

<script type="text/javascript">

function Init(){

zxcSlider.init({
 ID:'mycarousel123',  // the unique ID name of the parent DIV.                       (string)
 SlideDuration:1000,  //(optional) the fade duration on milli seconds.               (number, default = 1000)
 AutoHold:5000        //(optional) the auto rotate  hold' duration on milli seconds. (number, default = FadeDuration*2)
});

}

if (window.addEventListener){
 window.addEventListener('load',Init, false);
}
else if (window.attachEvent){
 window.attachEvent('onload',Init);
}

</script>


</head>

<body>

 <div id="mycarousel123" class="catalogue_left">
  <div>
   <a href="#"><img id="wows1_0" src="http://xhtmljunkies.net/Magento/Alex/skin/frontend/default/alex/images/catalogue01.jpg" alt="product_fix" /></a>
   <a href="#"><img id="wows1_1" src="http://xhtmljunkies.net/Magento/Alex/skin/frontend/default/alex/images/catalogue02.jpg" alt="product_scroll_left" /></a>
  </div>
 </div>
<script> vic=0; </script>
<form name=Show id=Show style="position:absolute;visibility:visible;top:700px;left:0px;" >
<input size=100 name=Show0 >
<input size=10 name=Show1 >
<input size=10 name=Show2 >
<input size=10 name=Show3 >
<input size=10 name=Show4 >
<input size=10 name=Show5 >
<input size=10 name=Show6 >
<input size=10 name=Show7 >
<input size=10 name=Show8 >
<input size=10 name=Show9 ><br>
<textarea name=TA rows=1 cols=100 ></textarea>
</form>


</body>

</html>

**round** · 10-26-2012, 07:59 AM

Thank you vwphillips. You are simply great. You provide me both the solutions. Thank you for this. Now please just a last question...

I want to pause on mouse hover. Is it possible with this?

Thanks again vwphillips for your all help.

**vwphillips** · 10-26-2012, 09:45 AM

fade

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[*/
#mycarousel123 {
  position:relative;overflow:hidden;width:352px;height:352px;border:solid red 1px;
}

#mycarousel123 IMG {
  width:352px;height:352px;border-Width:0px;
}

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

var zxcFadeSS={

 init:function(o){
  var id=o.ID,oop=zxcFadeSS['zxc'+id],obj=document.getElementById(id),ms=o.FadeDuration,ms=typeof(ms)=='number'?ms:1000,hold=o.AutoHold,imgs=obj.getElementsByTagName('IMG'),ary=[],z0=0,z1=0;
  for (;z0<imgs.length;z0++){
   imgs[z0].style.position='absolute';
   imgs[z0].style.zIndex=z0>0?'0':'1';
   imgs[z0].style.left='0px';
   imgs[z0].style.top='0px';
   imgs[z0].style.width='100%';
   imgs[z0].style.height='100%';
   this.opacity(imgs[z0],z0>0?0:100);
   ary.push([imgs[z0],z0>0?0:100,'dly'+z0]);
  }
  o=zxcFadeSS['zxc'+id]={
   id:id,
   ary:ary,
   lgth:ary.length,
   cnt:0,
   ms:ms,
   hold:typeof(hold)=='number'?hold:ms*2
  }
  this.Auto(id,o.hold);
 },

 Auto:function(id,ms){
  var o=zxcFadeSS['zxc'+id],oop=this;
  if (o){
   o.dly=setTimeout(function(){ oop.GoTo(id,(o.cnt+1)%o.lgth,true); },ms||200);
  }
 },

 Pause:function(id,ms){
  var o=zxcFadeSS['zxc'+id];
  if (o){
   clearTimeout(o.dly);
   o.auto=false;
  }
 },

 GoTo:function(id,nu,auto){
  var o=zxcFadeSS['zxc'+id];
  if (o&&o.ary[nu]){
   clearTimeout(o.dly);
   o.auto=auto===true;
   o.ary[o.cnt][0].style.zIndex='0';
   clearTimeout(o[o.ary[o.cnt][2]]);
   this.animate(o,o.ary[o.cnt],o.ary[o.cnt][1],0,new Date(),o.ms);
   o.cnt=nu;
   o.ary[o.cnt][0].style.zIndex='1';
   clearTimeout(o[o.ary[o.cnt][2]]);
   this.animate(o,o.ary[o.cnt],o.ary[o.cnt][1],100,new Date(),o.ms);
  }
 },

 animate:function(o,ary,f,t,srt,mS,auto){
  var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
  if (isFinite(now)){
   this.opacity(ary[0],now);
   ary[1]=now;
  }
  if (ms<mS){
   o[ary[2]]=setTimeout(function(){ oop.animate(o,ary,f,t,srt,mS,auto); },10);
  }
  else {
   this.opacity(ary[0],t);
   ary[1]=t;
   if (o.auto&&t==100){
    oop.Auto(o.id,o.hold);
   }
  }
 },

 opacity:function(obj,opc){
  obj.style.filter='alpha(opacity='+opc+')';
  obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
 }


}


/*]]>*/
</script>


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

function Init(){

zxcFadeSS.init({
 ID:'mycarousel123', // the unique ID name of the parent DIV.                       (string)
 FadeDuration:1000,  //(optional) the fade duration on milli seconds.               (number, default = 1000)
 AutoHold:5000       //(optional) the auto rotate  hold' duration on milli seconds. (number, default = FadeDuration*2)
});

}

if (window.addEventListener){
 window.addEventListener('load',Init, false);
}
else if (window.attachEvent){
 window.attachEvent('onload',Init);
}

/*]]>*/
</script>


</head>

<body>

 <div id="mycarousel123" class="catalogue_left" onmouseover="zxcFadeSS.Pause('mycarousel123');" onmouseout="zxcFadeSS.Auto('mycarousel123');">
  <a href="#"><img id="wows1_0" src="http://xhtmljunkies.net/Magento/Alex/skin/frontend/default/alex/images/catalogue01.jpg" alt="product_fix" /></a>
  <a href="#"><img id="wows1_1" src="http://xhtmljunkies.net/Magento/Alex/skin/frontend/default/alex/images/catalogue02.jpg" alt="product_scroll_left" /></a>
  <a href="#"><img id="wows1_2" src="http://xhtmljunkies.net/Magento/Alex/skin/frontend/default/alex/images/catalogue01.jpg" alt="product_scroll_right" /></a>
 </div>


</body>

</html>

slide

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[*/
#mycarousel123 {
  position:relative;width:352px;height:352px;border:solid red 1px;
}

#mycarousel123 IMG {
  width:352px;height:352px;border-Width:0px;float:left;
}

/*]]>*/
</style>

<script type="text/javascript">

var zxcSlider={

 init:function(o){
  var id=o.ID,oop=zxcSlider['zxc'+id],obj=document.getElementById(id),ms=o.SlideDuration,ms=typeof(ms)=='number'?ms:1000,hold=o.AutoHold,slide=obj.getElementsByTagName('DIV')[0],imgs=slide.getElementsByTagName('IMG'),ary=[],c,sz=0,z0=0,z1=0;
  obj.style.overflow='hidden';
  sz=imgs[0].width;
  slide.style.position='absolute';
  slide.style.width=3000+'px';
  c=imgs[0].cloneNode(true);
  slide.appendChild(c);
  o=zxcSlider['zxc'+id]={
   id:id,
   slide:slide,
   lgth:imgs.length-1,
   cnt:0,
   sz:sz,
   ms:ms,
   hold:typeof(hold)=='number'?hold:ms*2
  }
  this.Auto(id,o.hold);
 },

 Auto:function(id,ms){
  var o=zxcSlider['zxc'+id],oop=this;
  if (o){
   o.to=setTimeout(function(){ oop.GoTo(id,o.cnt+1,true); },ms||200);
  }
 },

 Pause:function(id,ms){
  var o=zxcSlider['zxc'+id];
  if (o){
   clearTimeout(o.to);
   o.auto=false;
  }
 },

 GoTo:function(id,nu,auto){
  var o=zxcSlider['zxc'+id],to;
  if (o){
   clearTimeout(o.to);
   clearTimeout(o.dly);
   o.auto=auto===true;
   to=o.sz*nu;
   if (to>o.sz*o.lgth){
    o.slide.style.left=0+'px';
    to=o.sz;
    nu=1;
   }
   o.cnt=nu;
   this.animate(o,o.slide.offsetLeft,-to,new Date(),o.ms);
  }
 },

 animate:function(o,f,t,srt,mS,auto){
  var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
  if (isFinite(now)){
   o.slide.style.left=now+'px';
  }
  if (ms<mS){
   o.dly=setTimeout(function(){ oop.animate(o,f,t,srt,mS,auto); },10);
  }
  else {
   o.slide.style.left=t+'px';
   if (o.auto){
    oop.Auto(o.id,o.hold);
   }
  }
 },

 opacity:function(obj,opc){
  obj.style.filter='alpha(opacity='+opc+')';
  obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
 }


}


</script>

<script type="text/javascript">

function Init(){

zxcSlider.init({
 ID:'mycarousel123',  // the unique ID name of the parent DIV.                       (string)
 SlideDuration:1000,  //(optional) the fade duration on milli seconds.               (number, default = 1000)
 AutoHold:5000        //(optional) the auto rotate  hold' duration on milli seconds. (number, default = FadeDuration*2)
});

}

if (window.addEventListener){
 window.addEventListener('load',Init, false);
}
else if (window.attachEvent){
 window.attachEvent('onload',Init);
}

</script>


</head>

<body>

 <div id="mycarousel123" class="catalogue_left" onmouseover="zxcSlider.Pause('mycarousel123');" onmouseout="zxcSlider.Auto('mycarousel123');">
  <div>
   <a href="#"><img id="wows1_0" src="http://xhtmljunkies.net/Magento/Alex/skin/frontend/default/alex/images/catalogue01.jpg" alt="product_fix" /></a>
   <a href="#"><img id="wows1_1" src="http://xhtmljunkies.net/Magento/Alex/skin/frontend/default/alex/images/catalogue02.jpg" alt="product_scroll_left" /></a>
  </div>
 </div>

</body>

</html>