重新打开动态初始化的 fancybox

Question

我无法重新打开动态创建的 fancybox。首先，我调用 AJAX 请求并获取有关图像的信息。接下来，我在 jQuery 中创建并预加载图像，预加载成功后，我创建了 fancybox 的实例。

我关闭了 fancybox，当我尝试用相同的操作重新打开它时，它打开了一小会儿 [0.5 秒] 并立即关闭 [它执行事件 afterClose 一次或多次]。

$.ajax({
            'url' : '<?= Includer::getBase().'/companies/'.Yii::$app->request->getQueryParam('id').'/invoices/' ?>' + invoiceId,
            'success' : function(data) {
                var invoiceObject = jQuery.parseJSON(data);
                $('#invoice-thumbnail-list').empty();

                var imagesPreloadCounter = 0;
                var imagesExpectedCount = Object.keys(invoiceObject.images).length;

                var i = 0;
                for (var index in invoiceObject.images) {
                    i++;
                    url = invoiceObject.images[index].url;
                    big_url = invoiceObject.images[index].big_url;
                    a = $('<a>').addClass('invoice-thumbnail').addClass("fancybox-thumb").attr('rel', 'gallery').attr('title', prepareInvoiceData(invoiceObject));
                    image = $('<img>').load(function() {
                            imagesPreloadCounter += 1;
                            if (imagesPreloadCounter == imagesExpectedCount) {
                                console.info('loaded');
                                $('div#invoice-thumbnail-list a.invoice-thumbnail').fancybox({
                                    'padding'       :   20,
                                    'width'         :   425,
                                    'height'        :   600,
                                    afterClose      :   function() {
                                        window.location.reload();
                                        return true;

                                    },
                                    prevEffect  : 'none',
                                    nextEffect  : 'none',
                                    closeClick  : true,
                                    'arrows'    : false,
                                    'nextClick'   : false,
                                    afterLoad   : function (current, previous) {
                                        console.log('afterLoad');
                                        if (current && previous) {
                                            $('.zoomContainer').remove();
                                            current_index = current.index + 1;
                                            $("#invoice_thumb_"+current_index).elevateZoom({
                                                'easign'    : true,
                                                'zoomType'  : "inner",
                                                'cursor'    : "crosshair"
                                            });
                                        }
                                        return true;
                                    },
                                    loop        : false,
                                    'helpers' : {
                                        'overlay' : {
                                            'css' : {
                                                'background' : 'rgba(58, 42, 45, 0.7)'
                                            }
                                        },
                                        thumbs : {
                                            width: 50,
                                            height: 50
                                        }
                                    }
                                });

                                //$.fancybox.open();
                                $('.fancybox-thumb').eq(0).trigger('click');
                                $("#invoice_thumb_1").elevateZoom({
                                    'easign'    : true,
                                    'zoomType'  : "inner",
                                    'cursor'    : "crosshair"
                                });
                            }



                    }).attr('src', url)
                        .attr('height', '100%')
                        .attr('width', '100%')
                        .attr('data-zoom-image', big_url)
                        .attr('alt', '')
                        .attr('id', 'invoice_thumb_'+i);
                    $(a).append(image);
                    $('#invoice-thumbnail-list').append(a);
                }


            }
        });

以上是具有此功能的代码片段。我不知道为什么 fancybox 会触发大量 afterLoad 图片。

Answer 1

我认为您不需要在 ajax 调用中创建 fancybox 实例。我认为你应该采用不同的方法并在 ajax 调用之外初始化 fancybox outside，这将适用于现有或动态添加的图像，如 :

jQuery(document).ready(function ($) {
    $.ajax({
        'success': function (data) {
            // create and append dynamic images
        }
    });
    // initialize fancybox
    // works for existing or dynamically added images
    $(".fancybox-thumb").fancybox({
        // fancybox API options
    });
}); // ready

如果您想在图像通过 ajax 添加到 DOM 后立即触发您的 fancybox 图库，您可以使用 jQuery.when()喜欢：

$.when(
    $.ajax({
        'success': function (data) {
            // create dynamic images
        }
    })
).done(
    $('.fancybox-thumb').eq(0).trigger('click')
);

当然，你应该已经像第一个例子一样初始化了fancybox。

重新打开动态初始化的 fancybox

Reopen dynammically initialized fancybox

ajax

jquery

fancybox