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