• JavaScript
  • jQuery

Как настроить плагин jQuery для порционной загрузки фото?

Добрый день! Прошу помочь. Есть сайт со скриптом, позволяющим постепенно «загружать» фотографии путем нажатия на кнопку «Больше фото». Осуществляется это посредством кода, который приведён ниже.

Проблема в том, что загружаются сразу все фото, перечисленные в items. А мне нужно, чтобы они загружались определёнными порциями. Например, сначала 3 фото. Потом при нажатии на кнопку загружаются следующие фото и так далее.

Здесь же только первые 4. А, если в items их больше заданного количества, то скрипт зацикливается и при каждом нажатии на «Больше фото» выдает первые 4, потом снова первые 4 и так далее.

Прошу, пожалуйста, помогите, посоветуйте, что сделать или как указать, чтобы фото грузились поочередно партиями, например, по 4.
jQuery(window).load(function() {
  items_set = [
    { category: 'bar', lika_count: '77', view_count: '234', src: 'foto/bar/bar52.jpg', title: 'Foil Mini Badges', content: '' },
    { category: 'bar', lika_count: '45', view_count: '100', src: 'foto/bar/bar53.jpg', title: 'Darko – Business Card Mock Up', content: '' },
    { category: 'bar', lika_count: '77', view_count: '234', src: 'foto/bar/bar54.jpg', title: 'Foil Mini Badges', content: '' },
    { category: 'bar', lika_count: '45', view_count: '100', src: 'foto/bar/bar55.jpg', title: 'Darko – Business Card Mock Up', content: '' },
    { category: 'bar', lika_count: '77', view_count: '234', src: 'foto/bar/bar70.jpg', title: 'Foil Mini Badges', content: '' },
    { category: 'bar', lika_count: '45', view_count: '100', src: 'foto/bar/bar80.jpg', title: 'Darko – Business Card Mock Up', content: '' },
    { category: 'bar', lika_count: '22', view_count: '140', src: 'foto/bar/bar90.jpg', title: 'Woody Poster Text Effect', content: '' }
  ];
  jQuery('.portfolio_block').portfolio_addon({
    type : 1, // 2 - 4 columns simple portfolio
    load_count: 4,
    items: items_set
  });
  $('#container').isotope({
    animationOptions: {
      duration: 900,
      queue: false
    }
  });
});

Комментарии: 2

Александр Мальцев
Александр Мальцев
Здравствуйте!

Не знаю, какие вы для этого используете плагины. Сделать это без использования сторонних плагинов можно так.

HTML код:
<div class="container">
    <!-- Контейнер, в который будем загружать изображения -->
    <div class="row images"></div>
    <!-- Кнопка для подгрузки изображений -->
    <button class="more-image">Показать ещё</button> 
</div>
JavaScript (с использованием библиотеки jQuery):
<script>
(function($) {
    $(function() {
        var step = 4;
        var current = 0;
        var items_set = [
            {src : 'foto/bar/bar52.jpg', title : 'Foil Mini Badges'},
            {src : 'foto/bar/bar53.jpg', title : 'Darko – Business Card Mock Up'},
            {src : 'foto/bar/bar54.jpg', title : 'Foil Mini Badges'},
            {src : 'foto/bar/bar55.jpg', title : 'Darko – Business Card Mock Up'},
            {src : 'foto/bar/bar70.jpg', title : 'Foil Mini Badges'},
            {src : 'foto/bar/bar80.jpg', title : 'Darko – Business Card Mock Up'},
            {src : 'foto/bar/bar90.jpg', title : 'Woody Poster Text Effect'}
        ];
        var max = items_set.length-1;
        $('.more-image').click(function(){
            for (var i=0; i<step; i++) {
                if (current > max) {
                    $(this).hide();
                    break;
                }
                $('.images').append(
                    '<div class="col-md-3">' +
                        '<img class="img-responsive" src="' + items_set[current].src + '" alt="' + items_set[current].title + '">' +
                    '</div>');
                current++;					
            }       
        });
	$('.more-image').triggerHandler('click');
    });
})(jQuery);
</script>  
Юлия
Юлия
Добрый день! Не совсем так- у меня портфолио с фильтрацией, если открывать постепенно, то не срабатывает фильтр. Нужно наподобие www.kunkalabs.com/mixitup-pagination/ но не могу найти бесплатный аналог. Обратите внимание- здесь и фильтрация, и переход по страницам (подходит для бОльшего объема фоток)