3D展厅(jquery和css3)

Question

我刚刚发现了一个使用jquery和css3的三维图片库的好例子。

http://tympanus.net/codrops/2013/01/15/3d-image-gallery-room/

我尝试使用这个库http://lab.hakim.se/zoom-js/添加缩放效果(每次他们点击一张照片)

不幸的是，单击事件无法处理图片库中的图像。我无法绑定处理程序，如click()，悬浮()，在“gr-图库”中的任何地方。

我尝试删除返回false；在wallgallery.js的第296行中，但仍然无法工作。

我认为这个例子可以用这个缩放库来改进，但是我需要关于这个细节的帮助。

Answer 1

当您试图绑定zoom.js的单击事件时，即使在它之前运行了图库，也没有图像。我想要花一些时间来构建画廊DOM树。要解决这个问题，只需将缩放的img单击evens添加到具有100 img的setTimeout函数，如下所示：

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

现在，您有了放大画廊图像的功能。参见这里的示例：http://zikro.gr/dbg/html/3dgallery/