Search code examples
jqueryfancyboxfancybox-3

Incrementing views of several images after show with fancybox lightbox

My objective is to increment views when showing an image with fancybox 3.

Currently I have my 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 working for one image on onclick event. I use ID of the image to increment the view field in database.

Problem is that when I open a group of images with fancybox, it works only for the first image. So there's an afterShow event that I need. Problem is: How to pass the ID to my function counter in the event? Idea is to get the ID attribute of my A element in javascript... I have tried that but it does not work

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

Can you help me guys? It seems very straightforward but I am not skilled enough on javascript...

Thanks!

David

Solution

  • The actual question seems to be - "How to access clicked element", because you can get ID from your link.

    Here are two samples:

    1) From anywhere in the code -

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

    Here $.fancybox.getInstance() returns currently active instance; current is current slide object; opts.$orig - original element (your link; can be customized, therefore it is under options)

    2) From within callback:

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

    First argument for any callback is reference to the instance, 2nd is current slide object for all callbacks except onInit (well, because it is not yet created at that point)