使用fancybox灯箱显示后增加几张图像的视图答案

【问题标题】：Incrementing views of several images after show with fancybox lightbox使用fancybox灯箱显示后增加几张图像的视图
【发布时间】：2018-04-09 20:31:55
【问题描述】：

我的目标是在使用 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不够熟练......

谢谢！

大卫

【问题讨论】：

标签： jquery fancybox fancybox-3

【解决方案1】：

实际问题似乎是-“如何访问点击的元素”，因为您可以从链接中获取 ID。

这里有两个示例：

1) 从代码中的任何地方 -

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

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

2) 从回调内部：

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

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

【讨论】：