How to give a click function for center | focus image in roudabout carousel?

Question

I am trying to give click function to focus image (center image) in jQuery round about carousel .

http://fredhq.com/projects/roundabout/demos/images in this url I need click function which should go to other web page. I need this function only for center(focus) image not for other child images . For other image it should come in focus and then I need click even to happen.

For example :

On click of the center or focus image I need to go to (open new window) google.com

Questions :

1. Is there any way to call a onclick event for focus image ?
2. If its not possible through roundabout carousel is there any other carousel which supports this.
3. http://fredhq.com/projects/roundabout Is there any API I can use for this on click event?

Answer 1

You can take advantage of the focus event which is fired by the plugin:

$('li').bind('focus', function(e){ console.log(e.target); })

Where li are the children nodes of the HTML for the roundabout and e.target will be the DOM element which is currently in focus/front-and-center of the carousel.

Update

I realized that just the focus event isn't quite all that you need, since you are looking to do something when the focused element is clicked. For this case, you can use jQuery's on() method or delegate() (depending on what version of jQuery you are using)

// jQuery >= 1.7
$('ul').on('click', '.roundabout-in-focus', function(e) { console.log(this); });

// jQuery >= 1.4.2
$('ul').delegate('.roundabout-in-focus', 'click', function(e){ console.log(this); })

This uses event delegation to attach a listener to the parent ul node which will only fire when the element which was clicked has the class roundabout-in-focus which it looks like the roundabout plugin gives the focused class by default, thought I'm not 100% sure that is guaranteed to always be the case. In the callback, this refers to the li element which was clicked.