kingdido999 / zooming Goto Github PK
View Code? Open in Web Editor NEWπ Image zoom that makes sense.
Home Page: https://kingdido999.github.io/zooming
License: MIT License
π Image zoom that makes sense.
Home Page: https://kingdido999.github.io/zooming
License: MIT License
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 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
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.
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.
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
Steps to reproduce:
enableGrab: true
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())
Hi, is there any possibility to zoom in on high res image on hover? I've only found on click. Thanks!
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.
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.
Ability to open zoomed image in new tab on Ctrl + click
or cmd + click
(for macs)
Hi,
Do you plan to add mobile/touch screen support?
BTW, zoom.js works pretty well on touch screens.
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
.
This is happening when image-zoom-overlay
class is applied when zooming in:
this._overlay.classList.add('image-zoom-overlay')
Getting this error when compiling my javascript: Error: Couldn't find preset "es2015-rollup" relative to directory "/Users/β¦/node_modules/zooming"
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 :(
This boolean option will zoom in the image no more than its actual width and height (use data-original image if supplied).
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:
Use-case: fixed chat container with images in messages that can be zoomed when page is scrolled down.
Mb fixed position for zoomed image?
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
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?
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?
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.
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.
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.
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!
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.
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
Hi,
Is there an easy way to disable 'extra zoom-in and drag' on the aready zoomed in image?
Keep up the good work!
For feature request or questions, ignore everything below.
For any issue related to demo page, please include the following details:
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" )
I see an issue in page:
https://codepen.io/anon/pen/jmYLqb?editors=1010
Steps to reproduce:
Use-case: preview image with different aspect ratio than original.
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,
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
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.
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?
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
action to recurrence
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.
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.
tanx for your perfect plugin.
any plan for creating gallery on multiple images on this way?
it is wonderful to have such this option
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 see an issue in demo page:
Steps to reproduce:
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 π !
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.
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).
.grid {
column-count: 2;
column-gap: 1rem;
figure {
display: inline-block;
margin: 0 0 0 0;
width: 100%;
}
}
Would be great to have the ability to add captions as well as controls for fullscreen and previous/next if used in a gallery.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.