Сжатие повторяющегося кода JQuery

Question

У меня есть страница с большим количеством изображений на ней с несколькими миниатюрами. Когда вы наводите указатель мыши на миниатюру, основное изображение меняется на изображение, которое вы только что накинули. Проблема в том, что у меня больше эскизов, тем более повторяющийся код у меня есть. Как я могу уменьшить его?

Код JQuery выглядит следующим образом.

<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 = идентификатор полноразмерного изображения

#thumb1, #thumb2, #thumb3, #thumb4 = В корочках иконок

Основной код страницы является PHP, если это помогает.

Answer 1

Прежде всего, вы должны изменить свой код, чтобы каждый миниатюру легко находил «класс».

Если у вас есть

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

ваш HTML должен выглядеть

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

Во-вторых, вы должны убедиться, что у вас есть идентифицируемый шаблон между всеми вами эскизов и их большой аналог изображения. В вашем коде есть

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

Какая организация ваша организация для ваших файлов?

Давайте представим себе теперь, что эскизы имеют один и тот же SRC, как изображение ошибка

код JQuery будет усаживается на:

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

Этот код должен работать и просто ждет алгоритма, который преобразует Пульт SRC из пальца в ГКЗ большого изображения

Я надеюсь, что это поможет Джером Вагнер

Answer 2

Вы можете просто написать функцию, я думаю.

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 3

$(this) - твой друг. Вам также необходимо разработать какую-то номенклатуру, которую вы можете использовать для сопоставления имен файлов и ваших идентификаторов. То, что я обычно делаю это использовать PHP для создания HTML, но положить в специальные атрибуты, которые обрабатывают имена файлов:

// PHP GeneratedContent 

<?php 

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

echo $output; 
?> 

Тогда я пойду о следующем шаге:

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

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

Fehays метод, безусловно, работает, но таким образом, у вас не будет тонн ненужных идентификаторов, и вам не придется делать ненужную передачу параметров. Он автоматически будет распространяться на все экземпляры в DOM с классом thumb.

Answer 4

Я думаю, что самая чистая вещь, которую вы могли бы сделать, чтобы продлить JQuery, чтобы включить функциональность вы хотите:

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

Вы можете проверить его здесь! http://jsfiddle.net/jPYyZ/

====== Обновление =======

Если вы хотите сделать систему Mouseover миниатюр/просмотра, это все, что нужно:

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

Вы может тестировать/возиться с этим здесь: http://jsfiddle.net/AhwH7/