使用 fancybox 灯箱展示后增加多个图像的视图

Question

我的 objective 是在显示带有 fancybox 3 的图像时增加视图。

目前我有 html、

function counter(itemId) {
            if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            }
            else
            {// code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                }
            }
            xmlhttp.open("GET","gallery2/counter.php?itemId="+itemId,true);
            xmlhttp.send();
        }

<a id="139494" onclick="counter(139494);" href="/gallery2/gallery/d/139496-4/2018-03-03-112534-Lisboa-PT.jpg?g2_GALLERYSID=6d16e7155d771b4801e3bf941b22d555" class="fancybox-download" data-caption="03/03/2018 - Tour de Belém - Lisbonne 2018 - 5 vue(s) - ID 139494" title="03/03/2018 - Tour de Belém - Lisbonne 2018 - 5 vue(s) - ID 139494" data-fancybox="fancybox">
<img src="/gallery2/gallery/d/139495-3/2018-03-03-112534-Lisboa-PT.jpg?g2_GALLERYSID=6d16e7155d771b4801e3bf941b22d555" width="180" height="120" alt="Tour de Belém">
</a>

javascript + php 在 onclick 事件上处理一张图片。我使用图像的 ID 来增加数据库中的视图字段。

问题是当我用 fancybox 打开一组图片时，它只对第一张图片有效。所以我需要一个 afterShow 事件。问题是：如何在事件中将 ID 传递给我的函数计数器？想法是在 javascript 中获取我的 A 元素的 ID 属性...我已经尝试过了，但它不起作用

 afterShow : function(){
               var itemId = $('.fancybox-download').attr('id', current.src);
               counter(itemId);
            },

你们能帮帮我吗？看起来很简单，但是我在 javascript...

方面不够熟练

谢谢！

大卫

Answer 1

实际问题似乎是 - "How to access clicked element"，因为您可以从 link 中获取 ID。

这里有两个示例：

1) 从代码中的任意位置 -

$.fancybox.getInstance().current.opts.$orig.attr('id')

此处$.fancybox.getInstance()returns当前活动的实例； current 是当前幻灯片对象； opts.$orig - 原始元素（您的 link；可以自定义，因此在选项下）

2) 从回调中：

afterShow : function( instance, current ){
    var itemId = current.opts.$orig.attr('id');
    counter(itemId);
}

任何回调的第一个参数是对实例的引用，第二个是 current 除了 onInit 之外的所有回调的幻灯片对象（好吧，因为此时它还没有创建）

使用 fancybox 灯箱展示后增加多个图像的视图

Incrementing views of several images after show with fancybox lightbox

jquery

fancybox

fancybox-3