Как настроить плагин jQuery для порционной загрузки фото?
Добрый день! Прошу помочь. Есть сайт со скриптом, позволяющим постепенно «загружать» фотографии путем нажатия на кнопку «Больше фото». Осуществляется это посредством кода, который приведён ниже.
Проблема в том, что загружаются сразу все фото, перечисленные вitems
. А мне нужно, чтобы они загружались определёнными порциями. Например, сначала 3 фото. Потом при нажатии на кнопку загружаются следующие фото и так далее.
Здесь же только первые 4. А, если в items
их больше заданного количества, то скрипт зацикливается и при каждом нажатии на «Больше фото» выдает первые 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
}
});
});
Не знаю, какие вы для этого используете плагины. Сделать это без использования сторонних плагинов можно так.
HTML код:
JavaScript (с использованием библиотеки jQuery):