Question

我创建了一个fancybox（动态），第一个弹出窗口显示＆＃34;无法加载的内容＆＃34;但事实是图像都是在下一帧上加载的。

我无法弄清楚它为什么会先显示错误信息。

JSFIDDLE

这是一个带有缩略图的jsfiddle，用于显示图像已加载。

我从此this thread获得了原始代码。

工作代码：

$(".v-gallery").on("click", function () {
    var id = $(this).attr('id');
    var databaseResponse = (function () {
        var json = null;
        $.ajax({
            'async': false,
            'global': false,
            'url': 'ajaxJsonVGallery.php',
            'data': {'i': id},
            'type':'post',
            'dataType': "json",
            'success': function (data) {
                json = data;
            }
        });
        return json;
    })();

    $.fancybox(databaseResponse, {
        padding: 0,
        helpers: {
            title: {
                type: 'outside'
            },
            thumbs: {
                width: 50,
                height: 50
            }
        }
    });
    return false;
});

....

Answer 1

您从中获取代码的thread的方案与您的不同，因为它显示了如何动态地将图像添加到现有库中。

在您的情况下，您没有现有的图库但是您完全是通过数据库响应创建的（我假设）

由于您没有图库，因此您的链接（href属性）并未将任何图片指向ID为div的{{1}}所以＆＃34 ;内容无法加载＆＃34;

gallery

如果要从同一链接启动动态创建的库，则应该将数据库响应存储在变量中，然后在<a href="#gallery" id='00' class='v-gallery'>View Images</a>事件后以编程方式打开fancybox选择器click喜欢：

.v-gallery

参见 JSFIDDLE

jQuery fancybox第一张图片是＆＃34; ..无法加载内容..＆＃34;但是下一次加载图像

1 个答案: