Question

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

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

$.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实例。我认为您应该采用不同的方法并初始化fancybox 在之外的ajax调用，这将适用于现有或动态添加的图像，如：

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

1 个答案: