如何在 FancyBox V4 中使用 "afterShow" 函数或变量，就像在 JQuery-FancyBox V3 中一样？

Question

我们使用的是 Fancybox 的 V3 版本及其 afterShow 函数，其中我们包含 increaseImageClicks 和 increaseVideoClicks 函数：

/* 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);
            } 
        }
    });

但是，一段时间以来，我们决定通过如下修改我们的代码来迁移到 Fancybox 的 V4 版本：

// 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;
        },
    });

但是，尽管进行了大量研究，但我们在任何地方都看不到如何使用 FancyBox 第 4 版中的 afterShow 功能。

那么如何在 FancyBox V4 中包含我的 increaseVideoClicks(item.src) 和 increaseImageClicks(item.src) 函数呢？？？

谢谢大家帮帮我

Answer 1

在此处查看文档 - https://fancyapps.com/docs/ui/fancybox/events - 并使用 done 事件。那么剩下的代码就基本一样了。

如何在 FancyBox V4 中使用 "afterShow" 函数或变量，就像在 JQuery-FancyBox V3 中一样？

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

javascript

jquery

fancybox