圖片庫預覽在Chrome和Safari中無法正常顯示

我已經創建了一個圖像庫，您可以在圖像庫中單擊圖像以顯示其較大版本。點擊圖片時，會在下面一行插入新圖片。我得到了一個錯誤，我找不到如何解決它。例如，如果您單擊第一行上的圖像，則會顯示圖像的預覽。然後，如果您點擊下面兩行的圖片，則不會顯示圖片預覽。它不適用於Chrome或Safari。在Firefox中，它效果很好。圖片庫預覽在Chrome和Safari中無法正常顯示

這裏是JavaScript和jQuery（2.0.3）我使用：

$(document).on("click", ".imgBox", function(){ 
    imgsrc = $(this).find('img').attr('src'); 
    var bigBox = $('<div class="bigBox"><img src="'+imgsrc+'"/></div>'); 
    imgClicked = $(this); 
    $('.bigBox').remove() 
    if ($(".bigBox").length > 0){ 

      bigBox.find('img').attr('src', imgsrc); 
      bigBox.insertAfter(imgClicked); 
    } else { 
      bigBox.insertAfter(imgClicked).css('display', 'block'); 
    } 


});

我創建了一個JSFiddle，這樣你可以自己嘗試。只要確保您調整瀏覽器窗口的大小，以便至少獲得3行。

我已經在OSX上的Chrome 30.0.1599.101，Safari 6.0.5和Firefox 24.0上測試過它。

來源

2013-10-18 Oskar Persson

如果你在'px'中的.bigBox中指定'width'，它會成爲一個dealbraker嗎？ '％'的廣告？我在CSS中調整了一下，在我看來，問題在那裏。 – darshandzend

我需要它在''％是 –

的怪異。如果你調整jsfiddle窗口的大小） – skip405

警告：該解決方案是一個有點兩輪牛車。 :)

我注意到，當我調整jsfiddle窗口的大小時，chrome會顯示這個圖像，因爲我把它放到in the comment。於是我開始試驗如何「再次愚弄」鉻。有many ways that cause a repaint。我選擇了操縱style屬性。

所以我創建了一個簡單的檢查，以動態地設置overflow財產auto到visible（這兩個值不應該毀了你的佈局，我當用戶點擊圖像切換這些值，就像這樣：。。http://jsfiddle.net/HeQGL/5/

Ps注意儘管我改變了你的腳本，改變了事件監聽器的元素，使用了函數內部的變量，並且使用了.detach()而不是.remove()，因爲當我們需要將元素重新插入到DOM中時，它更適合。

來源

2013-10-18 14:52:10 skip405

我在Windows的Chrome 30.0.1599.101 m上測試過它，效果非常好。

來源

2013-10-18 14:07:36 fDruga

圖片庫預覽在Chrome和Safari中無法正常顯示

回答

相關問題