评论：纯JS图片查看器PhotoViewer(原创)  [查看原文]

nzb3290
2023/10/17 17:04:18
主要在 PC 端使用，移动端支持不好

请教一个问题  html的结构必须是data-gallery="manual" 都挨着的才好使，如果被其他标签隔开的话(例如每个a标签都套个div标签)，那么点击任何图片弹出的显示都是第一个图片，请问这个要怎么解决呢，非常感谢大神！

<a data-gallery="manual" href="big-1.jpg"><img src="small-1.jpg"></a>
<a data-gallery="manual" href="big-2.jpg"><img src="small-2.jpg"></a>
<a data-gallery="manual" href="big-3.jpg"><img src="small-3.jpg"></a>

◇◆指尖微凉っ?1
2021/9/26 19:48:28

var items = [],
options = {
    index: $('[data-gallery=photoviewer]').index(this),
};

nzb3290
2019/8/8 11:09:35
试试 appendTo 参数

┽夜後咖啡┽0
2019/8/9 10:15:06
appendTo: 'body' 吗？ 试了不行啊，还是在里面，弹出的查看层还是不能脱离子页面而以父页面定位，小白一枚，还请大神指点，谢谢

jiashenglu0
2019/7/6 13:24:51
查看演示是没有问题

西瓜0
2019/7/6 14:02:25
把图片改成jpg的试试，资源文件用的png-8格式。有时候IE本地会显示不出来。

jiashenglu0
2019/7/6 15:02:11
大哥，我现在把demo从IE调测出来了，把页面放在我工程里面访问出现莫名其妙的错误，能不能帮忙看看

jiashenglu0
2019/7/6 15:04:25
SCRIPT438: 对象不支持“trim”属性或方法
photoviewer.js (191,17)
本机访问静态页面可以，把页面放在工程里面，单独访问这个页面就报错

jiashenglu0
2019/7/6 17:15:44
我这边系统必须添加兼容性试图，添加了之后，图片放大这个功能就不能用

nzb3290
2019/7/11 11:46:02
如果想兼容 IE 的话，用这个 https://www.jq22.com/jquery-info17547

西瓜0
2019/5/31 15:05:12
先获得图片的宽和高，哪个值大就设置值100%。只设置一个值，这样就是等比例放大了。如果图片有规律，都是宽图，那就更简单了，直接CSS设置宽度100%。

河北小王爷990
2019/5/27 16:14:06
这个问题解决了，但是为什么我现在一点击a标签生成6遍弹出层呢？

河北小王爷990
2019/5/27 17:17:28
搞定了，多谢楼主的分享，很强大的插件

河北小王爷991
2020/11/17 16:34:47

$(".divImg").delegate("[data-gallery=manual]", "click", function(e) {
    e.preventDefault();
    var items = [],
        options = {
            index: $(this).index()
        };
    $('.divImg [data-gallery=manual]').each(function() {
        items.push({
            src: $(this).attr('href'),
            title: $(this).attr('data-title')
        });
    });
    new PhotoViewer(items, options);
});

初始化

nzb3290
2019/5/20 10:13:38
官网有例子

nzb3290
2019/5/13 17:46:47
暂时没有。。。移动端可以选择其它插件

nzb3290
2019/5/13 17:51:01
下载的文件里应该有文件地址吧