Condensazione ripetendo codice JQuery

Question

Ho una pagina che ha un grande immagine su di esso con un numero di miniature. Quando il mouse su una miniatura le principali variazioni di immagine per l'immagine che si è appena rotolato il mouse sopra. Il problema è che i più miniature che ho, il codice più ripetuto che ho. Come avrei potuto ridurlo?

Il codice jQuery è la seguente.

<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 della immagine full size

#thumb1, #thumb2, #thumb3, #thumb4 = L'ID del delle miniature

Il codice principale della pagina è PHP se funziona.

Answer 1

Prima di tutto, si dovrebbe modificare il codice in modo che ciascuna miniatura ha un facile da trovare 'classe'.

Supponendo di avere

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

tuo html dovrebbe essere simile

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

In secondo luogo è necessario assicurarsi di avere un modello identificabile tra tutti voi le miniature e le loro grande controparte immagine. Nel codice abbiamo

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

qual è la sua organizzazione per i tuoi file?

Immaginiamo per ora che le miniature hanno la stessa src delle immagini di bug

Il codice jQuery sarebbe rimpiccioliti a:

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

Questo codice dovrebbe funzionare ea pochi attende l'algoritmo che trasforma lo src del pollice nel src della grande immagine

Spero che questo vi aiuterà Jerome Wagner

Answer 2

$(this) è tuo amico. È inoltre necessario sviluppare un qualche tipo di nomenclatura che è possibile utilizzare per abbinare i nomi di file e le vostre di id. Quello che faccio di solito è l'uso di PHP per generare il codice HTML, ma messo in attributi speciali che gestiscono i nomi dei file:

// PHP GeneratedContent

<?php

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

echo $output;
?>

Poi andrò al prossimo passo:

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

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

metodo Fehays funziona sicuramente, ma in questo modo, non si avrà tonnellate di ID inutili, e non dovrà fare il trasferimento dei parametri inutili. Sarà propagare automaticamente a ogni istanza nel DOM con la thumb di classe.

Answer 3

Si può solo scrivere una funzione che penso.

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

Penso che la cosa più pulita che si potrebbe fare sarebbe quella di estendere jQuery per includere la funzionalità desiderata:

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

È possibile verificare qui! http://jsfiddle.net/jPYyZ/

====== ======= Aggiornamento

Se si vuole fare un passaggio del mouse miniatura / anteprima del sistema, questo è tutto quello che serve:

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

È possibile verificare / armeggiare intorno con questa qui: http://jsfiddle.net/AhwH7/