Курс по JavaScript от Хекслет
  1. Главная
  2. Вопросы и заметки

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

Юлия
Юлия
991
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/>

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

  1. Александр Мальцев
    Александр Мальцев
    2017-09-29 15:52:04
    Здравствуйте!

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

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