Adjust the zoom level while scrolling through two images

Question

Adjust the zoom level while scrolling through two images

Two images, identical in size and position within dynamically sized divs based on user interaction through the jquery beforeAfter plugin.

I want to implement scroll zooming on these images using wheelzoom, so that zooming on one image will mirror the same amount and position on the other.

The challenge lies in linking event handlers effectively:

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

    other_img.onwheel(e);
}

If direct linking isn't possible, is there a way to duplicate the event and redirect it to the second image?

This problem requires a solution using either jquery or native Javascript.

View the code here (disregard the handle).

EDIT: Any guidance on what approach could work would be greatly appreciated.

javascript event-handling zooming

Answer 1

Answer №1

Check out my demonstration here: http://plnkr.co/edit/kH0ec8TVMXUIYlMoBaMq?p=preview

Below is the main snippet of 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);
});

I have implemented a simple solution where an event ("wheel") triggers the same event on another element, passing the data from the initial event to the new event as an argument. By using the flag variable, I prevent the custom event from triggering the other event again and creating an endless loop.

This approach allows for a solution without modifying the source code of the plugin. However, modifying the code of wheelzoom.js could lead to even better solutions.

Answer 2

Check out my demonstration here: http://plnkr.co/edit/kH0ec8TVMXUIYlMoBaMq?p=preview

Below is the main snippet of 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);
});

I have implemented a simple solution where an event ("wheel") triggers the same event on another element, passing the data from the initial event to the new event as an argument. By using the flag variable, I prevent the custom event from triggering the other event again and creating an endless loop.

This approach allows for a solution without modifying the source code of the plugin. However, modifying the code of wheelzoom.js could lead to even better solutions.

Answer 3

Answer №2

Create a custom zooming function that accepts multiple parameters to manage the zoom action, extracting necessary values from the event handler.

function adjustZoom(element, direction, amount) {
    // Implement logic to resize the `element`
}

var image1, image2;

image1 = /* select image node */;
image2 = /* select image node */;

function handleScroll(scrollEvent) {
    var scrollDirection, scrollAmount;

    // Determine zoom direction and amount based on `scrollEvent`

    adjustZoom(image1, scrollDirection, scrollAmount);
    adjustZoom(image2, scrollDirection, scrollAmount);
}

image1.onscroll = handleScroll;
image2.onscroll = handleScroll;

Answer 4

Create a custom zooming function that accepts multiple parameters to manage the zoom action, extracting necessary values from the event handler.

function adjustZoom(element, direction, amount) {
    // Implement logic to resize the `element`
}

var image1, image2;

image1 = /* select image node */;
image2 = /* select image node */;

function handleScroll(scrollEvent) {
    var scrollDirection, scrollAmount;

    // Determine zoom direction and amount based on `scrollEvent`

    adjustZoom(image1, scrollDirection, scrollAmount);
    adjustZoom(image2, scrollDirection, scrollAmount);
}

image1.onscroll = handleScroll;
image2.onscroll = handleScroll;

Adjust the zoom level while scrolling through two images

Answer №1

Answer №2

Similar questions

Steps for inserting an additional header in an Angular table

Utilize AJAX to fetch and load JSON data for use in a different function

Encountering cross-domain issues while integrating AngularJS in flex (web control), and trying to retrieve templates/json (local files)

Iterate through each element in all arrays, but limit the loop to only iterate through the elements in the first array up to its

When making a request through local apache, the POST method is switched to GET

Customize dynamically loaded data via AJAX

Executable program contained within npm bundle

Ways to rotate SVG images exclusively upon clicking

Efficiently Measuring the Visibility Area of DetailsList in Fluent UI

How can you customize the bottom and label color for Material-UI TextField when in error or when in focus?

Avoid displaying pop-up repeatedly (using current library)

I am looking for JavaScript or jQuery code that allows me to incorporate a "Save This Page As" button

Connect or disconnect an element to a JavaScript event handler using an anonymous function

What is the process by which browsers manage AJAX requests when they are made across

Dealing with the percentage sign in table names during data retrieval

Understanding the concept of hoisting in JavaScript for global variables and functions

How is it that connecting an event listener to a React child component can be done in a way that resembles simply passing a prop

Showing dynamic content retrieved from MongoDB in a list based on the user's selected option value

The expression suddenly stopped: nextEvent was not expected to happen

Exploring Angular2: The Router Event NavigationCancel occurring prior to the resolution of the Route Guard