Проблема с увеличением картинки при использовании Owl Carousel 2 и Fancybox 3

Я использую Fancybox вместе с Owl Carousel, все отражено на этой странице https://codepen.io/Oganez09/pen/yLzPxQG

Если кратко, основная проблема из за клонов, которые создает owl carousel, на примере все работает правильно кроме одного. При открытии картинки используется scaleToActual, чтобы она сразу открывалась на всю ширина, это работает, но если нажать на элемент клона, то она сначала открывается как надо, а потом обратно возвращается в обычное состояние, т.е. уменьшается.

Сначала при клике на элемент клона я использовал $.fancybox.close(), он при каждом нажатии уменьшал картинку, когда же я изменил на $.fancybox.destroy(), он стал делать это лишь один раз, а все последующие открытия происходят как обычно правильно.

Что можно с этим сделать?

<div class="my-gallery">
    <div class="my-gallery__wrap">
        <div class="my-gallery__owl owl-carousel owl-theme">
            <div class="my-gallery__item" data-index="0">
                <a href="https://i.pinimg.com/originals/ce/5d/74/ce5d74057f6766924ff4584d1eef5ede.png" data-fancybox="gallery_1" class="my-gallery__item_imgwrap">
                    <div class="my-gallery__image" style="background-image: url('https://i.pinimg.com/originals/ce/5d/74/ce5d74057f6766924ff4584d1eef5ede.png');"></div>
                    <div class="my-gallery__separator"></div>
                </a>
                <div class="my-gallery__info">
                    <div>Text</div>
                    <a href="#" class="btn btn-primary">Link</a>
                </div>
            </div>
            <div class="my-gallery__item" data-index="1">
                <a href="https://i.pinimg.com/originals/ac/f3/fa/acf3fa25f01de81dde0d3b532afb6038.jpg" data-fancybox="gallery_1" class="my-gallery__item_imgwrap">
                    <div class="my-gallery__image" style="background-image: url('https://i.pinimg.com/originals/ac/f3/fa/acf3fa25f01de81dde0d3b532afb6038.jpg');"></div>
                    <div class="my-gallery__separator"></div>
                </a>
                <div class="my-gallery__info">
                    <div>Text</div>
                    <a href="#" class="btn btn-primary">Link</a>
                </div>
            </div>
            <div class="my-gallery__item" data-index="2">
                <a href="https://htmltemplates.co/assets/images/upload/bigs/nantes-free-responsive-html5-bootstrap-one-page-website-template.jpg" data-fancybox="gallery_1" class="my-gallery__item_imgwrap">
                    <div class="my-gallery__image" style="background-image: url('https://htmltemplates.co/assets/images/upload/bigs/nantes-free-responsive-html5-bootstrap-one-page-website-template.jpg');"></div>
                    <div class="my-gallery__separator"></div>
                </a>
                <div class="my-gallery__info">
                    <div>Text</div>
                    <a href="#" class="btn btn-primary">Link</a>
                </div>
            </div>
            <div class="my-gallery__item" data-index="3">
                <a href="https://s3.envato.com/files/231605725/Preview3.jpg" data-fancybox="gallery_1" class="my-gallery__item_imgwrap">
                    <div class="my-gallery__image" style="background-image: url('https://s3.envato.com/files/231605725/Preview3.jpg');"></div>
                    <div class="my-gallery__separator"></div>
                </a>
                <div class="my-gallery__info">
                    <div>Text</div>
                    <a href="#" class="btn btn-primary">Link</a>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .my-gallery {
        font-family: Roboto;
        padding-top: 90px;
        padding-bottom: 90px;
    }
    .my-gallery__item {
        opacity: 1;
        position: relative;
        display: block;
    }
    .my-gallery__item_imgwrap {
        position: relative;
        display: block;
    }
    .fancybox-content {
        transition: none !important;
    }
    .my-gallery__image {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center top;
    }
    .my-gallery__separator {
        padding-bottom: 63%;
    }
    .my-gallery__info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
    }
    .my-gallery__owl .owl-nav {
        justify-content: space-between;
        display: flex;
        width: 100%;
        position: absolute;
        top: 45%;
    }
    .my-gallery__owl .owl-nav button.owl-prev,
    .my-gallery__owl .owl-nav button.owl-next {
        outline: none;
        font-size: 15px;
        width: 40px;
        height: 40px;
        color: #000000;
        background-color: #e8e8e8;
        border-radius: 100%;
        -ms-transform: translateY(-100%);
        transform: translateY(-100%);
    }
    .my-gallery__owl .owl-nav button.owl-prev {
        position: absolute;
        left: 10%;
    }
    [dir="rtl"].nb_rtl .my-gallery__owl .owl-prev {
        right: 10%;
        left: auto;
    }
    .my-gallery__owl .owl-nav button.owl-next {
        position: absolute;
        right: 10%;
    }
    [dir="rtl"].nb_rtl .my-gallery__owl .owl-next {
        left: 10%;
        right: auto;
    }
    .my-gallery__owl .owl-nav [class*="owl-"]:hover {
        background-color: #000;
        color: #fff;
    }
    .my-gallery__owl .owl-dots {
        padding-top: 15px;
    }
    .my-gallery__owl .owl-dots .owl-dot.active span,
    .my-gallery__owl .owl-dots .owl-dot:hover span {
        background: #000;
    }
    .my-gallery__owl .owl-dot {
        outline: none;
    }
</style>

<script>
    $(document).ready(function() {
        $(".owl-carousel").owlCarousel({
            loop: true,
            items: 2,
            nav: true,
            autoHeight: false,
            center: true,
            animateOut: "fadeOut",
            margin: 40,
            navText: [
                '<i class="la la-angle-left"></i>',
                '<i class="la la-angle-right"></i>'
            ]
        });
    
        const selector = $(".my-gallery .owl-item:not(.cloned) [data-fancybox]");
        $(selector).fancybox({
            loop: true,
            buttons: ["close"],
            autoFocus: false,
            backFocus: false,
            trapFocus: false,
            hash: false,
            btnTpl: {
                arrowLeft:
                    '<button data-fancybox-prev class="fancybox-button fancybox-button--arrow_left" title="{{PREV}}">' +
                    '<div><i class="la la-angle-left"></i></div>' +
                    "</button>",
                arrowRight:
                    '<button data-fancybox-next class="fancybox-button fancybox-button--arrow_right" title="{{NEXT}}">' +
                    '<div><i class="la la-angle-right"></i></div>' +
                    "</button>"
            },
            animationDuration: 0,
            transitionDuration: 0,
            touch: {
                momentum: false
            },
            animationEffect: false,
            afterShow: function(instance) {
                instance.scaleToActual(0, 0);
            },
            beforeClose: function(instance, slide) {
                const index = instance.currIndex;
                const elementClicked = $(slide.opts.$orig);
                elementClicked
                    .closest(".owl-carousel")
                    .trigger("to.owl.carousel", [index, 0, true]);
            }
        });
    
        $(document).on(
            "click.fb",
            ".my-gallery .owl-item.cloned .my-gallery__item",
            function () {
                $.fancybox.destroy();
                const $slides = $(this).parent().siblings(".owl-item:not(.cloned)");
    
                $slides
                    .eq(($(this).attr("data-index") || 0) % $slides.length)
                    .find("[data-fancybox]")
                    .trigger("click.fb-start", { $trigger: $(this) });
    
                return false;
            }
        );
    });
</script>