s-yadav / iv-viewer Goto Github PK
View Code? Open in Web Editor NEWA zooming and panning plugin inspired by google photos for your web images.
License: MIT License
A zooming and panning plugin inspired by google photos for your web images.
License: MIT License
Sudhanshu,
Thanks so much for developing the image viewer. I had evaluated quite a few earlier this year and found none then that did what I want, were understandable, or were easy to use. I just found yours today and it is perfect in all those respects, well, almost. And so a few thoughts...
A callback when the image is loaded would be helpful so that I can extinguish a busy indicator. I added a call to my code at the end of the function "refreshView()" but would prefer an officially supported callback as an option.
My images vary widely in size. When I set a zoom that is suitable for the largest it is much to large for the smaller ones. Please consider an optional alternate expression of the zoom factor based on pixel ratios instead of percent. For example a pixel zoom factor of 1:1 would be a suitable maximum for my largest and smallest images.
I love the snap view, makes it very easy to pan around the large images. However, I believe that it should be at a fixed position on the screen and not scroll with the image. Even better, the fixed position could be specified in an option.
The horizontal and vertical scroll bars are always visible on the screen, even when not needed. I tried briefly to work around this by placing my image in a division which was slightly smaller than the outside container but that was not effective. I suggest that you only show the scroll bars when zooming, not for the original image view.
You can view my use of ImageViewer on the "Asmt Map" or "PClass Map" tabs at my site:
https://pogodata.wrwetzel.com
By the time you get to view it I may have combined the tabs into one "Static Maps" or just "Maps" tab as your library makes it possible to work with multiple images. That saves real estate on the tabs bar.
Thanks again,
Bill Wetzel
I tried using a small image, 102x132 pixels for the small image and a larger image 884x1151 for the larger image, and the zoom/pan did not work. Or, it was not visible?
Are there optimum sizes for the two images?
Is there a necessary relationship between the two image sizes that needs to be maintained for the plugin to work optimally?
Thanks!
Mark
Hi, firstly many thanks for this great viewer!
It is possible to add a gray or shaded backgorund
to the close button? like this:
https://www.freeiconspng.com/uploads/silver-close-button-png-15.png
I use ImageViewer for mostly white background documents
and hard to find a white button on the white.
Other thing: on Android smartphones the close button is
very small. It is possible to make it larger?
And the tird: It is possible to assign browser back button and
Android back button to close the viewer instead default history_back?
Thanks a lot,
Peter
Is there a way, in the container mode, to use HTML for the source of the images?
The way it is used for the Full screen mode.
I have several images that are displayed one by one in a container, Most of the time when naviagting between the images, the viewer.load(lowres,highres) works perfectly... but about 1/0th of the time the new image comes up oddly expended (not physically) and appears distorted.
Going away to another image and then back can help and things are normal again.
I see nothing the the dom to indicate an issue.
Have a look at one.jpg (below) that is how it should look and two.jpg as it appears now and then
.
viewer.refresh()
viewer.zoom()
are reporting as not a function
Maybe I'm doing something wrong?
is it possible to use iv-viewer with a map tag?
If so, can you please elaborate on how to use it?
thank you :-)
Mobile mediaquery hides the viewFinder. Move logic is under viewFinder code and it uses viewFinder height and width for calculations. When viewFinder is hidden browser gives 0 for width and height -> panning won't work.
Logic need to be changed so that the panning is done on image space and viewFinder is updated (if visible)
For fast fix I just changed the mediaquery so that viewFinder is always visible but just drawn outside of the view.
@media screen and (max-width: 767px) {
.iv-snap-view {
top: -9999px;
}
}
This is a sample setup
<div style="display: block; background-position: -10000px 0px;" id="slideshow">
<div class="imageContainer iv-container">
<div style="display: none;" class="iv-loader"></div>
<div class="iv-snap-view"><div class="iv-snap-image-wrap"><img style="display: inline; width: 150px; height: 150px;" class="iv-snap-image" src="https://localhost:4443/owncloud/index.php/apps/gallery/preview/53455?&width=2600&height=2600&"><div style="top: 0%; left: 0%; width: 100%; height: 100%;" class="iv-snap-handle"></div></div><div class="iv-zoom-slider"><div style="left: 0px;" class="iv-zoom-handle"></div></div></div>
<div class="iv-image-view"><div class="iv-image-wrap"><img style="display: block; width: 918px; height: 918px; left: 164.5px; top: 0px; max-width: none; max-height: none;" class="iv-large-image" src="https://localhost:4443/owncloud/index.php/apps/gallery/preview/53455&width=2600&height=2600&"></div></div>
</div>
</div>
and the code used
var container = $('#slideshow')
var imageContainer = container.find('.imageContainer')
var viewer = ImageViewer(imageContainer );
viewer.load(image.src);
The slideshow CSS
#slideshow {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 100000;
display: none;
background-color: black;
background-position: center center;
}
The large image has the following style applied to it: width: 918px; height: 918px
, but the original image is 50x50.
I've tracked it down to this line, which stretches the image to fill the container:
https://github.com/s-yadav/ImageViewer/blob/master/imageviewer.js#L608
I think there should be a limit applied, using the initial zoomValue.
Panning on desktop firefox causes image to be dragged and dropped instead of panning.
adding estart.preventDefault() to the end of the touchstart/mousedown event fixes the issue.
img
containing a small imageThe image sits top left instead of being centred
iv-container
at 100% in hope it will keep all the sub-divs centredImages are now centred, but they're stretched to fill the screen
In Image Mode (have not tried the other modes), a double click zooms to the center of the container. I think it would be better if it would zoom to the current mouse cursor position - like the mousewheel event already does!
This only happens in Chrome, not IE. I don't know if it's being caused by combo w/ other libraries (Knockout.js) for example. But in the screenshot, it's the gray areas. Ignore the white areas, I was trying to hide sensitive data. When you move your mouse around, these gray areas popup briefly then disappear, but it basically makes the app unusable.
Any ideas? We're using the ImageViewer in container mode. Is there maybe code to reinitialize the selected images that I'm not using properly?
My code is below the attachment.
Is there any way i can rotate the displayed image? If not this would certainly be a nice feature!
Hi,
i am trying to show zoom view on modal image click. Zoom view showed but behind the bootstrap modal. How to solve this issue?
What is the way to preview the bunch of 10 image as gallery view so that I can go next/prev using arrow?
As of now iv-viewer api supports only one image which will be displayed in full screen mode. So, now we would like to navigate multiple images in full screen mode. So can you please provide an api that supports displaying multiple images with Prev & Next navigation buttons in fullscreen mode
hey, you did a really nice job with this imageviewer, but i found a thing.
so your example code in the html for the fullscreen example is
<img src="images/1.jpg" data-high-res-src="images/1_big.jpg" alt="" class="gallery-items">
but it is loading 1.jpg in fullscreen mode instead of 1_big.jpg
thank you
Hello,
first I want to thank for this nice library, but I have one issue:
I have a list of images, which upon clicking on them I load into the image viewer. When loading the second image, it seems that the first one does not get removed. Having a look inot the debugger tools of the browser, it reveals that with every imageViewer.load a new image is added (I am only loading the image with one url, so no hi res image url present).
The images are added with the classes iv-image iv-small-image. Looking into the source code of iv-viewer in the method _loadImages, I can see that only the images with the following classes are removed from the dom iv-snap-image, iv-large-image. I guess thats the reason why the images stay there. Removing the snap image works as expected.
Any advice?
Thx
Markus
Excellent viewer. In addition to the thumbnail to full view, is there a way to have the same effect but from a text link - e.g. "Picture of a dog" when clicked on displays the image in the same way as the thumbnail does?
Thanks
Gavin
I'd love to be able to handle an event when the full-screen viewer closes.
I can see that there's an events array in the code, but I can't find any reference to accessing it externally without modifications.
Even an onClose callback option would be fine, but I'm sure other people would have use for other behaviors, too.
I wanna rotate big picture every time when click the rotatebutton. . How can i add it to the project. pls help me :) (by the way, i never chance the project or codes)
Hi,
Thank you for this wonderful plugin, it works great on desktop and mobile devices.
I was wondering if there is currently a way to render the original size of the image on full screen? I am loading a 250 X 250 px image on imageviewer via full screen and it shows pixelated on a 24" monitor.
ie.
From: https://goo.gl/photos/fbEBwHqspbjDVBV88
To this: https://goo.gl/photos/FVg9ANB64HoiP7A18
Thanks
The data attribute .data('high-res-img'); should read -src not -img
I tried using this library using a script import as well as a npm dependency, however both times I ran into errors on calling the ImageViewer()
function.
When using <script>:
ImageViewer() is not a function
When using npm:
TypeError: Cannot call a class as a function
The image is not centred at the same time it's zoomed out and all the sudden, the position is reset.
Are there any plans of porting it to AngularJS?
Don't work in IE10.
i'm creating multiple image sliders in container mode in a project, you can check the url https://www.ncbs.res.in/ncbs25
The images load well in chrome, however in firefox, the loading times are too high when compared on same network. Have you come across this issue?
Hey i really loved your imageviewr code. I had doubt on how to disable infinite images and enabling mouseover zoom & move option and also how to include a rote option for the images. Thanks a lot for this code it really helped me.
:active is cancled due to event.preventDefault()
in mousedown
event
See: https://stackoverflow.com/a/53930302
My solution:
Add this.container.style.cursor = 'move';
to Slider.js in startHandler
and
Add this.container.style.cursor = '';
to Slider.js in endHandler
Also remove unnessecary css
.iv-image-wrap:active {
cursor: move;
}
please let me know how i can close my opened image via esc button i tried it but not succeed so please help me..
Sorry for poor format..
Hi,
with the "zoom(zoomValue, point)"-method I can set the view - but how can I get the current values (zoomValue and point)?
I'd like to save the current view for the image and restore it later.
Mynock
I cannot find this package on NPM. And it doesn't have a package.json
file for use with projects built with NPM.
Can we please have both?
Thank you for a great library!
I would like to know, how can I obtain the zoom position in percentages?
Lets say when I zoom to particular rect, how can I get the position, like width, height,x, y regarding to that original image?
I can't get the data-high-res-src to work, nor does it seem to work in the demo.
When pinch-zooming an image, the image tends to jump up/down/left/right at the end of the pinch.
I can reproduce this on mobile android chrome with all three examples of the demo at https://8ypwzryom0.codesandbox.io/
The issue may affect any touch device.
Problem happens when you are releasing pinch (release 1 of 2 fingers), but a touchmove event is sent before you release second finger. This happens unintentionally often enough with touch devices (and clumsy fingers).
Steps to reproduce :
use zoom at least once so the zoom level is > 100
do a pinch zoom in or out
release one finger
move the remaining finger
I have debugged it around and here is what happens in the code :
First touch : imageSlider.startHandler is called, defining sx & sy, and also calling snapSlider.onStart which defines startHandleTop & startHandleLeft
Pinch zoom : Slider.moveHandler does nothing because isSliderEnabled() returns false
When one finger remains : slider moves using reference values from first touch, which are kinda broken by the zoom.
I have fixed it for my app with the following code, feel free to reuse or make your own proper fix.
const endListener = (eEnd) => {
// unbind events
events.pinchMove();
events.pinchEnd();
this._state.zooming = false;
// properly resume move event if one finger remains
if ( eEnd.touches.length == 1 )
this._sliders.imageSlider.startHandler(eEnd);
};
const isTouchEvent = (eStart.type === 'touchstart' || eStart.type === 'touchend');
Hello,
I have the issue in Firefox that even whenn zoom is 100% and the snap image is not shown, the cursor changes to a hand at the places where the snap image would normally be shown.
Thx
Markus
Below the image there are 3 input fields, After zooming the image when I try tapping on the input text field the image unzooms and returns to original state. How do I disable this???
The issue is for a mobile device and not desktop browser.
I've removed the jquery requirement here: https://github.com/amritk/ImageViewer
Let me know if you want me to make a pull request, its still messy but it works.
I am currently in the process of updating our jQuery version (from 1.7 to 3+), and in the JQMigrate process they suggest upgrading any plugins as well. We are currently using ImageViewer v 1.1.0, but am not sure if I can safely upgrade to the new 2.0 version?
Thank you in advance!
Hi, I use ImageViewer in javascript. Web browser is ok. But ImageView is not zoom in and out of images on double tap in mobile device. How can i resolve this problem? Thank you.
Hello,
A definition file (.d.ts
) for this library would be appreciated.
Currently, TypeScript cannot infer any types (defaults to any
type) on import. And running npm install @types/iv-viewer
results in a 404.
Thanks.
ScrollZomm isn't working in FF 66.0.2 with 2.0.0-beta5.
I narrowed down the problem to e.wheelDelta
not e.detail
not beeing available here:
https://github.com/s-yadav/iv-viewer/blob/master/lib/ImageViewer.js#L613
My quick fix would be to change it to e.deltaY
When the inital image is loaded and prev button is pressed, then index is 0 and it is not handled, just add the below code to handle it. easy!
if(curImageIdx <= 0) curImageIdx = total;
showImage();
I use a single container ImageViewer with different images as selected by a user on a web page.
Sometimes the image is distorted... the fault is in the load code.
I made the following changes at the end of of the load function:
/////Critical change RMA 06/26/2018 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
// if (imageLoaded(currentImg[0])) {
// refreshView();
// } else {
// $(currentImg[0]).on('load', refreshView);
// }
$(currentImg[0]).on('load', refreshView);
/////Critical change RMA 06/26/2018 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
//refreshView();
So - we always refreshView on load, instead of testing imageLoaded(currentImg[0]).
Now, the resultant new image is correct, and not distorted.
I have enclosed the edited ImageViewer 1.1.3 file with my changes in place.
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.