tanx for your perfect plugin.
any plan for creating gallery on multiple images on this way?
it is wonderful to have such this option

Currently, only very basic Zooming APIs are tested through mocha in browser. We should probably include some end-to-end tests by leveraging a web automation framework.

awesome-test-automation

Im using "rollup": "^0.56.1", to bundle my js. So I would love to be able to import ES6 modules by default if possible. In case of Zooming package, it is not possible for me at the moment.

However, i can make it work when I add this line "module": "src/index.js" to the Zooming package.json so my rollup can find the (source) es6 module and import it simply as that import Zooming from 'zooming';. See https://github.com/rollup/rollup/wiki/pkg.module

Would be great to have the ability to add captions as well as controls for fullscreen and previous/next if used in a gallery.

I see an issue in page:
https://codepen.io/anon/pen/eWyEGR?editors=1010

OS: Ubuntu 16.04 (64-bit)
Browser and version: Chromium Version 58.0.3029.81

Steps to reproduce:

1. open codepen example
2. scroll one screen down
3. zoom image
4. see that it has wrong position

Use-case: fixed chat container with images in messages that can be zoomed when page is scrolled down.
Mb fixed position for zoomed image?

Please help me config with image size greater than full screen.

I want to display a full size image.
And I want to scroll left or right or up and down to see the whole image instead of turning it off.

example image 1366x4900 or 1799x800.

Please help me.

Thanks.

Hello, I have an issue with your otherwise excellent library.

If I set all the attributes for zooming in the HTML, no problem, but if I try something like this:

$infoPanel.html("<img src='contenuti/ap" + thumbID + ".png' data-action='zoom' data-original='contenuti/ap" + thumbID + "_z.png'/>");

(html: <div id="infoPanel"></div>)

zoom doesn't work anymore.

Am I doing anything wrong or is it supposed to be like this?

Thank you.

First of all, this is a great project, thanks! However, I am having difficulties using this project along with a Bootstrap carousel, I have forked your page on codepen and have integrated a default Bootstrap v4 carousel. If I then click on an image in the carousel, the zooming animation gets triggered but the screen stays blank, seems to be on multiple browsers. Any idea what is causing this? I assume it's likely not related to the zooming.js itself, but due to some technicality in the Bootstrap framework, so apologies if this would not be the right place to ask this. Thanks in advance.

https://codepen.io/winterdedavid/pen/RQMoNN

Hello @kingdido999

When I'm trying to use the lib in the following way:

let
  Zooming = require('zooming/build/zooming'),
  zooming = new Zooming( {} );

It throws an exception:

Uncaught TypeError: this.setStyle is not a function
    at Zooming.config (zooming.js:816)
    at Zooming (zooming.js:463)

But the following code without configuration object works fine:

let
  Zooming = require('zooming/build/zooming'),
  zooming = new Zooming();

zooming.config() doesn't throw an exception, but seems it has no effect at all:

let
  zooming = new Zooming();
  
zooming.config({
  defaultZoomable: 'img[data-action="zoom2"]',
  scrollThreshold: 250,
  transitionDuration: 2.4
});

I use version

zooming@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/zooming/-/zooming-1.0.0.tgz#c44018c213fcf91561fe95155bba58f83237677a"

I'd appreciate any help.

• OS: Ubuntu 16.04
• Browser and version: Chromium Version 58.0.3029.110 Built on Ubuntu , running on Ubuntu 16.04 (64-bit)

Steps to reproduce:

1. open https://codepen.io/anon/pen/owWmrg?editors=1010
2. click on image
3. click on white overlay around image - nothing happens
4. set enableGrab: true
5. click on image
6. click on white overlay around image - image properly zoomed out

As i debugged instance.close method has wrong this reference on overlay click - clicked element instead of zooming instance.
It works with 1.1.6 due to explicit method call instead of method reference passed as listener callback

this.el.addEventListener('click', () => this.instance.close())

I see an issue in demo page:

• OSX version 10.12.5
• Chrome version 61.0.3141.7

Steps to reproduce:

1. go to the demo page
2. click on an image to open zooming
3. try to resize the windows

I'm not sure it's a bug or a missing feature but here image are not responsive.

If it's not a bug it could be nice to add this option into zooming.js core, it shouldn't be difficult to do.

Anyway thanks @kingdido999 for this nice plugin I like it a lot 😄 !

Hello,
I've read your documentation and I can not get automatically selector ID of target photo when it zoomed. I want to manipulate with it by onBeforeOpen/onBeforeClose function.
How to get target photo ID via function or something else?
Thanks

Hey, I have an issue with the latest version (1.0.9), the images don't appear in the middle of the screen because the windowCenter function returns a "wrong" value, if I change the code to the one below it does take the correct windowCenter:

function getWindowCenter() {
        var docWidth = docElm.clientWidth || body.clientWidth;
        var docHeight = window.innerHeight; // this didn't work: docElm.clientHeight || body.clientHeight;

        return {
            x: half(docWidth),
            y: half(docHeight)
        };
    }

I’ve tested the demo in my browsers on Windows 10, and when zooming in on an image, the horizontal scrollbar appears. I think this is because on Windows scrollbars take up space, and on Mac they don’t (they’re overlaid), so your calculation is incorrect on Windows. Just a guess!

A fixed position wrapper with absolute image position and an image placeholder (since the actual image no longer takes space) would resolve some existing issues. This would require a big portion of rewrite though.

Didn't the earlier version of the plugin allow to zoom out(close) on clicking a zoomed in image.That doesn't seem to work now.

Ability to open zoomed image in new tab on Ctrl + click or cmd + click (for macs)

Hi, is there any possibility to zoom in on high res image on hover? I've only found on click. Thanks!

action to recurrence

1. open demo page
2. zoom in any image
3. grap and keep
4. press esc

Hello Guys, I'm using react and my component can be rendered multiple times.
I instanciate in componentDidMount like this (new Zooming()).listen('.zommable')
So how can I remove/clean all previous listeners before re rendering ? thanks

I get an error in Webpack 2 when I try to do import Zooming from 'zooming';

Uncaught SyntaxError: Unexpected token ;
    at Object../node_modules/zooming/src/main.js (global.js:4121)
    at __webpack_require__ (global.js:660)
    at fn (global.js:84)
    at eval (sitewide.js:1)
    at Object../assets/sitewide.js (global.js:843)
    at __webpack_require__ (global.js:660)
    at fn (global.js:84)
    at eval (global.js:4)
    at Object../bundles/global.js (global.js:851)
    at __webpack_require__ (global.js:660)

But when I change main.js to include a semicolon at the export default like this export default Zooming; it works.

Can we fix it in this project or should I go to the Webpack repo?

I see an issue in page:
https://codepen.io/anon/pen/jmYLqb?editors=1010

• OS: Ubuntu 16.04 (64-bit)
• Browser and version: Chromium Version 58.0.3029.81

Steps to reproduce:

1. open codepen example
2. click on image
3. :peka:
   

Use-case: preview image with different aspect ratio than original.

About your example of zooming while hovering #31.
When photo was zoomed via hover event if you begin to grab and your mouse is outside of image, photo is zooming out and it doesn't work anymore. It works only after reload a page.
How to fix it?
I think it need add if statement to

img.addEventListener('mouseleave', function onMouseLeave (event) {
			zooming.close()
		  })

Something like this

img.addEventListener('mouseleave', function onMouseLeave (event) {
    if(grabbedFunc_is_not_run){
	zooming.close()
    } else if (grabbedFunc_release)
        {zooming.close()
    }
 })

But I didn't found this events in ducumentation. Maybe it needs to work with drag, dragend events, but maybe there is an easier way.
Thanks

Hello
How to dinamically initialaze new photoes?
I add new photo with markup of data-action='zoom' then I add code:

var zooming = new Zooming({
	  defaultZoomable: 'img[data-action="zoom"]'
	});

After that it doesn't work properly
I can not find re-init or rebuild function in your documentation
How to do that?
Thanks

https://rollupjs.org/guide/en#rollup-rollup

The current behavior is to exit the zoomed overlay when the user scrolls more than scrollThreshold. However, the library only supports vertical scrolling, and horizontal webpages just become blank as the user scrolls and scrolls.

A solution would be to implement lastScrollPositionX and lastScrollPositionY instead of just lastScrollPosition, and check for both deltaX and deltaY. I'm willing to send a tentative workaround pull request if needed.

We have a global configuration to manipulate image width and height after zoom-in via scaleBase, scaleExtra and customSize, but we lack the ability to customize each individual image.

I propose a feature to zoom image into the given width and height via data attributes:

<img data-src="image.jpg" data-zooming-width="1920" data-zooming-height="1080" data-action="zooming" />

And they should overwrite any global image scaling configuration if applicable.

If the parent of the image is styled as overflow: hidden, the image will not be visible. Needs to find a way to ignore overflow: hidden.

Hello,

When I use two fingers (like you normally would to zoom) it zooms in really close.

I would expect it to let you zoom closer and further away since it seems to zoom in when you hold your finger over the image :)

I am using chrome 55 on my Nexus 5x

This is happening when image-zoom-overlay class is applied when zooming in:

this._overlay.classList.add('image-zoom-overlay')

When you zoom in, and then zoom out by clicking OUTSIDE of zoomed in image, there is an error in the console:

Uncaught TypeError: cb is not a function(…)

Tried on Chrome and Firefox on Windows.

At this moment, the image referenced in the data-original attribute is loaded on page load. Is it possible to lazy load that image when activating zoom? Any plans to add this functionality in the future?

Kind regards,
Jan

When the image is inside a CSS column layout, the zoomed image stay in the column layout, and the bottom wrap on the next col when the zoomed image is grabbed (which is both weird and awesome).

• OS: OSX
• Browser and version: Chrome 60

The grid

.grid {
  column-count: 2;
  column-gap: 1rem;

  figure {
    display: inline-block;
    margin: 0 0 0 0;
    width: 100%;
  }
}

The bug

last image on the left col

last image on the right col

For feature request or questions, ignore everything below.

For any issue related to demo page, please include the following details:

• OS: Linux
• Steps to reproduce:
  npm install zooming --save

add reference in archive app.module.ts
import { Zooming } from 'zooming';

add data-action to an image in .pug file
img.img-responsive([src]="imageZoomText.imagePath", data-action="zoom" )

Additional comments:
hello, this is not working

Hey, pretty cool project!

I noticed that the data-original functionality doesn't work with img's srcset. Replacing the image's src doesn't change the image since srcset takes precedence. This is usually used for responsive images.

Edit: just noticed this commit 717b997, which isn't included in the latest version.
Closing this issue.

Image blinks when changing src (for the first time) in OSX Firefox 50.0.2 and Android Firefox 50.0.2. The images do get preloaded though.

hi,
i was testing this library on same browsers: chrome 56, firefox 51, edge and ie11.
everything works fine except in ie, showing this kind of error in console:

SCRIPT438: Object doesn't support this property or method
zooming.js (914,5)

i think this line break the script
this.options = Object.assign({}, OPTIONS);

thanks for your work!

This boolean option will zoom in the image no more than its actual width and height (use data-original image if supplied).

Considering using this but the demo only displays a zoom interaction in which the image is clicked and then zoomed over the entire document width.

Curious if there is any possibility of being able to zoom within an element like a div with a defined height/width?

Is there a way to limit the grab pan area?

Possibly with a margin option with the ability to specify the amount in px.
Then the maximum amount of white color one could see from the edge of the image to the edge of the browser would be this margin amount in px.

I have very limited coding experience and do not know how to approach this.
Any help greatly appreciated.

DEMO

• OSX
• Chrome Version 60.0.3112.113, Firefox 55.0.3

Getting this error when compiling my javascript: Error: Couldn't find preset "es2015-rollup" relative to directory "/Users/…/node_modules/zooming"

Solution:

It can be fixed by removing .babelrc from the npm package (adding it to .npmignore). It is obviously good practice if you google it around. .babelrc with specified preset present in npm package makes my Babel to look for the preset specified in the package which I dont have installed (es2015-rollup in the package vs. env in my project).

Dont know why I didnt get this error before :(

The current test focuses purely on API and is certainly not enough. This library is essentially about UI interaction and heavily relies on DOM events, but I find it hard to actually test out the interaction like a real user would do. I'm pretty new to this kind of testing, any idea/suggestion on the testing strategy is appreciated.

Hi,

Is there an easy way to disable 'extra zoom-in and drag' on the aready zoomed in image?

Keep up the good work!

Hi,

Do you plan to add mobile/touch screen support?

BTW, zoom.js works pretty well on touch screens.

I'd like zoom to at most to the original image's size. It seems that the only way of doing that is with customSize or data-zooming-width / data-zooming-height, which requires knowing the image size. The two values also override the max scaling as well, meaning that I'd have to ajust those depending on the user's window size.

Any way an additional option could be added in for this use case?