PDA

View Full Version : Jcarousel Fade Effect



round
10-25-2012, 11:50 AM
http://xhtmljunkies.net/Magento/Alex/index.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;


#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


<!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


<!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


<!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


<!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>

round
10-26-2012, 10:10 AM
Thank you vwphillips. Thank you very much. God Bless You By Heart :)