Динамически добавленные элементы в nanogallery2 не отображаются - PullRequest
Новая
       31

Динамически добавленные элементы в nanogallery2 не отображаются

1 голос
/ 17 апреля 2020

Я использую nanogalley2, чтобы показать камбуз на веб-странице. Элементы этой галереи выбираются с сервера и динамически добавляются в галерею. Я добавляю элементы, основываясь на коде , указанном на официальном сайте . Но мои динамически добавленные элементы не отображаются (в каскадном макете). Я отлаживаю код в 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');
    });
});

1 Ответ

1 голос
/ 20 апреля 2020

Метод thumbSet требует реального размера каждого отдельного эскиза.

Но вы используете определение размера галереи. А также, значение auto не может быть использовано.

Одним из возможных решений может быть: 

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