Использование jQuery для назначения правильного класса изображению в галерее обмена изображениями

Question

Итак, я использую этого прекрасного парня по обмену изображениями:

jQuery Image Swap Gallery

Вы можете увидеть его демонстрацию в действии на моем сайте здесь: http://hannahnelsonteutsch.com/v2/art-piece.php

Проблема в том, что при # main_image img

<div id="main_image" class="grid_7">
    <img class="wide" src="zImages/arrows-2.jpg" />
</div>

обратите внимание на class = "wide" .есть два класса, которые нужно динамически применять к изображениям, как только они будут поменяны местами: «широкий» и «высокий» , в зависимости от того, используем ли мыизображение в портретной или альбомной ориентации.

Хорошая вещь, которую я догадываюсь, что превосходный кодер мог бы использовать, состоит в том, что миниатюрам для каждого изображения уже назначен правильный класс:

<img class="tall" src="zImages/arrows-1.jpg" />
<img class="wide" src="zImages/arrows-2.jpg" />
<img class="wide" src="zImages/arrows-3.jpg" />
<img class="tall" src="zImages/arrows-4.jpg" />
<img class="tall" src="zImages/arrows-5.jpg" />

Вот jQuery, который генерирует обмен изображениями:

$(document).ready(function() {
    // Image swap on hover
    $("#details img").hover(function(){
        $('#main_image img').attr('src',$(this).attr('src').replace());
        // This is my failed attempt to assign  
        // the correct class to the #main_img img:
        $('#main_image img').attr('class',$('#details img').attr('class').replace(this));
    });
    // Image preload
    var imgSwap = [];
     $("#details img").each(function(){
        imgUrl = this.src.replace();
        imgSwap.push(imgUrl);
    });
    $(imgSwap).preload();
});
$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}

Примечание две вещи:

1. В оригинальном уроке есть строка кода:

   $('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''));
   

   , которую я заменил на это:

   $('#main_image img').attr('src',$(this).attr('src').replace());
   

   ключом является .replace ('thumb /','') против .replace () .

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

2. Моя собственная попытка ответить на этот вопрос не сработала

   $('#main_image img').attr('class',$('#details img').attr('class').replace(this));
   

Итак, вот где я.У кого-нибудь есть идеи, чтобы решить эту проблему?

Большое спасибо за ваше время.

Приветствия, Джон

Answer 1

Вам нужно использовать селектор $(this), чтобы jquery знал, над каким изображением вы наводите курсор.Также вам, вероятно, следует использовать mouseenter вместо hover, так как вам нужно только один раз проверить положение мыши.Наконец, избавился от replace() в вашей функции, так как он ничего не делал.Используя attr и изменяя src или класс, вы заменяете значение автоматически.Вот черновик, который я настроил на вашей странице: http://jsfiddle.net/AjBDg/2/

Answer 2

Использование $('#main_image img').attr('class',$(this).attr('class')); должно быть достаточно.

См .: http://jsfiddle.net/DpvFX/