views:

84

answers:

4

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.

+2  A: 

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');
        });
    });
}
fehays
+3  A: 

$(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.

dclowd9901
I used yours and Jeromes code to create what I needed. I didn't want lots of IDs so this work perfectly. Cheers
Craig Ward
Glad to hear it. Welcome to SO.
dclowd9901
+2  A: 

Hello,

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

Jerome WAGNER
Cheers Jerome, It worked perfectly but I changed`var thumb_src = $(this).attr('src');` to `var thumb_src = $(this).attr('rel');` and put the link to the large file in the rel attribute as per dclowd9901 said in their post.Cheers all
Craig Ward
A: 

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"&gt;
<img class="thumbnail" src="http://www.bioneural.net/wp-content/uploads/2008/02/jquery.jpg"&gt;
<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/

agscala
Hi Agscala, I may try this on something else I have in mind but for this wouldn't I still end up with repeated code?
Craig Ward
Not necessarily. What you want to do is put the same class on all of your images that you wish to have the desired effect on: I'll modify my example so you can see!
agscala