JS-JQuery Параметр load_count

Юлия
Юлия
798
2
Содержание:
  1. Комментарии
Добрый день! Прошу помочь, есть сайт со скриптом, позволяющим постепенно «загружать» фотографии путем нажатия клавиши «Больше фото». Есть такой код (ниже)
Проблема в том, что загружаются сразу все фото, перечисленные в items. А нужно, чтобы загружались. например, сначала 3 фото-потом нажать кнопку- загружаются следующие фото и т.д.
Здесь же- только первые 4 и т.д., а если в items их больше заданного кол-ва в load, то скрипт зацикливается и при каждом нажатии «больше фото» выдает первые 4, потом снова первые 4 и т.д.

Прошу, пожалуйста, помогите, посоветуйте, что сделать или как указать, чтобы фото грузились поочередно партиями, например, по 4.
	<script type="text/javascript">
				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
					   }
					});
				});
			</script>
<cut/>

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

  1. Александр Мальцев
    Александр Мальцев
    29.09.2017, 15:52
    Здравствуйте!

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

    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>  
    
    1. Юлия
      Юлия
      02.10.2017, 15:37
      Добрый день! Не совсем так- у меня портфолио с фильтрацией, если открывать постепенно, то не срабатывает фильтр. Нужно наподобие www.kunkalabs.com/mixitup-pagination/ но не могу найти бесплатный аналог. Обратите внимание- здесь и фильтрация, и переход по страницам (подходит для бОльшего объема фоток)
    Войдите, пожалуйста, в аккаунт, чтобы оставить комментарий.