Проблема в том, что загружаются сразу все фото, перечисленные в 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/>
Не знаю, какие вы для этого используете плагины. Сделать это без использования сторонних плагинов можно так.
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>