caktux

caktux putting things together

  • blog
  • projects
  • about
Home » Blogs » caktux's blog

Fully circular jCarousel for fancy content switching

by caktux | Sat, 01/31/2009 - 00:52

Following Jan Sorgalla's example of a circular carousel, I had to do get this working with switching content associated with each carousel item. Since the circular carousel solution simply reloads items after each other, we have to keep track of what is where. In my case it was team members of a company website, and you want their name and info to keep up with their picture moving left and right.

// Example of fancy content loading function to keep it simple since the animation is not the point, you're free to let your divs fly around as you want
switchTeamContent = function(i) {
  $('.fancy_content_item').slideUp('fast');
  $('.fancy_content-'+i).slideDown('normal');
};
 
var mycarousel_itemList = [];
var mycarousel_itemHTML = [];
$('.jcarousel-skin-yourskin .jcarousel-list li').each(function(i){
  var thisimg = $(this).find('img');
  mycarousel_itemList[i] = {
    url: thisimg.attr('src'),
    title: thisimg.attr('title')
  };
  mycarousel_itemHTML.push($(this).html());
});
mycarousel_itemVisibleInCallback = function (carousel, item, i, state, evt) {
  var idx = carousel.index(i, mycarousel_itemList.length);
  carousel.add(i, mycarousel_itemHTML[idx - 1]);
};
mycarousel_itemVisibleOutCallback = function (carousel, item, i, state, evt) {
  carousel.remove(i);
};
var outOpacity = 0.7;
switchOffCarouselItem = function(li,animate) {
  if (animate) {
    $(li).fadeTo('normal',outOpacity).removeClass('active');
  } else {
    $(li).css('opacity',outOpacity).removeClass('active');
  }
};
onSwitchCarousel = function(carousel,li,i,state,name,last) {
  switch(state) {
    case 'init':
      switchOffCarouselItem(li);
      break;
    case 'next':
      if (last) {
        switchOffCarouselItem(li);
      } else {
        switchOffCarouselItem(li,true);
      }
      break;
    case 'prev':
      if (last) {
        switchOffCarouselItem(li,true);
      } else {
        switchOffCarouselItem(li);
      }
      break;
  }
  if (last) {
    $(li).prev().fadeTo('normal',1).addClass('active');
    var idx = carousel.index(i, mycarousel_itemList.length);
    if (idx == 1) {
      switchTeamContent(mycarousel_itemList.length);
    } else {        
      switchTeamContent(idx - 1);
    }
  }
};
onSwitchToLast = function(carousel,li,i,state,name) {
  onSwitchCarousel(carousel,li,i,state,name,true);
};
 
$('#team_carousel').jcarousel({
  scroll: 1,
  wrap: 'circular',
  itemVisibleInCallback: {onBeforeAnimation: mycarousel_itemVisibleInCallback},
  itemVisibleOutCallback: {onAfterAnimation: mycarousel_itemVisibleOutCallback},
  itemFirstInCallback: {onBeforeAnimation: onSwitchCarousel},
  itemLastInCallback: {onBeforeAnimation: onSwitchToLast}
});

It should work with any jcarousel skin that already works, CSS is a beautiful thing.

I'll post a link to the finished product or get a demo up pretty soon.

 
  • caktux's blog
  • Add new comment
  • jcarousel
  • jquery
 
 

Comments

by Anonymous | Wed, 09/02/2009 - 15:29

Demo

Do you have a for this post? I am looking for something similar and hoping you have a solution. Thanks

  • reply
 
  • Seeding torrents from your Trash with Transmission
  • Image placement module for Drupal 6
  • Loader module for Drupal - Page loading progress evolved
  • SUY! jQuery UI based "IE6 is outdated" notification plugin
  • Page loading progress with jQuery
  • D7UX mindmap
  • Display problems with NVidia card on OS X and bad website CSS
  • Rollovers take #2009
  • Fully circular jCarousel for fancy content switching
  • Sliding thumbnail links
more

lately...

  • January 2009 (4)
  • February 2009 (2)
  • April 2009 (3)
  • May 2009 (3)
  • June 2009 (3)

hey!

Using something I did and made a few bucks out of it?
 
© Vincent Gariépy
Powered by Pressflow, an open source content management system