我正在使用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');
});
});
thumbSet
方法需要每个缩略图的实际大小。
但是您使用的是画廊的尺寸定义。而且,值auto
不能使用。
一种可能的解决方案是:
newItem.thumbSet(itemUrl, item.thumbnailWidth, item.thumbnailHeight);