jquery翻轉混亂

Question

試圖讓我的翻轉在翻轉時更改src。這工作正常，但有一個錯誤。點擊縮略圖後，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次，這也可能是相關的。
• 替換函數中使用的正則表達式無法正常工作。點擊縮略圖切換圖像後，我注意到，只要你mouseout（這是從thumb.mouseout函數），URL開始添加r的單詞靜態...的結尾約10個鼠標後，我結束了這個URL「http://staticrrrrrrrrrr.yourdomain.com/someimage.jpg」。我不太瞭解我的正則表達式，所以我無法幫你解決這個問題。
• 而不是修改網址，它會更容易做，因爲馬特建議並使用不透明度，但如果你想使用不同的圖像，我會將URL存儲在img的rel屬性中，只需將其切換，那麼對於URL發生的問題就不那麼重要了。