未显示动态添加到 nanogallery2 的项目

Question

我正在使用 nanogalley2 在网页上显示厨房。该画廊的项目是从服务器获取并动态添加到画廊的。我根据官网提供的code snipped添加项目。但是我动态添加的项目没有显示（在级联布局中）。我在 chrome 开发人员工具中调试代码，我看到项目已添加到图库的项目列表中，但我不知道为什么没有显示这些项目。

这是我的 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);

未显示动态添加到 nanogallery2 的项目

Dynamically added items to nanogallery2 are not shown

javascript

image-gallery

nanogallery