动态添加到nanogallery2的项目不会显示

Question

我正在使用nanogalley2在网页上显示一个厨房。此库中的项目从服务器获取并动态添加到库中。我根据官网提供的code snipped添加项目。但我动态添加的项目不会显示(在级联布局中)。我在chrome developer tools中调试了代码，我看到项目被添加到库的项目列表中，但我不知道为什么这些项目没有显示。

下面是我的HTML代码：

<div id="my_nanogallery2"
    data-nanogallery2='{
        "itemsBaseURL" : "https://example.com",
        "thumbnailWidth" : 310,
        "thumbnailHeight" : "auto",
        "thumbnailDisplayTransition" : "slideUp",
        "thumbnailAlignment" : "center" 
    }'>nanogallery2
    <a href="my-first-image.jpg" data-ngthumb="my-first-image.jpg" data-ngdesc="">My First Image</a>
</div>    
<button type="button" id="btn_add">Load more ...</button>

和JS代码：

var options = {
    baseUrl : 'https://example.com',
    thumbnailWidth : 310,
    thumbnailHeight : 'auto',
};
jQuery('#btn_add').on('click', function() {
    $http('/api/rest/to/get/some/content')//
    .then(function(res){
        var newItems = res.data.items;
        newItems.forEach(function(item) {
            var instance = $("#my_nanogallery2").nanogallery2('instance');
            // create the new item
            // Parameters: instance, title, description, ID, albumID, kind, tags
            var newItem = NGY2Item.New(instance, item.title, '', item.id, '0', 'image', '');
            // define thumbnail -> image displayed in the gallery
            var itemUrl = options.baseUrl + '/' + item.url;
            newItem.thumbSet(itemUrl, options.thumbnailWidth, options.thumbnailHeight); // w,h
            // define URL of the media to display in lightbox
            newItem.setMediaURL(itemUrl, 'img');
            newItem.addToGOM();
        });
        $("#my_nanogallery2").getElement().nanogallery2('resize');
    });
});

Answer 1

thumbSet方法需要每个缩略图的实际大小。

但你使用的是画廊的尺寸定义。而且，值auto也不能使用。

一种可能的解决方案是：

newItem.thumbSet(itemUrl, item.thumbnailWidth, item.thumbnailHeight);