scrollen Zoom auf zwei Bilder

Question

Ich habe zwei Bilder mit gleichen Abmessungen und gleichen Positionen, aber in divs mit dynamischer Breite je nach Benutzerinteraktion mit der jquery beforeAfter plugin platziert.

Ich möchte Scrollzoom auf diesen Bildern unter Verwendung von wheelzoom aktivieren, so dass das Zoomen auf einem dieser Bilder den gleichen Betrag an der gleichen Position wie der andere vergrößert.

Was vermag ich nicht zu tun, ist diese Verknüpfung von (nehme ich an) die Ereignishandler nach dem Vorbild dieses:

function onwheel(e){ 
    //adjust image to fit zoom level ... 

    other_img.onwheel(e); 
} 

Wenn dies nicht möglich ist, ist es möglich, das Ereignis zu kopieren und ändern Sie die Zielbild?

Ich bin auf der Suche nach einer Lösung mit jquery oder nativem Javascript.

Code here (ignorieren Sie den Griff).

EDIT: Alle Top-Level-Zeiger auf das, was sollte auch

Answer 1

machte ich an einem Beispiel: http://plnkr.co/edit/kH0ec8TVMXUIYlMoBaMq?p=preview

hier ist der Kern-Code:

document.getElementsByClassName("before")[0].addEventListener("wheel", function(event){ 
    if(flag){ 
    flag= false; 
    return; 
    }; 
    flag=true; 
    var newEvent = new WheelEvent("wheel",event); 
    var elementToTrigger = document.getElementsByClassName("after")[0]; 
    elementToTrigger.dispatchEvent(newEvent); 
}); 

ich einfach etwas tun, wenn ein Ereignis ("Rad") einen Trigger das gleiche Ereignis passiert zu einem anderen Element und übergeben als Argument die Daten vom ersten Ereignis an das neue Ereignis. Ich benutze eine Flag-Variable, um den benutzerdefinierten Ereignis-Trigger zu veranlassen, das andere Ereignis erneut auszulösen und eine ewige Schleife zu starten.

Dies ist eine Lösung, ohne den Quellcode des Plugins zu bearbeiten. Sie können mehr gute Lösungen machen, wenn Sie den Code von wheelzoom.js ändern.

Answer 2

würde geschätzt funktioniert die eine Zoomfunktion, die genügend Parameter nimmt das Zoomen zu handhaben und erhalten Sie die Werte, die Sie aus dem Ereignishandler müssen.

function handleZoom(domNode, zoomDirection, zoomAmount) { 
    // Do stuff to change the size of `domNode` 
} 

var img1, img2; 

img1 = /* select image node */; 
img2 = /* select image node */; 

function handleScroll(scrollEvent) { 
    var direction, amount; 

    // Use `scrollEvent` to figure out which direction and how far to zoom 

    handleZoom(img1, direction, amount); 
    handleZoom(img2, direction, amount); 
} 

img1.onscroll = handleScroll; 
img2.onscroll = handleScroll;