Conflict between vanilla-js-wheel-zoom and the zoom CSS descriptor (also -moz-transform: scale) about vanilla-js-wheel-zoom HOT 20 CLOSED

To be honest, I did not understand you

Do you want to be able to set values to variables (x, y, scale) when the script is initialized?

from vanilla-js-wheel-zoom.

To clarify the first point, I have a wrapper div with zoom in the CSS. For example: zoom: 125%. This value changes depending on screen size. It's an easy way of making a page responsive. It magnifies the div to the specified percentage. If the wheel-zoom image is inside that div then the zoom loses it's position when you zoom in, it just whizzes outside the viewport and disappears. So that's the conflict.

About the second point. I have (n) amount of images displayed in a loop, pic1, pic2, pic3, etc. Each image will have it's own x, y and scale values, as determined by the wheel-zoom script. But the script doesn't know which image it's scaling, it just scales whichever image you mouse over. By sending the (n) variable into the script you can then save the new x, y and scale values into localStorage or sessionStorage with (n) in the name, for example pic(n)_x, pix(n)_y and pic(n)_scale, or pic1_x, pic1_y and pic1_scale, etc. Then the images will retain their new scale and position when the page is refreshed or if you need to rebuild the images at a later point.

Since I posted the question I have worked out how to do this, though it wasn't easy. I could get the variables into the script quite easily, by adding them inside the WZoom initiator, as you would do with a function. Accessing them in the different parts of the script wasn't so easy. In the end I added them to the content array, then I could access and store the new values like this:

localStorage.setItem ("Pic" + this.content.picnum + "_y", content.currentTop) (with picnum being the image number, or n). Works really well!

I never resolved the first issue properly, but as a workaround I just changed it so that it only zooms from the centre instead of from the mouse position. Here is how I did this:

The part that calculates the parameters along the X and Y axis is replaced with this:

var contentNewLeft = content.currentLeft;
var contentNewTop = content.currentTop;

That works fine for me, I'm very happy with the result! Thanks!

from vanilla-js-wheel-zoom.

If you have a live example of the first problem, it would help me make some decision faster.

The same for the second problem.

I'm glad that you were able to solve them at least partially and as soon as I have the opportunity I'll see what I can offer you.

Perhaps you can offer your own PR.

P.S. https://worka.github.io/vanilla-js-wheel-zoom/demo-image.html
I tried to add a style (zoom: 125%) for the div (id="myViewport") through the web developer tool, at first glance everything works fine (Chrome 108).

from vanilla-js-wheel-zoom.

Sorry, I just noticed your P.S. The zoom has to be added to a wrapper or container div, not the viewport div. By only adding it to the viewport div the surrounding page and the image container remains the same size. The zoom is used to increase the size of the page not just the image within the viewport. Try adding the zoom to the div with class="container py-3".

I don't have a live example, I'm using localhost at present, but it's quite simple, just do this: (I'm having trouble adding code here, when I post the comment the code disappears, so I can't write it as it would actually be)

div style="zoom: 165%"
// Place WZoom element here.
/div

As for the second issue, the WZoom element is created in a loop with the loop index in it's id, such as this:

WZoom.create('#pic' + loop_index, {
type: 'img',
width: photowidth,
height: photoheight
});

So there will be multiple WZoom elements, pic1, pic2, etc. The loop index needs to be sent into the script so that when you save the x, y and scale values we know which image those values belong to, either pic1 or pic2, etc. The way to do it is to place the variable name before the closing bracket, like this:

WZoom.create('#pic' + loop_index, {
type: 'img',
width: photowidth,
height: photoheight
}, loop_index);

Of course, you can send more than one variable into the script if you need to, or perhaps an array of variables. I just didn't know how to access the variables in the different parts of the script. I found where they were coming into the script, so they were accessible right there, but when I tried to access them somewhere else they were undefined. By appending them to an existing array inside the script (content), this made them accessible throughout the script. This might be a very simple problem to solve for someone with a good knowledge of JavaScript, but my knowledge is extremely limited. I've only just started to learn it. But I did manage to get it to work, so I'm happy!

from vanilla-js-wheel-zoom.

Yes, indeed, now I was able to reproduce the problem.

Just in case, I’ll ask: but your problem that you are trying to solve with style zoom cannot be solved using the viewport settings?

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

from vanilla-js-wheel-zoom.

Sorry I'm not sure what you mean. Can you explain more?

Everything is working fine now since I changed the zoom point of origin to the centre of the image instead of the mouse position. Works a treat with just this simple change:

var contentNewLeft = content.currentLeft;
var contentNewTop = content.currentTop;

from vanilla-js-wheel-zoom.

Do you use the zoom in order for the mobile version? Maybe you are just trying to deal with initial-scale. In this case my variant help you.

from vanilla-js-wheel-zoom.

I changed this example.

Please take a look, maybe it will be useful for your task

from vanilla-js-wheel-zoom.

I use zoom to make the page responsive on all screens, not just mobile. For example, at screen width 1440 and above the zoom is set to 165%, and between 768 and 1440 the zoom is set to 100%, and at 767 and below it's set to 70%. Those aren't exact but you get what I mean.

The reason I use zoom is because my page has lots of precisely positioned images and text. It's a site that allows users to customize photo greetings cards, like moonpig, so there are multiple photos (up to 15 at present) and text which all need to remain in position relative to each other. To make the page responsive the usual way would take a lot of restructuring.

What does the example you shared do differently?

from vanilla-js-wheel-zoom.

I added in an example how you can get x, y and scale for each image. I still don’t understand what exactly you need, so I'm trying to somehow find "common ground" :)

from vanilla-js-wheel-zoom.

I understand your first problem, but I still have no idea how to help you :(

from vanilla-js-wheel-zoom.

Oh yes, I just noticed the x, y and scale in the top left corner. I've already done this myself, though I expect the method you used was better than the one I used, but as long as it works I'm happy. The reason I need these values is so that the images can be reconstructed the way they were edited, and also they need to retain their size and position if the user navigates away from the page then returns, because they might decide they want to do more editing and it wouldn't be good if all the images were back to their original size and position. It's all working now, so job done!

The first problem is also resolved on my end. Maybe you could add a new option in the options for only allowing zoom from the centre? That would be great for people who use zoom in their styling.

from vanilla-js-wheel-zoom.

From the very beginning, I asked if you need the ability to specify your state (x, y, scale) when initializing the script :)

You have the option to get the state on zoom and save it. Now do you somehow need to be able to pass it when initializing the script? I am now thinking about how to implement it.

About first problem: hm... I don't really like this option, I have to think)

from vanilla-js-wheel-zoom.

I can advise you to use the disableWheelZoom option, turn it off and implement the resizing via the zoomUp()/zoomDown() api by yourself listening the wheel scroll event (or use class Interactor from my plugin).

Thus, the image will increase only in the center and you will not have to go into the code of the plugin itself, thereby saving the opportunity for further updating it.

var wzoom = WZoom.create('#myContent', {
    disableWheelZoom: true,
});

document.getElementById('myContent').addEventListener('wheel', function () {
    wzoom.zoomUp();
    // or
    wzoom.zoomDown();
});

from vanilla-js-wheel-zoom.

I rewrote this example using sessionStore

from vanilla-js-wheel-zoom.

Thanks, that looks like a good workaround for the centre zoom. How would you specify whether to zoom up or zoom down?

from vanilla-js-wheel-zoom.

https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/deltaY

from vanilla-js-wheel-zoom.

Pls close the issue if we have found all answers to your questions.

from vanilla-js-wheel-zoom.

I would like to look at the project in which you applied my plugin, because it sounds interesting (when it will be ready) :)

from vanilla-js-wheel-zoom.

Of course, but it will be a long time before it goes live because I have to design a lot of card templates first, but I will upload a video of the site for you too see. There are currently just over 50 card templates. I probably need at least 100 before it could go live. I'll share a link to the video when it's ready :-)

from vanilla-js-wheel-zoom.