Question

I’ve got a simple carousel implementation which I’m trying to tweak a bit to match some very specific requirements.

There is an absolutely positioned overlay which highlights the first thumbnail of the carousel when the page first loads up.

When the mouse is moved over to another visible thumbnail in the carousel, I need it to slide across to that thumbnail, and update the text within the overlay to the new image number (out of x number of images).

Now, I have spent nearly a full day trying to get the animation to happen nicely. I’ve tried with multiple approaches, and I’m getting quite frustrated. It is probably due to my lack of CSS3 ninja-ness.

Here is a fiddle for the relavant HTML, CSS and jQuery carousel implementation which needs a working version of the slidy-boxy thing described above.

Answer 1

Here’s an updated version of the fiddle. Code is as follows for the <img> mouseover event:

// References to commonly used elements
var $ul = $(".carousel ul");
var $overlayImageCounter = $('.overlayImageCounter');

// Original offset of the overlay.  Use it to correct the position we'll be
// moving it to over each image.
var offset = $overlayImageCounter.position().left;

// Mouseover binding go now!
$(".carousel img.galleryThumb").mouseover(function() {

    // The image that triggered our mouseover
    $img = $(this);

    // Animate the overlay to the image's left position.
    // Correct for carousel's current left margin and overlay's original offset
    $overlayImageCounter.stop().animate({
        left: $img.position().left + parseInt($ul.css('marginLeft'), 10) + offset
    });

    // Update the text of the overlay
    $imageCounter.text($ul.find('img').index($img) + 1 + "/" + nThumbs);

});

The last bit of the code that would need to be tweaked is resetting the overlay’s left position on the carousel’s prev/next actions. I didn’t add this bit but it’s just a matter of animating the left property to its original offset.