3D-Galeriezimmer (jquery und CSS3)

Question

Ich habe gerade dieses tolle Beispiel für eine 3D-Bild-Galerie mit Jquery und css3
http://tympanus.net/codrops/2013/01/15/3d-image-gallery-room/

Ich versuchte, einen Zoom-Effekt (jedes Mal, klicken sie ein Foto) hinzuzufügen, mit diesem Bibliothek http://lab.hakim.se/zoom-js/

Leider klicken die Ereignisse auf den Bildern in der Galerie nicht. Ich konnte die Handler nicht wie click(), hover() irgendwo innerhalb der "gr-gallery" binden.

Ich habe versucht, Rückkehr false; auf der Linie 296 von wallgallery.js aber immer noch nicht funktioniert.

Ich denke, dass dieses Beispiel mit dieser Zoom-Bibliothek verbessert werden könnte, aber ich brauche Hilfe mit diesem Detail.

Answer 1

Wenn Sie versuchen, die Click-Ereignisse für die zoom.js zu binden, gibt es keine Bilder, auch wenn Sie die Galerie davor ausgeführt haben. Ich denke, es braucht etwas Zeit, um den Galerie-DOM-Baum zu erstellen. Um dies zu lösen, fügen Sie einfach die img Klick Evens für den Zoom auf eine setTimeout Funktion mit 100ms wie folgt aus:

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

Jetzt haben Sie eine Zoom-Funktion auf die Galerie-Bilder. Sehen Sie mein Beispiel hier: http://zikro.gr/dbg/html/3dgallery/