Condensando código JQuery repetido
-
24-09-2019 - |
Pergunta
Eu tenho uma página que contém uma imagem grande com várias miniaturas.Quando você passa o mouse sobre uma miniatura, a imagem principal muda para a imagem sobre a qual você acabou de passar o mouse.O problema é que quanto mais miniaturas eu tiver, mais código repetido eu tenho.Como eu poderia reduzi-lo?
O código Jquery é o seguinte.
<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
= o ID da imagem em tamanho real
#thumb1
, #thumb2
, #thumb3
, #thumb4
= Os IDs das miniaturas
O código principal da página é PHP, se isso ajudar.
Solução
Primeiro de tudo, você deve modificar seu código para que cada miniatura tenha uma 'classe' fácil de encontrar.
Assumindo que você tem
<img id="thumb1" scr=""/>
<img id="thumb2" scr=""/>
..
Seu HTML deve parecer
<img id="thumb1" class='thumb' scr=""/>
<img id="thumb2" class='thumb' scr=""/>
..
Segundo, você deve garantir que você tenha um padrão identificável entre todas as miniaturas e sua grande porte de imagem. No seu código, temos
0001.jpg
p_0002.jpg
_img/p_0003.jpg
0004.jpg
Qual é a sua organização para seus arquivos?
Vamos imaginar por enquanto que as miniaturas têm o mesmo SRC que as imagens de bug
O código jQuery seria encolhido para:
$('.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 deve funcionar e apenas aguarda o algoritmo que transforma o SRC do polegar no SRC da grande imagem
Espero que isso te ajude Jerome Wagner
Outras dicas
$(this)
é seu amigo. Você também precisa desenvolver algum tipo de nomenclatura que possa usar para combinar com seus nomes de arquivos e seus IDs. O que normalmente faço é usar o PHP para gerar o HTML, mas colocar atributos especiais que lidam com os nomes de arquivos:
// PHP GeneratedContent
<?php
while(/* some range */) {
$i = 1;
$output .= '<element class="thumb" rel="p_' . $i . '.jpg">';
$i++;
}
echo $output;
?>
Então eu vou dar o próximo passo:
$('.thumb').mouseover( function() {
var link = $(this).attr('rel');
/* Now that you have the link, just put it into whatever function you need to */
});
O método FeHays definitivamente funciona, mas dessa maneira você não terá toneladas de IDs desnecessárias e não precisará fazer a transferência desnecessária de parâmetros. Ele se propõe automaticamente para todas as instâncias do DOM com a classe thumb
.
Você poderia apenas escrever uma função, eu acho.
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');
});
});
}
Acho que a coisa mais limpa que você poderia fazer seria estender o jQuery para incluir a funcionalidade desejada:
//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);
});
Você pode testar aqui! http://jsfiddle.net/jPYyZ/
====== Atualização =======
Se você quiser fazer um sistema de miniatura/visualização do mouse, basta isso:
//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);
});
Você pode testar/mexer com este aqui: http://jsfiddle.net/AhwH7/