The code below allows me to change a preview image outside the carousel widget so that it matches the element under the mouse. For example, if the user mouses over image2's thumbnail, the script updates .selectedImage so that it displays image2's full size version.
I'd like to enhance it so that the #myThumbs options listing updates its "selected" option to match the carousel image that receives a click.
Mouseover changes the preview image and click changes the select list to match the same name.
The items in the carousel will have the same title attribute as the items in the select list, so I would expect that I can pass that value from the carousel to the select list.
$(function() {
$("#carousel").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
visible: 6,
mouseWheel: true,
speed: 700
});
$('#carousel').show();
$('#carousel ul li').hover(function(e) {
var img_src = $(this).children('img').attr('src');
$('.selectedImage img').attr('src',img_src);
}
,function() {
$('.selectedImage img').attr('src', '<?php echo $selectedThumb; ?>');});
});
<select id="myThumbs">
<option>image1</option>
<option selected="selected">image2</option>
<option>image3</option>
</select>
