Question

I’m trying to hook up the click event on a jQuery image carousel’s images so that it updates a select list in the same document and sets the “selected” option to match the item that was clicked in the carousel. The “title” attribute on each of the carousel images matches at least one option in the select list (title is always unique).

For example:

1) carousel image titles are: image1, image2, image3

<div id="carousel">
<ul>
    <li><img src='folder1/screenshot.jpg' title=image1 /></li>
    <li><img src='folder2/screenshot.jpg' title=image2 /></li>
    <li><img src='folder3/screenshot.jpg' title=image3 /></li>
</ul>
</div>

2) select list options are…

<select id="myThumbs">
    <option>image1</option>
    <option selected="selected">image2</option>
    <option>image3</option>
</select>  

My existing code is below, which already binds the hover event to a preview div outside the carousel. I want to keep this behavior, and also add the click behavior to update the selected item in the options list so that it matches the title of the carousel image that was clicked.

$(function() {
    $("#carousel").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev",
        visible: 6,
        mouseWheel: true,
            speed: 700
    });
$('#carousel').show();

$('#myThumbs').change(function() {
  var myImage = $('#myThumbs :selected').text();
 $('.selectedImage img').attr('src','../wp-content/themes/mytheme/styles/'+myImage+'/screenshot.jpg');
});

    $('#carousel ul li').click(function(e) {
    var myOption = $(this).children('img').attr('title');
    $('#myThumbs').addOption('Text', myOption);
    });

$('#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; ?>');});
});

Answer 1

If you want to keep a 1:1 relationship between a select & an image you would need to reset all the select options and keep just the one you want so…

   $('#carousel ul li').click(function(){
    var myOption = $(this).children('img').attr('title');
    $('#myThumbs').addOption('Text', myOption);
     $('#myThumbs option').each(function(){
       if($(this).text()=myOption){
         $(this).attr('selected','true')
       }else{
         $(this).attr('selected','false')
       }
     }

that code hasn’t been tested so you might need to tweak it.