Results 1 to 9 of 9

Thread: Jcarousel Fade Effect

  1. #1
    Join Date
    Apr 2012
    Posts
    81
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default Jcarousel Fade Effect

    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?

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,971
    Thanks
    16
    Thanked 308 Times in 306 Posts
    Blog Entries
    11

    Default

    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
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Apr 2012
    Posts
    81
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    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.

  4. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,800
    Thanks
    2
    Thanked 420 Times in 414 Posts

    Default

    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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  5. #5
    Join Date
    Apr 2012
    Posts
    81
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    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.

  6. #6
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,800
    Thanks
    2
    Thanked 420 Times in 414 Posts

    Default

    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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  7. #7
    Join Date
    Apr 2012
    Posts
    81
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    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.

  8. #8
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,800
    Thanks
    2
    Thanked 420 Times in 414 Posts

    Default

    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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  9. #9
    Join Date
    Apr 2012
    Posts
    81
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    Thank you vwphillips. Thank you very much. God Bless You By Heart

Similar Threads

  1. Fade-in slideshow clashing with jcarousel
    By londontyler in forum JavaScript
    Replies: 2
    Last Post: 05-18-2010, 04:04 PM
  2. fade effect
    By lelu in forum JavaScript
    Replies: 2
    Last Post: 12-17-2006, 09:52 AM
  3. fade in effect
    By dude9er in forum JavaScript
    Replies: 2
    Last Post: 10-18-2006, 07:08 PM
  4. Replies: 0
    Last Post: 04-24-2006, 08:31 PM
  5. Fade effect in Ultimate Fade-in slideshow
    By chali in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 01-10-2006, 04:37 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •