0


你好！

我不知道为什么，但我不能做这个主题

这是我的初始化代码，它工作得很好

var drawRootList = function (folders) {
    img = "";
    if (folders.length > 0) {
        for (i = 0; i < folders.length; i++) {
            img += "<img src='http://icons.iconarchive.com/icons/iconshock/free-folder/256/folder-images-icon.png' data-caption='" + folders[i] + "' >";
        }
    }
    $('.fotorama').html(img).fotorama();
    bindListeners();
}

当我尝试获取其他图像时，我正在使用它

var drawList = function (folders) {
    $('.mycanvas').html('');
    img = "";
    for (i = 0; i < folders.length; i++) {
        if (folders[i].indexOf('.') < 0)
            img += "<img src='http://icons.iconarchive.com/icons/iconshock/free-folder/256/folder-images-icon.png' data-caption='" + folders[i] + "' >";
        else
            img += "<img src = '/" + _path + folders[i] + "'>";
    }
    $('.mycanvas').add('div').addClass('fotorama');
    $('.fotorama').html(img).fotorama({
        width: 1000,
        maxwidth: '100%',
        ratio: 16 / 9,
        allowfullscreen: true,
        nav: 'thumbs',
        captions: true,
        keyboard: true,
        click: false,
        swipe: false,
        thumbborderwidth: 2
    });

    bindListeners();
}

但它不起作用

我做错了什么？

4

2 回答 2

0

我终于解决了

我应该在 'mycanvas' 父级上使用 .empty 方法，然后再次构建所有结构并在此函数中初始化 fotorama

var drawList = function (folders) {
    $('.ctl00_ctl41_g_20636042_2bc5_4f6d_ba7e_9ad1a1c76d6b').empty();
    var img = "";
    for (i = 0; i < folders.length; i++) {
        if (folders[i].indexOf('.') < 0)
            img += "<img src='http://icons.iconarchive.com/icons/iconshock/free-folder/256/folder-images-icon.png' data-caption='" + folders[i] + "' >";
        else
            img += "<img src = '/" + _path + folders[i] + "'>";
    }
    $('.ctl00_ctl41_g_20636042_2bc5_4f6d_ba7e_9ad1a1c76d6b').html("<div class='mycanvas'></div>");
    $('.mycanvas').html("<div class='fotorama'></div>");
    $('.fotorama').html(img).fotorama({
        width: 1000,
        maxwidth: '100%',
        ratio: 16 / 9,
        allowfullscreen: true,
        nav: 'thumbs',
        captions: true,
        keyboard: true,
        click: false,
        swipe: false,
        thumbborderwidth: 2
    });

    bindListeners();
}
于 2015-05-28T05:59:38.190 回答
0

虽然tfiwsrets的解决方案可能有效（尚未测试），但这不是最好的方法，因为它不仅需要更新 Fotorama，还需要删除 Fotorama html 元素，然后重新添加它。

我发现您实际上可以从 Fotorama 对象中删除数据并重新初始化它，如下所示：

// the urls to add
let image_urls = ["https://www.google.com/url?sa=i&url=https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FTabby_cat&psig=AOvVaw3MDEtAr8UjBK26A3zWk9l7&ust=1601377715230000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCKj7roHbi-wCFQAAAAAdAAAAABAD"];

// format the urls as a data object which can be passed to initialise the fotorama (as seen in the doc)
let data = [];
for (image of images) {
    data.push({img: image});
}

// the fotorama object in question
const fotorama = $('.fotorama');

// remove previous contents of the fotorama
fotorama.removeData();

// reinitialise fotorama with the new data
fotorama.fotorama({
    data: data
});

于 2020-09-28T11:11:46.147 回答