Condensar la repetición de código jQuery

Question

Tengo una página que tiene una imagen grande en él con una serie de imágenes en miniatura. Al pasar el ratón sobre una miniatura los principales cambios de imagen a la imagen que acaba de laminado puntero del ratón sobre. El problema son los más miniaturas que tengo, el código más repetida que tengo. ¿Cómo podría reducirlo?

El código Jquery es como sigue.

<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 = la ID de la imagen a tamaño completo

#thumb1, #thumb2, #thumb3, #thumb4 = El ID de de las miniaturas

El código principal de la página PHP es si eso ayuda.

Answer 1

En primer lugar, se debe modificar el código para que cada miniatura tiene un fácil de encontrar 'clase'.

Asumiendo que tiene

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

su html debe ser similar

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

En segundo lugar debe asegurarse de que tiene un patrón identificable entre todos ustedes, miniaturas y su homólogo gran imagen. En el código que tenemos

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

¿cuál es su organización para sus archivos?

Imaginemos por ahora que las miniaturas tienen el mismo src como las imágenes de errores

El código de jQuery se achica 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');
    });
});

Este código debe trabajar y espera sólo para el algoritmo que transforma el src del pulgar en el src de la imagen grande

Espero que esto le ayudará a Jerome Wagner

Answer 2

$(this) es su amigo. También es necesario desarrollar algún tipo de nomenclatura que se puede utilizar para hacer coincidir los nombres de archivo y sus identificadores. Lo que hago normalmente es el uso de PHP para generar el HTML, pero puso en atributos especiales que manejan los nombres de los archivos:

// PHP GeneratedContent

<?php

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

echo $output;
?>

A continuación, voy a ir en el siguiente paso:

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

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

Fehays método funciona sin duda, pero de esta manera, usted no tendrá toneladas de identificadores innecesarias, y no tendrá que realizar la transferencia de parámetros innecesarios. Se propagan automáticamente a todos los casos en el DOM con el thumb clase.

Answer 3

Sólo podría escribir una función que pienso.

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

Creo que lo más limpio que podría hacer sería extender jQuery para incluir la funcionalidad que desee:

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

Puede probar aquí! http://jsfiddle.net/jPYyZ/

====== ======= actualización

Si usted quiere hacer una miniatura encima del ratón / vista previa del sistema, esto es todo lo que necesita:

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

Puede probar / improvisar una solución con éste aquí: http://jsfiddle.net/AhwH7/