[英]3D Gallery Room (jquery and css3)
I just found this awesome example of a 3d image gallery using jquery and css3 我刚刚使用jquery和css3找到了这个很棒的3D图像库示例
http://tympanus.net/codrops/2013/01/15/3d-image-gallery-room/ http://tympanus.net/codrops/2013/01/15/3d-image-gallery-room/
I tried to add a zoom effect (every time they click a photo ) using this library http://lab.hakim.se/zoom-js/ 我尝试使用此库添加缩放效果(每次单击照片时) http://lab.hakim.se/zoom-js/
unfortunately clicks events are not working on the images inside the gallery . 遗憾的是,点击事件无法处理图库中的图像。 I could not bind the handlers like click() , hover() anywhere inside the “gr-gallery” .
我无法在“gr-gallery”内的任何位置绑定像click(),hover()这样的处理程序。
I tried removing return false; 我尝试删除return false; on the line 296 of wallgallery.js but still not working.
在wallgallery.js的296行,但仍然无法正常工作。
I think that example could be improved using this zoom library but I need help with that detail . 我认为使用此缩放库可以改进该示例,但我需要有关该细节的帮助。
When you try to bind the click events for the zoom.js
, there are no images, even if you've run the Gallery before it. 当您尝试绑定
zoom.js
的单击事件时,即使您之前运行了Gallery,也没有图像。 I guess it takes some time to build the Gallery DOM tree. 我想构建Gallery DOM树需要一些时间。 To solve this, just add the img click evens for the zoom to a
setTimeout
function with 100ms like this: 要解决这个问题,只需将缩放的img click evens添加到100ms的
setTimeout
函数,如下所示:
setTimeout(function() {
$('figure img').on('click', function(e) {
e.preventDefault();
zoom.to({ element: e.target });
});
}, 100);
Now you have a zoom functionality to the gallery images. 现在,您可以使用库图像的缩放功能。 See my example here: http://zikro.gr/dbg/html/3dgallery/
看看我的例子:http: //zikro.gr/dbg/html/3dgallery/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.