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 DOM树需要一些时间。要解决这个问题，只需将img click evens添加到setTimeout函数以放大{100}，如下所示：

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

现在，您可以对图库图像进行缩放功能。请参阅我的示例：http://zikro.gr/dbg/html/3dgallery/

3D画廊室（jquery和css3）

1 个答案: