3D畫廊室（jquery和css3）

Question

我剛剛使用jquery和css3找到了這個很棒的3D圖像庫示例
http://tympanus.net/codrops/2013/01/15/3d-image-gallery-room/

我嘗試使用此庫添加縮放效果（每次單擊照片時） http://lab.hakim.se/zoom-js/

遺憾的是，點擊事件無法處理圖庫中的圖像。 我無法在“gr-gallery”內的任何位置綁定像click（），hover（）這樣的處理程序。

我嘗試刪除return false; 在wallgallery.js的296行，但仍然無法正常工作。

我認為使用此縮放庫可以改進該示例，但我需要有關該細節的幫助。

Answer 1

當您嘗試綁定zoom.js的單擊事件時，即使您之前運行了Gallery，也沒有圖像。 我想構建Gallery DOM樹需要一些時間。 要解決這個問題，只需將縮放的img click evens添加到100ms的setTimeout函數，如下所示：

setTimeout(function() {
    $('figure img').on('click', function(e) {
        e.preventDefault();
        zoom.to({ element: e.target });
    });
}, 100);

現在，您可以使用庫圖像的縮放功能。 看看我的例子：http： //zikro.gr/dbg/html/3dgallery/