Condensing repeating JQuery code

Question

I have a page that has a large image on it with a number of thumbnails. When you mouse over a thumbnail the main image changes to the image you have just rolled your mouse over. The problem is the more thumbnails I have, the more repeated code I have. How could I reduce it?

The Jquery code is as follows.

<script type="text/javascript">  
    $('#thumb1')
.mouseover(function(){  
$('#big_img').fadeOut('slow', function(){  
$('#big_img').attr('src', '0001.jpg');  
$('#big_img').fadeIn('slow');  
            });  
        });  
    $('#thumb2')  
        .mouseover(function(){  
            $('#big_img').fadeOut('slow', function(){  
                $('#big_img').attr('src', 'p_0002.jpg');  
                $('#big_img').fadeIn('slow');  
            });  
        });  
     $('#thumb3')  
        .mouseover(function(){  
    $('#big_img').fadeOut('slow', function(){  
                $('#big_img').attr('src', '_img/p_0003.jpg');  
                $('#big_img').fadeIn('slow');  
            });  
        });  
     $('#thumb4')  
        .mouseover(function(){  
            $('#big_img').fadeOut('slow', function(){  
                $('#big_img').attr('src', '0004.jpg');  
                $('#big_img').fadeIn('slow');  
            });  
        });  
</script>

#big_img = the ID of the full size image

#thumb1, #thumb2, #thumb3, #thumb4 = The ID's of the thumbnails

The main code for the page is PHP if that helps.

Answer 1

First of all, you should modify your code so that each thumbnail has an easy to find 'class'.

Assuming you have

<img id="thumb1" scr=""/>
<img id="thumb2" scr=""/>
..

your html should look like

<img id="thumb1" class='thumb' scr=""/>
<img id="thumb2" class='thumb' scr=""/>
..

Second you should make sure that you have an identifiable pattern between all you thumbnails and their big image counterpart. In your code we have

0001.jpg
p_0002.jpg
_img/p_0003.jpg
0004.jpg

what is your organization for your files ?

Let's imagine for now that the thumbnails have the same src as the bug images

The jQuery code would be shrinked to :

$('.thumb').mouseover(function(){

    var thumb_src = $(this).attr('src');

    // ==> add code here to transform thumb_src into the big_img src

    $('#big_img').fadeOut('slow', function(){
        $('#big_img').attr('src', thumb_src);
        $('#big_img').fadeIn('slow');
    });
});

This code should work and just waits for the algorithm that transforms the src of the thumb into the src of the big image

I hope this will help you Jerome Wagner

Answer 2

$(this) is your friend. You also need to develop some sort of nomenclature that you can use to match up your file names and your id's. What I normally do is use PHP to generate the HTML, but put in special attributes that handle the file names:

// PHP GeneratedContent

<?php

while(/* some range */) {
    $i = 1;
    $output .= '<element class="thumb" rel="p_' . $i . '.jpg">';
    $i++;
}

echo $output;
?>

Then I'll go about the next step:

$('.thumb').mouseover( function() {
    var link = $(this).attr('rel');

    /* Now that you have the link, just put it into whatever function you need to */
});

Fehays method definitely works, but this way, you won't have tons of needless IDs, and you won't have to make the unnecessary parameter transfer. It will automatically propogate to every instance in the DOM with the class thumb.

Answer 3

You could just write a function I think.

applyImageFade('#thumb1','0001.jpg');
applyImageFade('#thumb2','p_0002.jpg');
//etc...

function applyImageFade(thumbId, image) {
    $(thumbId).mouseover(function(){
        $('#big_img').fadeOut('slow', function(){
            $('#big_img').attr('src', image);
            $('#big_img').fadeIn('slow');
        });
    });
}

Answer 4

I think the cleanest thing you could do would be to extend jQuery to include the functionality you want:

//random images pulled off of Google Image Search
src1 = "http://www.o3mobi.com/jquery.jpg";
src2 = "http://www.bioneural.net/wp-content/uploads/2008/02/jquery.jpg";

$.fn.fadeToSrc = function(src, speedOut, speedIn, callback) {
    return this.fadeOut(speedOut, function() {
        $(this).attr('src', src).fadeIn(speedIn, callback);
    });
};

$("#image").click(function () {
    $(this).fadeToSrc(src2, 1000, 4000);
});

You can test it here! http://jsfiddle.net/jPYyZ/

====== Update =======

If you want to do a mouseover thumbnail/preview system, this is all it takes:

//HTML
<img class="thumbnail" src="http://www.o3mobi.com/jquery.jpg">
<img class="thumbnail" src="http://www.bioneural.net/wp-content/uploads/2008/02/jquery.jpg">
<img id="fullsized">


//CSS
​.thumbnail {
    width: 5em;
    height: 5em;
}

#fullsized {
    width: 10em;
    height: 10em;
    border: 2px solid red;
}​


//JAVASCRIPT
$.fn.fadeToSrc = function(src, speedOut, speedIn, callback) {
    return this.fadeOut(speedOut, function() {
        $(this).attr('src', src).fadeIn(speedIn, callback);
    });
};

$(".thumbnail").mouseover(function () {
    var newsrc = $(this).attr("src");
    $("#fullsized").fadeToSrc(newsrc, 1000, 1000);
});

​You can test/tinker around with this one here: http://jsfiddle.net/AhwH7/