fengyuanchen/viewer

⚠️ [Deprecated] No longer maintained, please use https://github.com/fengyuanchen/jquery-viewer

viewer's Issues

图片预览窗很容易被别的样式给污染

比如
< div class="xxx">
< ul>
< li>
< img src="xx" />
</ li>
</ ul>
</ div>

.xxx ul{...}
.xxx ul li{...}

The "button" option has no effect.

Whether the button option is set to true or false, the top right button is still there.

图片的拖动，缩放的交互逻辑问题

总觉得现在的拖动和缩放怪怪的，研究了一些其他图片查看软件的交互方式，发现一些共有的交互逻辑：

图片宽或高小于画布对应的宽或高时，这个轴向的拖动会被禁用，这个轴向的缩放原点不会用事件触发的坐标而是用画布中心点。
图片宽或高大于画布对应的宽或高时，这个轴向的拖动会受限到一定范围内，以保证图片区域完全包含画布区域（类似滚动条出现时的拖动交互方式），缩放的原点使用事件触发的坐标。

我 fork 了一个版本实现了这样的交互，因为不知道你对这种交互逻辑是否认可，所以还没有提交 pr。

ajax动态生成img 图片预览有问题啊There's a problem with uploading a picture before you preview it

先上传图片再预览图片会有问题
There's a problem with uploading a picture before you preview it

Disable mobile zoom

How to disable mobile zoom when the user drags two fingers on the screen? However, it would be interesting to zoom in if you press the "+" button. Thank you.

jquery 版本的动态加载图片时怎么调用update

jquery 版本的动态加载图片时怎么调用update

Mouse wheel zoom in outside pic

When I wheel my mouse in Red area,the picture still zoom. But For Move action, I must mouse "on" Picture.
Can i zoom pic like move action ,only reaction when mouse on pic.

Pinch Zoom broken in Android Chrome 55

It directly zooms into the max ratio when you starts to pinch.

load large size image by thumbs, it will display the larger image first and then show resized

Maybe cause by js dynamic change the image size, but before that, large size image already loaded and show.

如何在弹框查看图片大图,让大图在整个可视区域显示,而不是局限在弹框中

Enabling viewer on dynamically loaded images

I am loading a thumbnail dynamically using this code, which works fine.

$gallery.on( 'cellSelect' , function() {
  var element = flkty.selectedElement;
  var thumb = $(element).attr('data-thumb');
  var $thumbs = $(".thumbs");
  $thumbs.html( thumb );
  }); 

The data-thumb is formatted like this:

data-thumb='<img class="mini" data-original="slides/big.jpg" src="thumbs/small.jpg">

Viewer does not work with this dynamic image without using the following code but all the tools are wonky (rotation rotates it 360 degrees and many won't work.) and I can only get it to close by using destroy or hide.

$('.mini').viewer({
  });
  $('.thumbs').on('click',function(){
  $('.mini').viewer('show');
  });
  $('.viewer-close').on('click',function(){
  $('.mini').viewer('destroy');

  });

Any options for a dynamic image to work with viewer?

chrome浏览器 ***点击旋转**** 滚轮放大或缩小 ****会有竖线

在chrome浏览器下，先点击旋转，再用滚轮去放大或者缩小（操作一定要快），会有图片的虚边一层层的显示在页面中，过几秒会消失。但是这个间接的效果不好，请问能不能处理

你好，如果图片时变化的，是由ajax获取数据，再拼接生成的，是否支持？

你好，如果图片时变化的，是由ajax获取数据，再拼接生成的，是否支持？

是否可以通过点击灰色区域退出浏览？

目前可以通过右上角的“X”按钮和“Esc”退出浏览模式，想问下是否可以通过点击灰色区域退出浏览？
谢谢！

建议增加自定义事件和toolbar

我想做一个图片查看浏览和编辑，我想弄个删除按钮，点击删除按钮就会自动打开下一个图片

多图片查看，首张图片显示不对

重现步骤：

官方 Demo 为例

• 随便点击一张图片（放大），不是第一张即可
• 再次点击第一张图片（放大），此时放大后的图片为上次点击图片

初步认为原因：

this.view((this.target ? this.$images.index(this.target) : 0) || this.index);

插件很给力，谢谢作者的贡献！希望尽快修复

web response nothing when dom has no <img> in it

当div内完全没有img时，初始化后，动态添加图片，update后，点击图片页面完全没有反应。（聊天应用）
但，当我在div内添加一个静态的img，后面动态添加的就都没问题了。

Open the viewer automatically

Hello good day.

Is there any way to automatically open the viewer , displaying the first image in the gallery?

Thanks for the support and congratulations for the work .

Regards,
Marcelo

$.fn.viewer.setDefaults is undefined

The $.fn.viewer.setDefaults function is undefined. #10

Handle auto play change.

Hello, I need to handle the change on auto play slideshow.
i want to preview the alt of each image on full (auto) play.
how can i do that ?

加载的时候是否可以加个LOADING效果呢？

这是一款非常棒的插件，最近在使用过程中，感觉大图片加载慢，加载的时候是否可以加个LOADING效果呢？

生成的代码加入到body下面会更好

生成的代码不在body下的话，有时候会被overflow:hidden所影响

jquery版本的回调函数怎么让viewer默认第一张图片直接打开？

怎么再build后直接调用show方法，不能创建新的viewer，要不然监听不到hide方法了就
$('#dowebok').viewer({
build: function() {
alert("build");
},
show: function(){
alert("show");
},
hide: function() {
alert("hide");
}
});

2.或者直接这样写$("#imglist").viewer("show"); 可以直接显示图片，但是我怎么监听hide方法？我要监听到hide方法后做一些操作，比如删除dowebok这些元素

Image is not centered，do not know why，please help me

I follow the steps of getting start, configure the viewer


but this image is not centered

I checked the document, but did not find anything，How to solve this? Seek old driver help
please help me ！

循环播放和关闭按钮调整

手机上关闭按钮移到工具栏更好
next，prev图片循环更好

 next: function () {
        if(this.index==this.length-1){
            this.view(0);
        }
        else
      this.view(min(this.index + 1, this.length - 1));
    },
prev: function () {
        if(this.index==0){
            this.view(this.length-1);
        }
        else
      this.view(max(this.index - 1, 0));
    },

 Viewer.TEMPLATE = (
    '<div class="viewer-container">' +
      '<div class="viewer-canvas"></div>' +
      '<div class="viewer-footer">' +
        '<div class="viewer-title"></div>' +
        '<ul class="viewer-toolbar">' +
          '<li class="viewer-zoom-in" data-action="zoom-in"></li>' +
          '<li class="viewer-zoom-out" data-action="zoom-out"></li>' +
          '<li class="viewer-one-to-one" data-action="one-to-one"></li>' +
          '<li class="viewer-reset" data-action="reset"></li>' +
          '<li class="viewer-prev" data-action="prev"></li>' +
          '<li class="viewer-play" data-action="play"></li>' +
          '<li class="viewer-next" data-action="next"></li>' +
          '<li class="viewer-rotate-left" data-action="rotate-left"></li>' +
          '<li class="viewer-rotate-right" data-action="rotate-right"></li>' +
          '<li class="viewer-flip-horizontal" data-action="flip-horizontal"></li>' +
          '<li class="viewer-flip-vertical" data-action="flip-vertical"></li>' +'<li class="viewer-close" data-action="mix"></li>'+
        '</ul>' +
        '<div class="viewer-navbar">' +
          '<ul class="viewer-list"></ul>' +
        '</div>' +
      '</div>' +
      '<div class="viewer-tooltip"></div>' +
      '<div class="viewer-button" data-action="mix"></div>' +
      '<div class="viewer-player"></div>' +
    '</div>'
  );

Disable reset size when resizing the parent element

I created various popups with your plugin using the 'inline' option, and also I use jqueryUI for add draggable and resizable interactions. The problem is when I resize the containter or the webBrowser window, all images in viewers change to initial size.
For example, in your demo, when you do zoom in the image and then the webrowser is resized, the zoom is lost.
how can I do for disable this reset size?

怎么设置点击modal遮罩层就可以关掉整个modal啊，因为右上角的button不太明显

能提供打印的demo演示吗？

我看源码里有print的功能，可是官方demo里面没有演示，直接调用里面的print()方法会报value值为空的错，应该如何用呢

Parent with position: fixed

When I use Viewer for images inside fixed-position block, it opens inside this block, not fillings all browser window. Fullscreen mode also do not work at this situation.

How to specify a directory instead of renaming every file?

I see the HTML code calls each specific file by their file name. Like this

<div class="docs-galley">
          <ul class="docs-pictures clearfix">
            <li><img data-original="../assets/img/tibet-1.jpg" src="../assets/img/thumbnails/tibet-1.jpg" alt="Cuo Na Lake"></li>
            <li><img data-original="../assets/img/tibet-2.jpg" src="../assets/img/thumbnails/tibet-2.jpg" alt="Tibetan Plateau"></li>
            <li><img data-original="../assets/img/tibet-3.jpg" src="../assets/img/thumbnails/tibet-3.jpg" alt="Jokhang Temple"></li>
            <li><img data-original="../assets/img/tibet-4.jpg" src="../assets/img/thumbnails/tibet-4.jpg" alt="Potala Palace 1"></li>
            <li><img data-original="../assets/img/tibet-5.jpg" src="../assets/img/thumbnails/tibet-5.jpg" alt="Potala Palace 2"></li>
            <li><img data-original="../assets/img/tibet-6.jpg" src="../assets/img/thumbnails/tibet-6.jpg" alt="Potala Palace 3"></li>
            <li><img data-original="../assets/img/tibet-7.jpg" src="../assets/img/thumbnails/tibet-7.jpg" alt="Lhasa River"></li>
            <li><img data-original="../assets/img/tibet-8.jpg" src="../assets/img/thumbnails/tibet-8.jpg" alt="Namtso 1"></li>
            <li><img data-original="../assets/img/tibet-9.jpg" src="../assets/img/thumbnails/tibet-9.jpg" alt="Namtso 2"></li>
             ...
             ...
             <li><img data-original="../assets/img/tibet-100.jpg" src="../assets/img/thumbnails/tibet-100.jpg" alt="Image 100"></li>
          </ul>
        </div>

If I have hundreds of photos in a directory, what is a better way to show them? This way is cumbersome, time consuming, and not the proper way to get images. Can I specify the directory that has the images rather than putting a ton of unique lines in?

I'm sorry if I'm missing something but I can't figure it out.

动态添加的图片不会显示到图片列表

请问怎么把触发浏览图片的事件从单击，改为双击？

就算只是用transition，还是会有性能问题。。特别是all。。。

.viewer-transition {
-webkit-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}

View some images $('.images').viewer(); the selector should be images container

View some images 
$('.images').viewer();

the selector should be images container, i search the source code and find this, i suggest write this to read then make user easier

想在window.top显示viewer, 有什么方便的法子吗?

如果渲染一个列表里面的图片，怎么设置某些图片不能被查看，就不进入modal模式？

标题不能正常显示(The title do not show properly)

首先，请原谅我可能很难读懂的英文。下面我将描述这个情况。
(First, Please ignore my bad English. Next, I will describe this question.)

使用版本：Viewer v0.4.0
(Version:Viewer v0.4.0)

在实例化插件并打开图片后，Viewer没有按照我想的显示标题。
(After the instantiation and open image, Viewer shows no title.)
在查看源码后我发现，在view函数中，标题的显示是通过绑定EVENT_VIEWED事件，并触发该事件后才显示。
(After see the source, At function view, After the title displayed in the bind EVENT_VIEWED, and trigger this event.)
但是在使用中，我发现EVENT_VIEWED事件会在绑定之前触发。所以导致标题无法正常显示。
(But, I see trigger EVENT_VIEWED at before bind EVENT_VIEWED. So title do not show.)
在我的代码中，我注释了EVENT_VIEWED事件，并在这个位置直接显示了标题，并期待有更好的做法。
(At my source, I hide event EVENT_VIEWED, And in this position at once show title,I look forward to have better way.)

最后,感谢这个插件给我的帮助.
(Thank you for yours plug-in's help for me.)

I take some data-* attr in img,how can I get it in "viewed" event or else event?

<img data-original="/Images/pdf.jpg" src="/Images/pdf.jpg" data-docid="youdoc">
<img data-original="/Images/pdf.jpg" src="/Images/pdf.jpg" data-docid="mydoc">

I want to get data-docid value in event handler

快速连续点击 会报 Error: Stack overflow

快速连续点击下面某两个的按钮，浏览器会卡死，然后报：Error: Stack overflow
必须要等某个操作完成之后（比如旋转）点击才正常。
如果每个操作在完成之后都能回调，建议在点击之后增加一个状态，如果某个操作未完成，点击无效。

另外，不得不说作者开发的这个插件功能确实很强大，之前一直用fancybox，现在全部替换成viewer

When "viewed" event trigged, how can I know which img click?

When "viewed" event trigged, how can I know which img click?

预览图片需要加个loading效果。。

预览图片比较大，需要先加载个loading效果，等图片加载在显示图片。

对于动态生成的img不显示

Can't support IE8 ?

When I visit http://fengyuanchen.github.io/viewer/ , I found the demo can't use rotate and flip function in IE8 . What's wrong with me ?

Hiding title and toolbar on small screen (width < 768px)

Is there a problem with function on screens below 768px? Wondering why this isn't an option to enable or disable on smaller screens.

represent the first image error

when i click second or third image,turn back to click the first image ,it does not represent the first,but the sencond

想显示一个按钮，查看原图，链接与展示的不同

RT

如何设置？

显示图片很慢

当点击图片时显示很慢，偶尔会快一点点~~
但是一旦设置transition:false时，那是一瞬间打开！性能希望能调一下~~

怎么屏蔽上一页下一页按钮

非<img />标签没效果？

例如：
<div class="angthing" data-image="..."></div>

Improve performance for lots of thumbnails?

Hi,

Would it be possible to introduce some methods in order to improve the performance of the image viewer - for example, I am trying to load the image viewer with about 800 images. Would it be possible to defer or lazy load the thumbnails which are not yet visible when first invoked? There is another javascript image viewer which offers this functionality:
http://galleria.io/docs/references/optimize/#lazy-load-thumbnails
See points 3 and 6 in the above link.

Please let me know what you think. Thanks for your image viewer!