fengyuanchen / viewerjs Goto Github PK

Hi there,
Thank you for creating such an awesome library. However, I found that when there are many images, such as my application which has 90 images on one page, the viewer just seems to stuck in IE 11 (no image is shown). Works fine in Chrome. Any ideas?

the error I am getting in IE is "Not enough storage is available to complete this operation."
Thanks!

Right now viewer works on top <img tag to get initialized. To get viewer load image, it needs original image to be loaded first. Do you have any plan to make this as independent viewer? I like viewer and like to make this to load images from a link, rather loading image in a image tag then load viewer. Do you have any suggestion for that?

https://jsfiddle.net/scottt732/axftkuup/3/

I'm load images with jquery to test whether they are wider than they are tall. As they load, I'm setting an attribute on the original img tags. I wire up viewer after all images are loaded and in the viewed.viewer event handler, I'm trying to apply the rotation automatically.

My goal is to render them 90 degrees clockwise rotated so they are always taller than they are wide (convert landscape to portrait). When I call rotate, I either get this.image is undefined. When I try 'rotateTo', it never performs the rotation because _this.isViewed is false in the rotateTo handler (method.js).

Image Background turn Black when rotate png image and save. you can test it with any png file.

Firstly thanks for taking the time to put this together its great!.

If you try to use code within a google maps 'InfoWindow' although the viewerjs opens its not visible to the user (this can be proven it opens and loads by registering events).

This is due to the size of the parent tag from within the InfoWindow which is has a limited size. (the width of 'viewer-container' is zero so you see nothing)

Basically the hack to get it to work is changing:

_this.parent = parent = element.parentNode;

to become;

_this.parent = parent = document.getElementById('photoGallery');

(The 'photoGallery' div is within the body of the page:). On a later version it would be good if you could specify the parent or it renders it at document level.

Chris

I want use viewerjs in my program which run on the ie8 , so i need jquery version. can you share the jquery source code ?

mousedown event on canvas is not triggered on my Android 5.1 phone.
addClass(canvas, CLASS_INVISIBLE)
It hides the canvas so it won't respond to any event. Removing this line did the trick for me.

Hi,

Is it possible to have multiple galleries on the same page? I have one working but can't seem to get more than that?

Thanks!

As the title,Let users exit image view mode by click on any region,not only by right top icon.

This can improve user’s effectiveness especially when this plugin be used for management system.

OR,How can I rewrite the template in template.js file,For I can just add "data-action="mix"" within <div class="viewer-canvas"></div>

Hi there

Love the popup by the way, does everything I would like it to do and more.

one question when viewing on a tablet when you click play and go full screen how do you escape from fullscreen and go to normal view?

Using an official Windows 7 VM with IE 9 version 9.0.8112.16421
The plugin loads, with the background image and the tool bar, however the zoomable image fails to load. The VM I used is accessible from here https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/. Screen shot attached.

When you rotate zoom and pan on a page and go to another page, the rotate zoom and pan attributes gets reset. Is there a way to retain those attributes so that they don't have to do that again and again on same page,same picture..?

It will be a great feature if there will be free rotate buttons on the toolbar which will do ++degree or --degree rotation on both sides. It seems the plugin already has the appropriate API to achieve this but I couldn't figure out to add these kind of custom buttons on the toolbar.

Also if button customization will be allowed users can easily design such features with this kind of powerful API. Great work!

In this pinch zoom not working.Is it have?

If you are interested in a short URL for free have a look at JS.ORG.

How do I open up the viewer on page load, i.e., without having to click on the thumbnail?

I want use viewer.js in my project on ie8,but it can not support ,so i hope you can help to resolve.Thanks!

Hi! I was just introduced to viewer.js and it seems like a really cool tool. The page I was introduced to was the demo page and I have to admit, I was a little concerned that a wall of 9 glamour-shot-style pictures of Emma Watson might make some people feel less welcome/included to the project than a mix of different types of pictures or pictures with a more neutral theme (landscapes, etc.)

It's just a suggestion if you can empathize with this perspective and want to make everyone feel welcome to engaging with the project.

So, what's the point of the fancy keyboard support if i can't navigate to the gallery and it's items with the keyboard?

A couple suggestions on the navigation controls in modal mode especially...

If the display area is a landscape ratio and width / height is at least 1.25, then display the controls along the left side of the display. If the browser is touch capable (mobile or desktop), then use larger icons for the navigation controls... perhaps hidden behind a menu on the top-left, similar to the close button on the top right... Not sure if there is a common remote-control glyph that could be used for said menu (since the hamburger/dots glyphs may not be appropriate).

I just want to say this looks like a really nice control, and appreciate your effort... I also want to say I like how clean the UI is for it, moving away from the additions of lightbox style viewers.

Im using a componentDidMount and the only way to get viewer to work is by setTimeout. Is that not advised? Should I use another method? Heres a sample of the code:

componentDidMount: function(){
setTimeout(function(){
var viewer = new Viewer(document.getElementById('slideshow'), {button: true});
viewer.show()
viewer.play()
}, 2000)
var elems = document.getElementById('slideshow');
console.log("elems are ", elems);

I use following codes to bind "viewed" event,

HTML:

<div id="gallary">
    <ul id="images" style="display:none;">
    <li><img src="welcome.jpg" alt="欢迎使用"></li>
    </ul>
</div>

JS:

var g_viewerOptions = { 
    inline: true, 
    viewed: onViewed
};

$("#images").on({ 'viewed.viewer' : onViewed }).viewer(g_viewerOptions);

function onViewed(e) {
    alert(e.detail.index);
}

the onViewed() can be called after viewed one image, but the e.detail is undefined??
Can you help me?

From a Chinese user ^_^

Hi,

Viewer.js is awesome 👍

But ... would it be possible to have some options for which transitions it allows? For example, when I'm changing through images, I don't like zooming out then back in again, I just want it to go from one, to the next, to the next, ... but the rest of the time, I think the transitions add some niceness to it (particularly in zooming), so would it be possible to state which ones I can do that?

Also, I don't know if this is already posssible (I thought 'scalable' would do it, but no ...), but I'd like to disable the ability to flip the image? I have some images with text on, so they become useless if flipped (in fact worse, because some of the data - they are graphs - will be wrong and might be misinterpretted), so I'd rather not offer the option to do it!

Great work by the way!

Maybe it should be to hide viewer-one-to-one button, because there is no any use.

Hi.
First of all i would like to thank you for your awesome work on viewerjs.
Works like charm everywhere.
I have implemented viewerjs in my angular application using directives. It is working good.
But when i am trying to call viewer on images having ngreapeat tag on them, viewer is not popping up. no errors thrown. But images are not popping up.

html as
<div id="viewerjs" class="preview content" style="float: left;"> <img ng-repeat="item in arr" src="{{item}}" alt="1" class="editImage"> </div>

JS
var image = document.getElementById('viewerjs'); var options = {}; var vwr = new Viewer(image, options);

This is not working.

I have found 2 packes to install using bower
pls suggest the difference between

bower install imageviewer
AND
bower install fengyuanchen/viewerjs

Both are installing different packages.

As the title says.
When I try to pinch on any device, it instantly zooms in to 9000%.
I tried both viewer.js and viewer.min.js.
Still happens with both.

EDIT: Viewer version, Viewer v0.5.1

I tried long press on the picture in full screen mode, using Android Chrome. There is no menu popup allowing me to save the picture. However it works on iOS Safari. Any chance it can be fixed on Android Chrome?

但是问题是，里面的图片不会居中显示，这个问题怎么解决？请帮忙~~~

I really like your work on images! Awesome. Is there any plan to create Angular directive for Viewer.js? I have an Angular project and I like to use your plugin to display images. Please let me know.

Thank you

Hi, thank you for providing such a useful plugin, but i have some trouble in using ViewerJS, if the image is inside the bootstrap modal, viewer can`t view fullscreen, how can i solve this problem?

Thank U

Same error as #22 said.
update should tell if children images changed.
Why not just destroy and renew one?

First, thanks for great plugin.

Can you implement closed by clicking on the picture or outside?

Thanks :)

just saw this works only with img tag

It's a small thing, but when you open an image in a modal, the scrollbar of the main page disappears, and everything shifts/stretches to the right. It just feels a little weird, is all. Maybe something can be done to keep the main pages scrollbar present, even when modal is open.

I'm uncertain if video child elements are supported, but it would be a nice feature to add.

viewer works best on static image src of in html but when i try to use the class name of in main js where tag is in item.push of javascript it does not zoom image at all please let me know how it works in item.push img tag

Hey i'm just wondering if its possible to load the image viewer via click a button while the images stays hidden in the background or something?

Hi, first of all, you build an amazing component.

I have your component in a modal, inside the modal I use the inline mode (needed that way). When I click to fullscreen the modal became the full screen and not the complete window, how can I do to the componen use full window and not the modal context?

My image sources is in <tbody> <tr> <td><span><img src='abc'> this was populated dynamically where viewer.js is not picking up on preview.

Static files working good

Do you have a striped back version of the demo and with everything set to minimal?
i.e your demo, white page just the images which when you click they open in a light-box.
I am struggling to do this myself can you help??

Hi,

Is it possible to have multiple galleries on the same page? I have one working but can't seem to get more than that?

Thanks!

初始化时

<ul id="images">
</ul>

var viewer = new Viewer(document.getElementById('images'), options);

然后通过AJAX请求图片，之后update

viewer.update();

JS报错， update方法里面的 _this.images 为 undefined.

PS：我为什么不在Ajax请求后new Viewer()？因为这个是对话页面，Ajax轮循获取消息，不保证每次请求都有返回，不保证每次返回都是图片消息。所以只能先初始化。

Is there a way (in case I show a single image) to make the image draftable in the view using mobile events?

Right now, swipe switches between pgotos and that's weird on a single image

1st of all thanks for the awesome and lightweight lib. I have implemented viewerjs and works fine. I would like to customize toolbar. eg: I don't want rotate and flip option in a toolbar. Can viewerjs provide this option from next realise?

I noticed that when you zoom on a page and go to another page, the zoom attribute gets reset. Is there a way to retain that attribute so that they don't have to zoom on every single page?

document.getElementById

instead of

document.getElementsById

Hi! How about add endless mode for viewer?
It seems as if you on last image, the next image is first image
Please, add that feautere, or some event for this. Thanks

that on russian (sorry for my bad english, maybee some program can translate it from russian better than me):
Привет! Как насчёт добавить бесконечный режим для viewer'а?
Это должно быть так: когда ты доходишь до последнего изображения, нажатие на стрелку "дальше" должно отправлять на первое изображение (так, чтобы они повторялись по кругу)
Пожалуйста, добавьте возможность включить такой режим (например, какой-то флаг в опциях), или какой-то event, когда пользователь достигает последнего изображения.

Hi,

Is it possible to have multiple galleries on the same page? I have one working but can't seem to get more than that?
Please describe as detailed as possible.

I know that
new Viewer(gallery1);
new Viewer(gallery2);
new Viewer(gallery3);
...
new Viewer(galleryN);

I can not introduce

Thanks!

fengyuanchen/viewer#15