3D Gallery Room (jquery and css3)

Question

I just found this awesome example of a 3d image gallery using jquery and css3
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/

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” .

I tried removing return false; on the line 296 of wallgallery.js but still not working.

I think that example could be improved using this zoom library but I need help with that detail .

Answer 1

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. I guess it takes some time to build the Gallery DOM tree. To solve this, just add the img click evens for the zoom to a setTimeout function with 100ms like this:

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/