jquery rollover confusion

Question

Попытка получить мои опрокидывания для изменения src при опрокидывании. Это работает нормально, хотя есть ошибка. После того, как я нажал на миниатюру, src иногда может содержать неправильный src (состояние опрокидывания остается даже при мышином). , Чтобы найти ошибку, щелкните несколько миниатюр и наведите указатель мыши на несколько, вы увидите, что скроллинг src остается для тех, которые уже были нажаты. Демонстрация уже недоступна, извините!

JQuery -

function image_gallery(){ 

if ($('ul.thumbs').length > 0) { 
    $('.gallery').each(function(){ 
     $('ul.thumbs li img:gt(0)').addClass('unselected'); 
     $('ul.thumbs li img:eq(0)').addClass('selected'); 

     function mouse_overs() { 
      var unselected = $('li img.unselected'); 
      unselected.hover(function(){ 
        var thumb = $(this); 
        thumb.attr('src',thumb.attr('src') 
          .replace(/([^.]*\d)\.(.*)/, "$1r.$2")); 
       }, function(){ 
         var thumb = $(this); 
        thumb.each(function(){ 
         $(this).attr('src',$(this) 
          .attr('src').replace('r.jpg','.jpg')); 
        }); 
      }); 
     }; 
     mouse_overs(); 
     var img_main = $(this).find('img.main:first'); 
     $(this).find('ul.thumbs img').each(function(){ 
      $(this).click(function(){ 
       var thumb = $(this); 
       var src = thumb.attr('src'); 
       if (src.indexOf('r.jpg') == -1) { 
        $(this).attr('src',thumb.attr('src') 
           .replace(/([^.]*)\.(.*)/, "$1r.$2")); 
       } 
       var selected = $('ul.thumbs li img.selected'); 

       // previous img remove r.jpg 
       selected.attr('src',selected.attr('src') 
            .replace('r.jpg','.jpg')); 
        selected.removeClass('selected'); 
       selected.addClass('unselected'); 

       //current thumb add class "selected", remove "unselected" 
       thumb.addClass('selected'); 
       thumb.removeClass('unselected'); 
       mouse_overs(); 
       var rel = $(this).parent('a').attr('rel'); 
       img_main.fadeOut(500, function(){ 
        img_main.attr('src', rel); 
        img_main.fadeIn('slow'); 
       }); 

       thumb.mouseout(function(){ 
        var src = $(this).attr('src'); 
        if (src.indexOf('r.jpg') == -1) { 
         $(this).attr('src',thumb.attr('src') 
             .replace(/([^.]*)\.(.*)/, "$1r.$2")); 
        } 
        else return false; 
       }); 
      }); 
}); 
    }); 
    } 
} 

HTML-:

<div class="gallery"> 
<img class="main" src="images/gallery/yes-campaign/NL1.jpg"/> 
<ul class="thumbs"> 
     <li><a rel="images/gallery/yes-campaign/NL1.jpg"><img src="images/thumbs/yes-campaign/NL-1r.jpg"/></a></li> 
     <li><a rel="images/gallery/yes-campaign/NL2.jpg"><img src="images/thumbs/yes-campaign/NL-2.jpg"/></a></li> 
     <li><a rel="images/gallery/yes-campaign/NL3.jpg"><img src="images/thumbs/yes-campaign/NL-3.jpg"/></a></li> 
     <li><a rel="images/gallery/yes-campaign/NL4.jpg"><img src="images/thumbs/yes-campaign/NL-4.jpg"/></a></li> 
    </ul> 
</div> 

Этот HTML повторяется несколько раз по всей странице. Состояние опрокидывания - NL1r.jpg, NL2r.jpg и т. Д. Изображения организованы в виде папок, поэтому все имена файлов изображений используют одно и то же соглашение об именах.

Answer 1

Могу я предложить следующий код вместо вашего?

$(function gallery(){ 

     var transparency = .5; 
     var selectedClassName = 'selected'; 
     var imageFadeSpeed = 'fast'; 

     $('.gallery').each(function(i, gallery) { 
      var $gallery = $(gallery); 

      var $main = $gallery.find('.main'); 

      $gallery.find('.thumbs a') 

       // image preloader 
       .each(function(){ 
        var tempImg = $('<img src="'+ $(this).attr('rel') +'" width="'+ $main.width() +'" />').appendTo('body').hide(); 
       }) 

       .hover(function() { 
        if ($(this).is('.'+selectedClassName)) 
         return; 
        $(this).children().css('opacity', 1); 
       }, function() { 
        if ($(this).is('.'+selectedClassName)) 
         return; 
        $(this).children().css('opacity', transparency); 
       }) 

       .click(function(ev) { 
        ev.preventDefault(); 

        var self = $(this); 

        $main.fadeOut(imageFadeSpeed, function() {      
         var tempImg = $('<img src="'+ self.attr('rel') +'" width="'+ $main.width() +'" />').appendTo('body'); 
         var newHeight = tempImg.height(); 
         tempImg.remove(); 

         $(this) 
          .attr('src', self.attr('rel')) 
          .height(newHeight); 

         $(this).fadeIn(imageFadeSpeed); 
        }); 

        $gallery.find('.'+selectedClassName) 
         .removeClass(selectedClassName) 
         .children() 
         .css('opacity', transparency); 

        self 
         .addClass(selectedClassName) 
         .children() 
         .css('opacity', 1); 
        return; 
       }) 

       .children() 
       .css('opacity', transparency) 
       .end() 

       .filter(':first') 
       .addClass(selectedClassName) 
       .children() 
       .css('opacity', 1); 
     }); 
}); 

Я заменил свой своп изображения на парении с изменением непрозрачности, которая сокращает нагрузку на сервер, но вы можете легко заменить их Src свопинга. вам нужно будет использовать изображения только с окончанием «r.jpg».

Я также вытащил некоторые переменные конфигурации, чтобы вы могли немного поиграть с вещами.

Answer 2

Хотя я думаю, что Мэтт сделал потрясающую работу со сценарием (+1 для этого), я по-прежнему рекомендую использовать GalleryView plugin (Demo here).

---

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

• Функция mouse_overs, по-видимому, исправляет начальные «невыделенные» классы. Лучше всего было бы использовать обработчик событий jQuery «live». Таким образом, если вы измените выбранный класс на невыбранный или наоборот, текущее событие будет обновляться (Примечание: зависание не поддерживается текущей версией jquery, поэтому вам придется использовать мышь и мышь). Также представляется, что часть наведения мыши навевает 3 раза, что также может быть связано.
• Регулярное выражение, используемое в функции замены, работает неправильно. После нажатия на миниатюру, чтобы переключить изображение, я заметил, что, как только вы наведите курсор мыши (который находится из функции thumb.mouseout), URL-адрес начал добавлять r в конец слова static ... после примерно 10 выходов, я в итоге появился этот URL-адрес «http://staticrrrrrrrrrr.yourdomain.com/someimage.jpg». Я не очень хорошо знаю свое регулярное выражение, поэтому я не могу помочь вам исправить это.
• Вместо того, чтобы изменять URL-адрес, было бы намного легче сделать, как предложил Мэтт и использовать непрозрачность, но если вы хотите использовать другое изображение, я бы сохранил URL-адрес в атрибуте rel img и просто переключил его таким образом, то было бы меньше похоже на проблему с URL-адресом.