Search code examples
javascriptjqueryfancyboxjcarousel

jCarousel: Get the filename (path) of the image which is currently shown (only one at a time)

I have an enlarge-button near the slider. Now I want to change the href attribute of the anchor for my fancybox. For this reason I need to get the current image of the jCarousel. Since the file path is always the same I wouldn't need the path but if I get path + filename it would be also OK. I think I have to traverse the DOM and set the href attribute of the anchor.

This is what I have so far:

function getCurrImage(carousel, state){
   /*alert(carousel.first);*/
}

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        scroll:1,
        'itemLoadCallback': getCurrImage 
    });
});

This gives me the index of the current picture in the slider (e.g. 1). Also this function is called multiple times (don't know why). Here is my pseudo-code:

var imagepath = jQuery.find(".jcarousel-item:nth-child(carousel.first)".a.img.attr("src");
jQuery.find(a.enlarge).attr("href",imagepath);

Would this work?

Edit:

This seems to work: 

function getCurrImage(carousel, state){
    var currentImage = carousel.first-1;
    var path = jQuery(".jcarousel-item").eq(currentImage).children('a').attr("href");
    jQuery("A.enlarge").attr("href", path);
}

But my idea didn't worked as expected. Normally I have three items in my gallery. Now I have four (duplicate content) in the fancybox and I'm on the last position. I hoped to have only three elements and the one which is currently shown in jCarousel should be enlarged in fancybox. So I have to look for another possibility...

Solution

  • If I've understood what you mean, this should work:

    function getCurrImage(carousel, state){
    var currentImage = carousel.first;
    var path = $(".jcarousel-item").eq(currentImage).attr("src");
    $("A.enlarge").attr("href", path);
}