cotton123236 / zoomist Goto Github PK

@cotton123236 why can't I click on the button inside the zoomist-image container? I tried clicking on the button inside the zoomist-wrapper container and it works, but then I can't zoom into button. What can I do to be able to both zoom in and click on the button?

Codesandbox example

Originally posted by @ukizet in #33 (comment)

Sry for another created issue but i really wanna use zoomist in my project.

Hello! Im tried everything but image doesn't appear.

Can it be used inside a div element? Does it have to be only for scaling images?

Because the zoomer buttons don't have the type attribute set on them, it gets the default value, which is submit. That's why when Zoomist gets instantiated inside a form, clicking on those button will cause a form submission.

The solution to this would be setting the type attribute to "button" upon the element creation.

Great lib, but I am struggling to get it function in a React - NextJS project.
It seems that the provided Zoomist distribution is not self-contained, I already tried to add SASS dependency but it only works for storybook. The real app says this:

./node_modules/zoomist/src/scss/index.scss
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/zoomist/src/index.js

But why it refers to src at all?

There is a solution however:

Instead of

import Zoomist from "zoomist"

write

import Zoomist from "zoomist/dist/zoomist.min.js";
import "zoomist/dist/zoomist.min.css";

But this is not very nice in a React app...

Hello, I have a bug when I use zoomist in a modal box created with bootstrap.
The image does not appear.

link jsfiddle : https://jsfiddle.net/kjuL1375/11/

Can you help me ?

Thanks you
Alexandre

Hello @cotton123236 , thanks for your library. What do we do if we have several images? Because the wrapper is for a single image and not several. Thanks Nicolas

Hi
I noticed that the image position always shifts after zooming, but the data from the on.zoom() event is the data before zooming. I would like to know if it is possible to get the coordinates of the image after zooming.

Add options to hide div.zoomist-slider or div.zoomist-zoomer with sliding and zooming enabled.

repro:

1. Load the demo page.
2. Try to scroll horizontally (I'm using the touchpad on a laptop).

Zooming breaks in any direction after attempting to scroll horizontally.

Having the issue with css - import 'zoomist/css';
The above results with:
Cannot find module 'zoomist/css' from 'src/components/organisms/Component1.tsx'.

If I disable the error it works in storybook, but jest tests fail. Any idea?

• my Component

constructor(config: NgbCarouselConfig) {
config.interval = 100000000;
config.wrap = false;
config.keyboard = false;
config.pauseOnHover = false;

new Zoomist(".cat-zoomist", {
  maxScale: 5,
  slider: true,
  zoomer: true
});

}

• my style.scss

  .cat-zoomist {
    width: 100%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.cat-zoomist .zoomist-image {
    aspect-ratio: 4 / 3;
}

.cat-zoomist img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

this is my code , i'm not sure why there is an issue happen , do you have any advice ? my angular version is 7

CarouselComponent_Host.ngfactory.js:1 ERROR Error: Element .cat-zoomist is not exist.

you can go as much as you want by zooming out even tho the scrolling bar says it is at its limit.

Script tag include

<link rel="stylesheet" src="zoomist.min.css"/>
<script src="zoomist.min.js"></script>
<link rel="stylesheet" src="https://cdn.jsdelivr.net/gh/cotton123236/zoomist@latest/dist/zoomist.min.css"/>            
<script src="https://cdn.jsdelivr.net/gh/cotton123236/zoomist@latest/dist/zoomist.min.js"></script>

All need to be href not src

Basic Usage Section

const myZoomist = document.querySelector('#my-zoomist')
new Zoomist(zoomistElement, {

Is myZoomist suppost to be zoomistElement?

It would be nice to add a reset button under zoomist-zoomer, for example )

Below you find the compilation error which I am getting.

./node_modules/zoomist/src/scss/index.scss:1:0 - Error: Module parse failed: Unexpected token (1:0)
File was processed with these loaders:

• ./node_modules/resolve-url-loader/index.js
• ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js
  You may need an additional loader to handle the result of these loaders.

.zoomist-container {
| position: relative;
| touch-action: none;

After Angular update to V17, the current version of Zoomist ("zoomist": "^1.1.1") throws following error during build:

./node_modules/zoomist/src/scss/index.scss?ngGlobalStyle:1:0 - Error: Module parse failed: Unexpected token (1:0)
File was processed with these loaders:

• ./node_modules/resolve-url-loader/index.js
• ./node_modules/sass-loader/dist/cjs.js
  You may need an additional loader to handle the result of these loaders.

.zoomist-container {
| position: relative;
| touch-action: none;

Using the newer version of Zoomist 2 ("zoomist": "^2.0.11" ) resolves the above issue, but throws up a different error during build:

Error: Can't resolve 'node_modules/zoomist/src/scss/index.scss'

Hi, great work on this library. I want to use this and after zooming and dragging use the click event to get coordinates of the position I clicked on the image. But it seems I am not able to use the click event. Can I override this somehow?

Regards
Mark

at the moment, using the zoom buttons uses the center of the image as the focal point to zoom into. this is not really useful, when e.g. using zoomist to generate a profile image or avatar. for that use case it would be great to add a setting, that uses the center of the wrapper as the focal point.

Hi, thanks for building Zoomist... is far the best zoom library.
I have used without issues and works brilliantly but now I need to get back the image that has been transformed as base64 to be uploaded in the server.

I have tried several things but the image is just stays as the original image and I can see only the styles properties changing so I don't have a way to get the new image fully transformed.

If you can please help.

I'm using zoomist with images that are being pulled in via an API, so they're of a set width, height, orientation, etc. It's working great but one thing that would be beneficial for my project is if the images were landscape as opposed to their original portrait. I have naturally tried doing this with CSS but Zoomist hates it because it's accounting for the image being portrait as opposed to landscape so it won't fit well in it's container and it sends the panning of the image off as well.

In short, is there any way to rotate an image in Zoomist which keeps the pan and zoom functionality intact?

An error is raised when trying to use this library on Safari Desktop due to the use of TouchEvent (see caniuse)

ReferenceError: Can't find variable: TouchEvent

Is it possible to fix it ?

Currently the zoom buttons (+/-) are SVGs and some browser does not support focus for SVG.
We are working on application that supports accessibility and tabbing/focusable is a must.

It would be great if these buttons are focusable.
Thanks

Hi there! I didn't know any other place to reach you, so here I am.
I've made Ts definitions for your library on DefinitelyTyped, maybe you wouldn't mind to review them and help me maintain them?
I'm using them in a tricky way through my git repo, so I want them to be published ASAP.
Thanks in advance for your assistance!

Zoomist v2.0 no longer works.

Using the CDN version - https://cdn.jsdelivr.net/gh/cotton123236/zoomist@latest/dist/zoomist.min.js

The following error is displayed in Chrome:

zoomist.min.js:7
Uncaught SyntaxError: Unexpected token 'export' (at zoomist.min.js:7:17636)

And in Firefox:

zoomist.min.js:7
Uncaught SyntaxError: export declarations may only appear at top level of a module

This appears in all version 2 packages.

The last working commit was on 11 August 2022.
https://github.com/cotton123236/zoomist/tree/bdf1158e9022c6eb161ad92095c703df855c0508

This version includes the dist/zoomist.min.js file which works correctly.

I would really like to use Zoomist in a current project, unfortunately, if implement on mobile the whole image container becomes a "deadzone" for scrolling. Especially when a bigger portrait image occupies a lot of screen real estate, the user has to search for some left over whitespace to continue scrolling.

To counter this problem, I was planning to set the container class to touch-action: manipulation; and change it to none in case of a zoom event.

From my understanding, I would have to give every container some kind of id-name and have it initialised separately.
Is it possible, to keep that naming global and trigger that css change with zoom(zoomist, scale) {...} only for the zoomist-container that is being used ?

I'm in a project with a Typescript codebase and would love to import your project but can't because of the lack of typescript support.

Currently @types/zoomist still has data structure of version 1.1.0
While in the latest version (1.1.1), some data structure have been modified/updated.

Would you update the data structure in @types/zoomist and publish the package for version 1.1.1

Hi. Thanks for the script. It works fine, but there is a situation. I'm building a slide show on UIKit using the
Zoomist.
The first slide works fine, but when the inactive slide becomes active (gets uk-active class) the zoomist-image has no size, i.e. style="width: 0px; height: 0px; left: 0px; top: 0px;" fill: "contain" is set in the parameters

If fill: "none", then zoomist-image is sized, but the left, top position is broken and the image crawls off the screen.

Hi,

Great library. Any chance for a compiled version to get it working with React and NextJS?

Thanks.

I have a very standard implementation except i'm using Alpine-JS models. Sometimes when images load, they load with a width/height of 0px. resizing the image does not fix it. Anyone know of any reason this could happen?

Uncaught SyntaxError: Unexpected token 'export' (at zoomist.min.js:7:17636)

Hi there. Is there a way to begin with an initial zoom and position state? For example, I would like an initial zoom of around 0.8, then allow people to zoom out to see the whole image. Alongside that, can I set an offset to the image, so the image shows a particular place first? Thank you for your time!