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.

The problem is that Eclipse Galileo doesn’t work right with the new version of gtk (gtk+ 2.18), and therefore all the Eclipse GUI is unusable.
In particular I’ve noted that click of mouse are not intercepted correctly and also some interface redraw (for example if I change perspective or move some bar) doesn’t work.

Now, this morning I’ve found the bug and also a workaround for the moment.
Just open a terminal, then give this command export GDK_NATIVE_WINDOWS=true and finally launch eclipse from the same terminal.

Open Source community it’s amazing!

Update
Now eclipse packaged in Ubuntu official repository work without above trick. Simply install eclipse 3.5.1-0ubuntu7 (or later) from the Ubuntu archive.
Eclipse version in the official eclipse site doesn’t work right yet. (See #28 in this bug for a complete explanation of this Eclipse bug)

I assume you have installed Trac on your local server, or on your Dreamhost account. To enable communication between Trac and Mylyn we have to install and enable the XmlRpcPlugin that you can download from trac-hacks.

After the download, copy your plugin on the system where Trac is installed. Uncompress the archive and go to the 0.10 folder if you have Trac 0.10 or trunk folder otherwise.

Now digit these commands:

chmod 755 -R *
python setup.py bdist_egg

Wait until the Python egg is created and then copy it into the plugins directory of your Trac environment. The egg file is in the dist directory created during the egg building.

Now go into your Admin account of your Trac web interface and go to Plugins page. You’ll see a TracXMLRPC 0.1 field. Clicking on it you’ll see some component. You have to enable these components as shown in the next figure.

Well we’ve almost done. Now we have to install Mylyn and Mylyn extras into Eclipse.

Start Eclipse and click on Help -> Software Updates. Click on the Availabe Software tab. Click on Add Site button and paste these two “repository”:

http://download.eclipse.org/tools/mylyn/update/e3.4

http://download.eclipse.org/tools/mylyn/update/extras

Now select to install these features:

Wait until Eclipse asks you to restart to update changes and then you’ll be able to use Mylyn with your Trac environment.

He explains how to use the correct polymorphic approach instead of a succession of if/switch statements. Polymorphism is better because it lets everybody to understand, to extend and to test the code.

Watch the video at: http://googletesting.blogspot.com/2008/12/by-miko-hevery-google-tech-talks.html