Jump to content


Photo
* * * * * 2 votes

Бесконечный скролл (подгрузка айтемов вместо пагинации)

infinite scroll scroll скролл бесконечный цикл ajax ajax scroll pagination в jbzoo подгрузка айтемов items рецепт

41 replies to this topic

#1 isay777

isay777
  • JBZoo User (rus)
  • User rate: 113.4
  • posts: 1878
  • topics: 232

Posted 24 March 2016 - 10:44

*
POPULAR

Есть давний вопрос на форуме, его задавали довольно часто и некоторые элементы изменились, по этому напишу еще один пример. 

По мотивам решения от Sliapy http://forum.jbzoo.c...uery-podgruzku/

 

Делаем подгрузку айтемов вместо пагинации 

 

Первое что делаем это скачиваем знаменитый скрипт http://infiniteajaxscroll.com/

И так скаченный файл jquery-ias.min.js кладем в папку вашего шаблона, я это сделал в подпапку js

<script src="/templates/ВАШ_ШАБЛОН/js/jquery-ias.min.js" type="text/javascript"></script>

подключаем в index вашего шаблона скрипт. Думаю в этом пункте проблем возникнуть не должно. 

 

Далее буду писать пример на основе шаблона bootsrap для JBZOO 

Если вы используете другой шаблон, то просто измените классы на свои и измените стандартный pagination 

 

Вызываем вот такой скрипт в вашем шаблоне 

    var ias = jQuery.ias({
      container:  '.items', //класс где выводятся все айтемы
      item:       '.item-column', //класс одного айтема или строки с айтемами (у меня например row)
      pagination: '.pagination', //класс пагинации для того чтоб скрыть её
      next:       '.next', // класс ссылки в пагинации для загрузки след страницы
      delay: 500
});
    
    
ias.extension(new IASSpinnerExtension({
    src: '/images/squares.gif', // адрес лоадера для красоты
}));
     ias.extension(new IASNoneLeftExtension({html: '<div class="ias-noneleft" style="text-align:center"><p><em>Это конец </em></p></div>'}));
    //текст когда айтемы закончатся по желанию 

Так самое главное сделали, теперь меняем pagination. У меня шаблон bootsrap по этому идём по адресу 

/media/zoo/applications/jbuniversal/templates/bootstrap/helpers/jbbootstrap.php

 

находим там код пагинации 

if ($pagination->current() < $pagination->pages()) {
                $link = $pagination->link($url, $pagination->name() . '=' . ($pagination->current() + 1));
                $html .= '<li><a href="' . JRoute::_($link) . '">&raquo;</a></li>';
                $link = $pagination->link($url, $pagination->name() . '=' . ($pagination->pages()));
                $html .= '<li><a href="' . JRoute::_($link) . '">' . JText::_('JBZOO_BOOTSTRAP_PAGINATE_LAST') . '</a></li>';
            }

Добавляем класс next для ссылки на след страницу 

if ($pagination->current() < $pagination->pages()) {
                $link = $pagination->link($url, $pagination->name() . '=' . ($pagination->current() + 1));
                $html .= '<li><a class="next" href="' . JRoute::_($link) . '">&raquo;</a></li>';
                $link = $pagination->link($url, $pagination->name() . '=' . ($pagination->pages()));
                $html .= '<li><a href="' . JRoute::_($link) . '">' . JText::_('JBZOO_BOOTSTRAP_PAGINATE_LAST') . '</a></li>';
            }

Теперь загружаем лоадер по тому пути что мы написали в скрипте. Я кинул просто в папку images. 

Лоадер можно скачать тут http://loading.io/или тут http://preloaders.net/ru

 

Вот теперь всё. Наши айтемы подгружаются автоматом. 

 

 

ПРИМИЧАНИЕ: Скрипт скрывает класс пагинации который мы указали .pagination он может совпадать со стандартным joomla и ваша пагинация в новостях будет скрыта имейте ввиду! 


Edited by isay777, 25 March 2016 - 10:23.

  • 15
ХОСТИНГ для сайтов jbzoo (все попугаи)

#2 fiction13

fiction13
  • JBZoo User (rus)
  • User rate: 272.6
  • posts: 604
  • topics: 23

Posted 25 March 2016 - 11:11

За 3 года ничего и не поменялось.


  • 2

#3 isay777

isay777
  • Topic Starter
  • JBZoo User (rus)
  • User rate: 113.4
  • posts: 1878
  • topics: 232

Posted 25 March 2016 - 11:13

 

Да по сути да! Читал твою тему тоже, просто немного по другому. 

Перечитал последние ответы... Блин реально тоже самое

Ну обновили или склеить надо темы


Edited by isay777, 25 March 2016 - 11:15.

  • 0
ХОСТИНГ для сайтов jbzoo (все попугаи)

#4 fiction13

fiction13
  • JBZoo User (rus)
  • User rate: 272.6
  • posts: 604
  • topics: 23

Posted 25 March 2016 - 11:15

Да по сути да! Читал твою тему тоже, просто немного по другому. 

Можно еще добавить  триггеров. У тебя там на бустрапе нет проблем с выравниванием тизеров после скролла?


  • 0

#5 isay777

isay777
  • Topic Starter
  • JBZoo User (rus)
  • User rate: 113.4
  • posts: 1878
  • topics: 232

Posted 25 March 2016 - 11:16

Можно еще добавить  триггеров. У тебя там на бустрапе нет проблем с выравниванием тизеров после скролла?

 

Абсолютно никаких... 


  • 0
ХОСТИНГ для сайтов jbzoo (все попугаи)

#6 tchudov

tchudov
  • JBZoo User (rus)
  • User rate: 0
  • posts: 158
  • topics: 27

Posted 27 March 2016 - 09:47

Спасибо

 

А для шаблона Catalog от JBZoo таких подсказок нет? Может кто подскажет, какие там классы надо ставить?


  • 0

#7 isay777

isay777
  • Topic Starter
  • JBZoo User (rus)
  • User rate: 113.4
  • posts: 1878
  • topics: 232

Posted 27 March 2016 - 15:24

Спасибо

А для шаблона Catalog от JBZoo таких подсказок нет? Может кто подскажет, какие там классы надо ставить?


Попробую на днях
  • 2
ХОСТИНГ для сайтов jbzoo (все попугаи)

#8 tchudov

tchudov
  • JBZoo User (rus)
  • User rate: 0
  • posts: 158
  • topics: 27

Posted 28 March 2016 - 06:43

Спасибо!


  • 0

#9 isay777

isay777
  • Topic Starter
  • JBZoo User (rus)
  • User rate: 113.4
  • posts: 1878
  • topics: 232

Posted 28 March 2016 - 06:49

Спасибо!

 

Для дефолта: 

Пагинацию меняем по пути сайт\administrator\components\com_zoo\framework\classes\pagination.php 

тема про пагинацию дефолта http://forum.jbzoo.c...nation-v-jbzoo/

 

Скрипт в шаблон вставляем так же 

Вызов скрипта вот так сделал 

   var ias = jQuery.ias({
      container:  '.items', //класс где выводятся все айтемы
      item:       '.column', //класс одного айтема или строки с айтемами (у меня например row)
      pagination: '.pagination', //класс пагинации для того чтоб скрыть её
      next:       '.next', // класс ссылки в пагинации для загрузки след страницы
      delay: 500
});
    
    
ias.extension(new IASSpinnerExtension({
    src: '/images/squares.gif', // адрес лоадера для красоты
}));
     ias.extension(new IASNoneLeftExtension({html: '<div class="ias-noneleft" style="text-align:center"><p><em>Это конец </em></p></div>'}));
    //текст когда айтемы закончатся по желанию 

  • 1
ХОСТИНГ для сайтов jbzoo (все попугаи)

#10 tchudov

tchudov
  • JBZoo User (rus)
  • User rate: 0
  • posts: 158
  • topics: 27

Posted 30 March 2016 - 00:28

Спасибо, но по старой теме пытался сделать еще тогда и что-то не получилось. Видимо не разобрался как пагинацию менять.

 

по ссылке объяснение, что при обновлении все может слететь.

if ($this->_current < $this->_pages) {

добавлять класс надо тут?


Edited by tchudov, 30 March 2016 - 00:44.

  • 0





Also tagged with one or more of these keywords: infinite scroll, scroll, скролл, бесконечный цикл, ajax, ajax scroll, pagination в jbzoo, подгрузка айтемов, items, рецепт

Click to return to top of page in style!