Scrollable and overlay Created Jan 19, 2010

I guess I can use some sort of api : getClickIndex() to get the clicked item?
But I haven't had any luck with the api...

<script>
$(document).ready(function() {
$("img[rel]").overlay();

$("#chained").scrollable({size: 1, loop: false, speed: 500}).circular().navigator().autoscroll({
steps: 1,
interval: 9000
});
});
</script>

With this code I get the "rel" to change in the overlay image, but it still don't work. I think It's because the code are in the $(function() so It have already set the "rel" of the images. Have anyone got an idea how to do?

<script>
$(function() {

$("#rulle .items a").click(function() {

var relpop = $(this).attr("rel");
$("#image_wrap a").attr('rel', relpop);
})

$("#rulle.scrollable").scrollable();

$("#rulle .items img").click(function() {

var url = $(this).attr("src");
var wrap = $("#image_wrap").fadeTo("medium", 0.5);
var img = new Image();
img.onload = function() {
wrap.fadeTo("fast", 1);
wrap.find("img").attr("src", url);
};
img.src = url;
}).filter(":first").click();

$("#image_wrap a[rel]").overlay();

});
</script>

I want exactly the same thing you are looking for ...
I`ll appreciate sharing your successful results.

Regards

I dont have the solution in front of me..
But I finally used the gallery plugin, something like this:

$(function() {

$("#rulle.scrollable").scrollable();

$("#rulle .items img").click(function() {
var relpop = $(this).attr("rel");
var refpop = 'images/'+ relpop;
$("#image_wrap img").attr('rel', '#'+ relpop);
$("#pop0").attr('href', refpop);
})

$("#rulle .items img").click(function() {

var url = $(this).attr("src");
var wrap = $("#image_wrap").fadeTo("medium", 0.5);
var img = new Image();
img.onload = function() {
wrap.fadeTo("fast", 1);
wrap.find("img").attr("src", url);
};
img.src = url;
}).filter(":first").click();

$("#image_wrap a").overlay({
target: '#gallery'
}).gallery({
});

});