CODEWITHSUNDEEP
jqueryjcarousel
Phil
Phil

Reputation: 4092

jQuery - jCarousel - FadeIn

I am using the plugin jCarousel (http://sorgalla.com/projects/jcarousel/) and rather than the images slide in (like in the "Carousel with autoscrolling" demo)

I would like the images to fade in. The usage is a jCarousel that auto scrolls and only shows one element at a time. But I looked at Cycle plugin but it didn't seem to work with my scenario as the element I want to show contains text and an image.

Thanks if anyone can help with this.

Phil

Upvotes: 3

Views: 19702

Answers (6)

bebefx
bebefx

Reputation: 61

You can simulate a fading effect even though jCarousel knows only to scroll the slides:

$('#yourContainer').jcarousel({
    visible: 1,
    scroll: 1, 
    itemLoadCallback: {
        onBeforeAnimation: mycarousel_fadeOut,
        onAfterAnimation: mycarousel_fadeIn
    }
});

function mycarousel_fadeOut(carousel) {
    var JCcontainer = carousel.clip.context; 
    $(JCcontainer).fadeOut(); 
}

function mycarousel_fadeIn(carousel) {
    var JCcontainer = carousel.clip.context; 
    $(JCcontainer).fadeIn(); 
}

This way you fade out the container before the scrolling animation begins and fade it back in after it's finished without seeing anything else than the fading effect.

Upvotes: 6

Gappa
Gappa

Reputation: 11

For the 0.3.x jCarousel version I went with this:

   var carousel = $('.jcarousel').jcarousel({
      list        : '.items',
      items       : '.i',
      wrap        : 'both', // for good measure
      animation: {
          duration: 0 // swap slides immediately
      }
   }).jcarouselAutoscroll({
      interval: 1000 * 5,
      target: '+=1',
      autostart: true
   });

   // fade hack
   carousel.jcarousel('items').hide();
   carousel.jcarousel('first').show();
   carousel.on('jcarousel:visiblein', function(event, carousel) {
      $(event.target).fadeIn();
   });
   carousel.on('jcarousel:visibleout', function(event, carousel) {
      $(event.target).fadeOut();
      carousel._trigger('animateend'); // the event doesn't fire when items are positioned absolutely (so autoscroll wouldn't work), fire manually
   });

some css to make it work:

   .items {height: 450px;}
   .i     {position: absolute;}

Upvotes: 1

ogaltsev
ogaltsev

Reputation: 131

Try this:

var jcarousel = $('#yourContainer');

    jcarousel.jcarousel({
        animation: {
            duration: 0 // make changing image immediately
        }
    });

    // make fadeIn effect
    jcarousel.on('jcarousel:animate', function (event, carousel) {
        $(carousel._element.context).find('li').hide().fadeIn(1000);
    });

Upvotes: 6

stanleyhlng
stanleyhlng

Reputation: 51

var mycarousel_fadeOut = function(carousel, state) {
    if (state !== "init") {
        $(carousel.clip.context).find('img').fadeOut(800);
    }
};

var mycarousel_fadeIn = function(carousel, state) {
    if (state !== "init") {
        $(carousel.clip.context).find('img').fadeIn(800);
    }
};

Upvotes: 1

Jamie
Jamie

Reputation: 21

Changing the functions to this works, sort of (you may still see the scroll too):

function mycarousel_fadeOut(carousel) { 
   var JCcontainer = carousel.clip.context; 
   $(JCcontainer).fadeOut(); 
} 

function mycarousel_fadeIn(carousel) { 
   var JCcontainer = carousel.clip.context; 
   $(JCcontainer).fadeIn(); 
}

Upvotes: 2

Andy Gaskell
Andy Gaskell

Reputation: 31761

The Cycle plugin will work with text and an image. Scroll down to the Callbacks section on this page to see Cycle working with text.

Upvotes: 0

Related Questions