Question

我的目标是在使用fancybox 3显示图像时增加视图。

目前我有我的HTML，

＆＃13;

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();
        }

＆＃13;

<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>

＆＃13;

javascript + php在onclick事件上为一个图像工作。我使用图像的ID来增加数据库中的视图字段。

问题是，当我使用fancybox打开一组图像时，它仅适用于第一张图像。所以我需要一个afterShow活动。问题是：如何在事件中将ID传递给我的功能计数器？想法是在javascript中获取我的A元素的ID属性...我已经尝试过但它不起作用

＆＃13;

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

＆＃13;

你能帮帮我们吗？这似乎非常简单，但我对javascript不够熟练......

谢谢！

大卫

Answer 1

实际问题似乎是 - “如何访问clicked元素”，因为您可以从链接中获取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幻灯片对象（好吧，因为它尚未在那时创建）

使用fancybox灯箱显示后，增加几个图像的视图

1 个答案: