Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   JS-JQuery Порядок обработки события (https://javascript.ru/forum/events/70714-js-jquery-poryadok-obrabotki-sobytiya.html)

wintersoft 27.09.2017 16:58

JS-JQuery Порядок обработки события
 
Добрый день! Прошу помочь, есть сайт со скриптом, позволяющим постепенно «загружать» фотографии путем нажатия клавиши «Больше фото». Есть такой код (ниже)
Проблема в том, что загружаются сразу все фото, перечисленные в 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>

j0hnik 28.09.2017 12:52

Сделай нормальный макет и тебе наверняка помогут.
http://javascript.ru/formatting#zapuskaemyy-kod

Dilettante_Pro 28.09.2017 13:34

wintersoft,
Готовых скриптов таких галерей 100500, например

wintersoft 28.09.2017 15:27

Данная галерея- не просто демонстрация фото, здесь также происходит одновременная сортировка по категориям. Если знаете 100500 таких скриптов (я лично не нашла), то буду рада если оставите ссылку)))

wintersoft 28.09.2017 15:28

Карусель не подходит

Dilettante_Pro 28.09.2017 15:57

wintersoft,
У вас, судя по всему, используется какой-то плагин portfolio. Какой и как им управлять - кто знает?

Таких тоже много

wintersoft 28.09.2017 16:27

Да, все верно! вот такой file:///C:/Users/%D0%AE%D0%BB%D1%8F/Downloads/portfolio-page/portfolio-page/index.html
Проблема в том, что фото очень много и нужно, чтобы дополнительно внизу была кнопка "больше" и открывалась часть фото- затем снова часть фото. И фильтрация при этом также работала.
Не могу адаптировать такое портфолио, пытаюсь добавить к нему такой скрипт http://tradebenefit.ru/examples/jquery010.html
Но у меня не получается. Ведь в каждой категории свои фото

wintersoft 28.09.2017 16:28

Прошу прощения, вот пример http://dbmast.ru/primer-adaptivnoj-v...abot-na-jquery

Dilettante_Pro 28.09.2017 17:53

wintersoft,
Похоже, разбивка на страницы в этом плагине относится к платным дополнениям
https://www.kunkalabs.com/mixitup-pagination/

j0hnik 28.09.2017 20:32

Подружать аяксом в блок и инициализировать после подгрузки плагин.
Так можно делать для любого плагина, карусели или портфолио.


Часовой пояс GMT +3, время: 17:30.