jquery fancybox 插件

1. 问题点

富文本内容，另一个同事在每个链接上加了onclick事件。

<a href="https://XXXXX" onclick="showImage(https://XXX)">
  <img src="https:xxxx"/>
</a>
<a href="https://XXXXX" onclick="showImage(https://XXX)">
    <img src="https:xxxx"/>
</a>

1. 多图片无法进行左右切换。

2. 图片被403拦截了，需要单击请求接口获取新的图片。

3. 默认打开预览的缩略图。

2. 解决方案

1. 图片预览可切换

给链接增加data-fancybox="xxxx"相同的属性值（类似radio分组）。

通过正则替换实现【还要结合下一步替换onclick，否则无效，因为覆盖了插件默认的onclick 事件】

content.replace(/<a href/g, '<a data-fancybox="111' + obj.id + '" href')

<a data-fancybox="111" href="https://XXXXX" onclick="">
    <img src="https:xxxx"/>
</a>
<a data-fancybox="111" href="https://XXXXX" onclick="">
    <img src="https:xxxx"/>
</a>

2. 使用onmousedown触发事件

使用这个事件可以看onMouseDown和onClick的顺序问题

将富文本中onclick替换成onmousedown

content.replace(/onclick/g, "onmouseup")

function showImage(url) {
       var imgVar = new Image();        imgVar.src = url;        var img;        if(imgVar.filesize>0 || (imgVar.width > 0 && imgVar.height > 0)){            return;        }        $.ajax({            url: "xxx",            type: "post",            async: false,            dataType: "text",            data: {'url': url},            success: function (data) {                img = data;            },        });          $.fancybox.close();        setTimeout(() => {          $.fancybox.open({            src  : img,            opts: {                afterClose: function() {                    $.fancybox.close();                }            }          });           })}

3. 默认打开缩略图

 $.fancybox.defaults.thumbs.autoStart = true;