jQuery carousel > hover on carousel image shows full size preview in a separate div

Question

The markup below is used for my jQuery carousel widget. The first div serves as a preview div for the currently selected template thumbnail. When a user mouseover event occurs inside the carousel on any thumbnail image, I'd like the preview image to update to show the full size thumbnail of that image (and then revert back to the default onmouseout).

The carousel images and the preview image are the same size, I'm just setting the size of the carousel images via css to appear smaller.

//this is my full size preview image
<div class="selectedImage">
    <img src="../wp-content/themes/mytheme/screenshot.jpg" />
</div>
// this is the element that moves the carousel images
<a href="#"><img class="prev" src="../wp-content/themes/mytheme/more.jpg" /></a>

//This is the carousel. I'd like hover events to update the preview image
// with the mouseover image, but revert back to the default onmouseout.
<div class="carousel">
    <ul>
        <li><img src="../wp-content/themes/mytheme/screenshot1.jpg" class="selected" /></li>
        <li><img src="../wp-content/themes/mytheme/screenshot2.jpg" class="selected" /></li>
        <li><img src="../wp-content/themes/mytheme/screenshot3.jpg" class="selected" /></li>        
    </ul>
</div>

btw, I'm using the jcarousellite_1.0.1.min.js plugin for the carousel.

Answer 1

DEMO: http://jsbin.com/uyupu

$(function() {
    $(".carousel").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev"
    });

  $('.carousel ul li').hover(function(e) {

  var img_src = $(this).children('img').attr('src');
  $('.selectedImage img').fadeOut(200).attr('src',img_src).fadeIn(200);  

}
,function() {

//do here what you want, or simply hide image!
$('.selectedImage img').fadeOut(200);
   });

});