s-yadav / iv-viewer Goto Github PK

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

.

: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;
}

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?

is it possible to use iv-viewer with a map tag?
If so, can you please elaborate on how to use it?

thank you :-)

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?

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'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.

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

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

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.

imageviewer_load_fix_113.zip

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?

Are there any plans of porting it to AngularJS?

What is the way to preview the bunch of 10 image as gallery view so that I can go next/prev using arrow?

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.

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

Test 1

1. Create a container with both width and height set at 100%
2. Append an img containing a small image
3. Apply ImageViewer to the image (Image Mode)

The image sits top left instead of being centred

Test 2

1. Create the same setup as above
2. Set both width and height of iv-container at 100% in hope it will keep all the sub-divs centred

Images are now centred, but they're stretched to fill the screen

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.

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.

I can't get the data-high-res-src to work, nor does it seem to work in the demo.

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?

Is there any way i can rotate the displayed image? If not this would certainly be a nice feature!

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!

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.

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

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 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,

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

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)

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;
}
}

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

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

Don't work in IE10.

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..

viewer.refresh()
viewer.zoom()

are reporting as not a function

Maybe I'm doing something wrong?

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

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 :

1. use zoom at least once so the zoom level is > 100

2. do a pinch zoom in or out

3. release one finger

4. 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.

1. _pinchAndZoom endListener

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);
};

2. I also had to adjust that line in Slider.startHandler :

const isTouchEvent = (eStart.type === 'touchstart' || eStart.type === 'touchend');

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.

Code:

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?&amp;width=2600&amp;height=2600&amp"><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&amp;width=2600&amp;height=2600&amp"></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.

The data attribute .data('high-res-img'); should read -src not -img

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

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.

For reference

Thanks.

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

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

1. Load the official demo
2. Go to the bottom of the page -> Image mode
3. Zoom in on the ballerina
4. Pan to the right
5. Zoom out

The image is not centred at the same time it's zoomed out and all the sudden, the position is reset.

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