How to use in FancyBox V4 the "afterShow" function or variable as it was possible in JQuery-FancyBox V3?

Question

We were using the V3 version of Fancybox with its afterShow function in which we included our increaseImageClicks and increaseVideoClicks function:

/* FANCYBOX OLD (https://web.archive.org/web/20210325170940/https://fancyapps.com/fancybox/3/docs/): */

    $("[data-fancybox]").fancybox({

        caption : function( instance, item ) {
            var caption = $(this).data('caption') || '';
            var siteUrl = $(this).data('siteurl') || '';


            if ( item.type === 'image' ) {
                caption = (caption.length ? caption + '<br />' : '')
                 + '<a href="' + item.src + '">View image</a><br>'
                 + '<a href="' + siteUrl + '">Visit page</a>';
            }
            else if ( item.type === 'video' ) {
                caption = (caption.length ? caption + '<br />' : '')
                 + '<a href="' + item.src + '">View Video</a><br>'
                 + '<a href="' + siteUrl + '">Visit page</a>';
            }
            
            return caption;
        },
        afterShow : function( instance, item ) {
            if (item.type === 'image') {
                increaseImageClicks(item.src);
            } else if(item.type === 'video') {
                increaseVideoClicks(item.src);
            } 
        }
    });

But, for some time, we have decided to migrate to Version V4 of Fancybox by modifying our code like this:

// FANCYBOX V4 (https://fancyapps.com/docs/ui/fancybox):
    Fancybox.bind("[data-fancybox='gallery']", {
        caption: function( instance, item ) {
            var caption = $(this).data('caption') || '';
            var siteUrl = $(this).data('siteurl') || '';


            if ( item.type === 'image' ) {
                caption = (caption.length ? caption + '<br />' : '')
                 + '<a href="' + item.src + '">View image</a><br>'
                 + '<a href="' + siteUrl + '">Visit page</a>';
            }
            else if ( item.type === 'video' ) {
                caption = (caption.length ? caption + '<br />' : '')
                 + '<a href="' + item.src + '">View Video</a><br>'
                 + '<a href="' + siteUrl + '">Visit page</a>';
            }
            
            return caption;
        },
    });

But there, despite much research, we don't see anywhere how to use the afterShow function in Version 4 of FancyBox.

So how do I include my increaseVideoClicks(item.src) and increaseImageClicks(item.src) functions in FancyBox V4 ???

Thank you please help me.

Answer 1

See docs here - https://fancyapps.com/docs/ui/fancybox/events - and use done event. Then the rest of the code would be basically the same.