прокрутить масштаб изображения на два изображения

Question

У меня есть два изображения с одинаковыми размерами и одинаковыми позициями, но они помещаются в divs с динамической шириной в зависимости от взаимодействия пользователя с помощью jquery beforeAfter plugin.

Я хотел бы включить прокрутку для этих изображений с помощью wheelzoom, так что масштабирование одного из этих изображений увеличит ту же сумму в том же положении, что и другое.

То, что я не в состоянии сделать это это связывание (я полагаю) обработчики событий вдоль линий этого:

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

    other_img.onwheel(e); 
} 

Если это не представляется возможным, можно скопировать событие и изменить целевое изображение?

Я ищу решение, используя jquery или собственный Javascript.

Code here (игнорируйте ручку).

EDIT: Любые указатели верхнего уровня к тому, что должно работать также будут оценены

Answer 1

Я сделал проработанный пример: http://plnkr.co/edit/kH0ec8TVMXUIYlMoBaMq?p=preview

здесь является основной код:

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); 
}); 

я сделать что-то простое, когда происходит событие («колесо») триггер то же событие к другому элементу и передать в качестве аргумента данные от первого события к новому событию. Я использую переменную флагов, чтобы снова сдержать настраиваемый триггер события другого события и запустить вечный цикл.

Это решение без редактирования исходного кода плагина. Вы можете сделать больше хороших решений, если вы измените код wheelzoom.js.

Answer 2

Сделать масштабирование функции, которая принимает достаточное количество параметров для обработки масштабирования, а также получить необходимые значения из обработчика события.

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;