Question

I have the following code that changes the fullsize image by hovering over the thumb image –

<script type="text/javascript">
    $('.thumbimage a img').on('hover',function(){
            $('.fullsizeimage a img').attr('src',$(this).attr('src'));
        });
</script>

how do I set it up so that it only changes the fullsize image above it, and every other fullsize image?

I tried the following with no luck :

 <script type="text/javascript">
        $('.thumbimage a img').on('hover',function(){
            $('.thumbimage a img').prev('.fullsizeimage a img').attr('src',$(this).attr('src'));
        });
        </script>

http://jsfiddle.net/CUZBa/19/

Answer 1

Looks like row is a parent element.

$('.thumbimage a img').on('click hover', function() {
    $(this).parents('.row').find('.fullsizeimage img').attr('src', $(this).attr('src'));
});​