Condensation répéter le code JQuery

Question

J'ai une page qui a une grande image avec un certain nombre de vignettes. Lorsque vous passez la souris sur une miniature les principaux changements d'image à l'image que vous venez roulé votre souris sur. Le problème est plus vignettes que j'ai, le code plus je répète. Comment pourrais-je réduire?

Le code Jquery est le suivant.

<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 = l'ID de l'image en taille réelle

#thumb1, #thumb2, #thumb3, #thumb4 = les ID des vignettes

Le code principal de la page est PHP si cela aide.

Answer 1

Tout d'abord, vous devez modifier votre code afin que chaque vignette a un outil facile à trouver « classe ».

En supposant que vous avez

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

votre html devrait ressembler à

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

Deuxièmement, vous devez vous assurer que vous avez un motif identifiable entre vous toutes les vignettes et leur grande contrepartie d'image. Dans votre code, nous avons

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

Quelle est votre organisation pour vos fichiers?

Imaginons maintenant que les vignettes ont le même src que les images de bugs

Le code jQuery serait à rétreint:

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

Ce code devrait fonctionner et attend juste pour l'algorithme qui transforme le src du pouce dans le src de la grande image

J'espère que cela vous aidera Jérôme Wagner

Answer 2

$(this) est votre ami. Vous devez également développer une sorte de nomenclature que vous pouvez utiliser pour correspondre à vos noms de fichiers et vos id. Ce que je fais d'habitude est d'utiliser PHP pour générer le code HTML, mais mis dans les attributs spéciaux qui gèrent les noms de fichiers:

// PHP GeneratedContent

<?php

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

echo $output;
?>

Alors je vais à l'étape suivante:

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

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

méthode Fehays fonctionne vraiment, mais de cette façon, vous ne serez pas avoir des tonnes d'ID inutiles, et vous ne devez effectuer le transfert des paramètres inutiles. Il automatiquement à chaque instance se propager dans les DOM avec la thumb classe.

Answer 3

Vous pouvez simplement écrire une fonction que je pense.

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

Je pense que la plus propre chose que vous pourriez faire serait d'étendre jQuery pour inclure la fonctionnalité que vous voulez:

//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);
});

Vous pouvez le tester ici! http://jsfiddle.net/jPYyZ/

Mise à jour ====== =======

Si vous voulez faire un système miniature mouseover / aperçu, cela est tout ce qu'il faut:

//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);
});

Vous pouvez tester / bricoler avec celui-ci ici: http://jsfiddle.net/AhwH7/