Главная / Вопросы

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

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

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

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