Рекомендации, необходимые для отображения изображений в изотопной нагрузке больше функции

Question

У меня есть следующая ситуация, в которой я надеюсь на вашу помощь. Вот ссылка на полный пример: https://jsfiddle.net/7kpfqLr6/25/

Позвольте мне объяснить. Я пытаюсь установить количество изображений перед загрузкой дополнительной кнопки. Проблема состоит в том, что, как вы видите, первый элемент изотопа представляет собой текстовый элемент . Все остальные элементы - это изображения. Теперь, когда я устанавливаю число изображений в 6, он показывает 6 изотопных элементов (первый текстовый элемент + 5 изображений). Да, это логично, и я это понимаю. Но я хочу, чтобы он отображал 6 изображений после первого элемента. Как это сделать? Могу ли я рассчитывать на вашу помощь?

спасибо.

$(document).ready(function() { 

    // init Isotope 
    var $container = $('.isotope-items-wrap').isotope({ 
    itemSelector: '.isotope-item', 
     transitionDuration: '0.5s', 
     masonry: { 
      columnWidth: '.grid-sizer' 
     } 
    }); 

    //**************************** 
    // Isotope Load more button 
    //**************************** 
    var initShow = 6; //number of images loaded on init & onclick load more button 
    var counter = initShow; //counter for load more button 
    var iso = $container.data('isotope'); // get Isotope instance 

    loadMore(initShow); //execute function onload 

    function loadMore(toShow) { 
    $container.find(".hidden").removeClass("hidden"); 

    var hiddenElems = iso.filteredItems.slice(toShow, iso.filteredItems.length).map(function(item) { 
     return item.element; 
    }); 
    $(hiddenElems).addClass('hidden'); 
    $container.isotope('layout'); 

    //when no more to load, hide show more button 
    if (hiddenElems.length == 0) { 
     $("#load-more").hide(); 
    } 
    else { 
     $("#load-more").show(); 
    }; 

    } 

    //append load more button 
    $container.after('<div class="margin-top-30 text-center"><button id="load-more" class="btn btn-primary margin-top-5"> Load More</button></div>'); 

    //when load more button clicked 
    $("#load-more").click(function() { 
    if ($('#filters').data('clicked')) { 
     //when filter button clicked, set initial value for counter 
     counter = initShow; 
     j$('#filters').data('clicked', false); 
    } else { 
     counter = counter; 
    }; 

    counter = counter + initShow; 

    loadMore(counter); 
    }); 

}); 

Answer 1

Вы можете объявить значение:

var initShow = 7; 

затем изменить его до 6 после начальной загрузки после этого.

$("#load-more").click(function() { 
    if ($('#filters').data('clicked')) { 
     //when filter button clicked, set initial value for counter 
     counter = initShow; 
     j$('#filters').data('clicked', false); 
    } else { 
     counter = counter; 
    }; 
    initShow = 6; 
    counter = counter + initShow; 

    loadMore(counter); 
    }); 

Начальная нагрузка будет показывать 6 images и дополнительные 6 images если вы click нагрузки более button.

Я надеюсь, что это поможет.