jQuery圖片庫預覽圖像彈出

我創建了一個圖像庫與預覽圖像彈出懸停。jQuery圖片庫預覽圖像彈出

光標懸停在縮略圖圖像和放大圖像的預覽顯示。

我不喜歡預覽圖像在縮略圖圖像周圍移動時可能會閃爍的方式。如何簡化腳本並改進預覽圖像彈出窗口？

$(document).ready(function() { 
    $('.imageGalleryAlbum li a img').mouseenter(function() { 
     $(this).closest('li').find('.preview').delay(500).fadeIn(1); 
     $(this).closest('li').siblings().find('.preview').fadeOut(1); 
     return; 
    }); 
    $('.imageGalleryAlbum li .preview').hover(function() { 
     $(this).closest('li').siblings().find('.preview').fadeOut(1); 
     return; 
    }); 
    $('.imageGalleryAlbum li .preview').mouseleave(function() { 
     $(this).closest('li').find('.preview').fadeOut(1); 
     $(this).closest('li').siblings().find('.preview').fadeOut(1); 
     return; 
    }); 
    $('.imageGalleryAlbum li .preview').click(function() { 
     $(this).closest('li').find('.preview').fadeOut(1); 
     $(this).closest('li').siblings().find('.preview').fadeOut(1); 
     return; 
    }); 
}); 

$(document).mouseup(function(e) { 
    var container = $(".preview"); 
    if (container.has(e.target).length === 0) { 
     container.fadeOut(1); 
    } 
});

來源

2012-11-05 JV10

通常，'.hover（）'方法簽名包括一個'mouseenter'和像'mouseleave'事件所以'懸停（handlerIn（eventObject）傳遞，handlerOut（eventObject）傳遞）'。你似乎擁有所有的事件。我的猜測是，他們可能會取消對方或混搭在一起創建一個類似的frankin事件。再看看另一個15分鐘的奇數，看看我能不能找出一些東西。 – Abhilash

這個JV10的運氣怎麼樣？ – VIDesignz

第三次更新

試試這個

Updated your fiddle

var x; 

$(document).ready(function() { 

     $('.imageGalleryAlbum li a img').on('mouseenter', function() { 

      $('.preview').stop().hide(); 

      x = $(this).closest('li').find('.preview'); 

      if($(x).is(':visible')) { 
       $(x).show(); 
      } else { 
       $('.preview').hide(); 
       $(this).closest('li').find('.preview').stop().delay(500).fadeIn(0); 
      } 
     }); 


     $('.preview').parent().on('click mouseleave', function() { 
      $('.preview').hide(); 
     }); 

    }); 

    $(document).mouseup(function(e) { 
     var container = $(".preview"); 
     if (container.has(e.target).length === 0) { 
      container.fadeOut(1); 
     } 
    });

來源

2012-11-05 04:58:46 VIDesignz

謝謝，但我仍然想要半秒的延遲，如果這是可能的？ – JV10

這應該工作！ – VIDesignz

越來越近了。只需要確保其他兄弟預覽也是如此。 – JV10

你可以試試這個例子。

http://nemanjamilosavljevic.com/javascript/gallery_view/ 這是我製作的一個畫廊，它可以滿足您的需求，同時它還允許用戶移動鼠標，並仍然可以顯示大圖像。

希望該方法可以幫助您，或者您可以使用整個示例。

乾杯）

來源

2013-02-04 12:03:24

jQuery圖片庫預覽圖像彈出

回答

相關問題