DevOnLinux

In these months i have worked on an ecommerce project with a lot of products’ list. Since the customer had asked a carousel solution to show her products, we have chosen for jCarousel, an amazing plugin for jQuery.

jCarousel is great and highly configurable but it has a small lack: it does not remember the position of the carousel when a user came back to product list page after a quick view of a product detail.

I came out with a simple but practical solution that solves this problem using the support of cookies.

To do this we need few lines of Javascript.

First of all we have to manage our cookies. We can use pure javascript or jQuery thanks to jQuery Cookie. I’ll use the latter in the example above.

var inNum;
var outNum;
var COOKIE_NAME = "my_carousel_position";

// MANAGE COOKIES
function setCookie(cName, cValue, cDaysNum)
{
  var date = new Date();
  date.setTime(date.getTime() + (cDaysNum * 24 * 60 * 60 * 1000));
  $.cookie(cName, cValue, {  expires: date });
  return false;
}

function getCookie(cName)
{
  return $.cookie(cName);
}

function delCookie(cName)
{
  date = "Thu, 01-Jan-70 00:00:01 GMT";
  $.cookie(cName, null, {  expires: date });
  return false;
}
// END MANAGE COOKIES

function mycarousel_itemVisibleOutCallback(carousel, item, i, state, evt)
{
  outNum = i;
  setPosition();
};

function mycarousel_itemVisibleInCallback(carousel, item, i, state, evt)
{
  inNum = i;
};

// calculate first visible item
function getFirstVisibleItemId(inNum, outNum)
{
  minVal = Math.min(inNum, outNum);
  if(inNum == minVal){
    minVal--;
  }
  return minVal;
}

//set new carousel position in cookie
function setPosition()
{
  position = getFirstVisibleItemId(inNum, outNum)
  if(position >= 0 ){
    value = position+1;
    setCookie(COOKIE_NAME, value, 1);
  }
}

//retrieves carousel position from cookie
function getPosition()
{
  startVal = 1;
  var cookieVal = getCookie(COOKIE_NAME);
  if(cookieVal != ""){
    startVal = parseInt(cookieVal);
  }else{
    delCookie(COOKIE_NAME);
  }
  return startVal;
}

jQuery(document).ready(function() {
  startPosition = getPosition();
  jQuery('#mycarousel').jcarousel({
    scroll: 1,
    animation: 500,
    start: startPosition,
    itemVisibleOutCallback: {onAfterAnimation: mycarousel_itemVisibleOutCallback},
    itemVisibleInCallback: {onAfterAnimation: mycarousel_itemVisibleInCallback}
  });

});

First of all i declare three vars. The last of the three ( COOKIE_NAME ) is the name to assign to your cookie. Next there are three functions to manage cookies using jQuery Cookie plugin: getCookie, setCookie and delCookie.

Next there are mycarousel_itemVisibleInCallback and mycarousel_itemVisibleOutCallback. These functions simply retrieve the position of the carousel’s edges and store them in two global vars inNum and outNum previously declared.

mycarousel_itemVisibleOutCallback function also calls setPosition function that stores the correct carousel start value inside the specified cookie.

At the end there is getPosition function, that retrieves the starting position value from the cookie. This value is assigned to start parameter inside jcarousel initialization.

You can see an example here (i have edited an example of jCarousel website) or download it.