Перейти к содержимому


Фотография
* * * * * 2 Голосов

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

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

Сообщений в теме: 41

#11 isay777

isay777

Отправлено 30 March 2016 - 07:44

tchudov сказал(а) 29 Мар 2016 - 23:28:

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

 

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

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

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

 

Не очень понял ваше сообщение 

 

pagination.php по адресу выше

Строка 210-230

  1. if ($this->_current > 1) {
  2. $link = $url;
  3. $html .= '<a class="start" href="'.JRoute::_($link).'">&lt;&lt;</a>&nbsp;';
  4. $link = $this->_current - 1 == 1 ? $url : $this->link($url, $this->_name.'='.($this->_current - 1));
  5. $html .= '<a class="previous" href="'.JRoute::_($link).'">&lt;</a>&nbsp;';
  6. }
  7.  
  8. for ($i = $range_start; $i <= $range_end; $i++) {
  9. if ($i == $this->_current) {
  10. $html .= '[<span>'.$i.'</span>]';
  11. } else {
  12. $link = $i == 1 ? $url : $this->link($url, $this->_name.'='.$i);
  13. $html .= '<a href="'.JRoute::_($link).'">'.$i.'</a>';
  14. }
  15. $html .= "&nbsp;";
  16. }
  17.  
  18. if ($this->_current < $this->_pages) {
  19. $link = $this->link($url, $this->_name.'='.($this->_current + 1));
  20. $html .= '<a class="next" href="'.JRoute::_($link).'">&gt;&nbsp;</a>&nbsp;';
  21. $link = $this->link($url, $this->_name.'='.($this->_pages));
  22. $html .= '<a class="end" href="'.JRoute::_($link).'">&gt;&gt;&nbsp;</a>&nbsp;';
  23. }

вот тут класс next делаем


Сообщение отредактировал isay777: 03 April 2016 - 10:23

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

#12 tchudov

tchudov

Отправлено 30 March 2016 - 18:15

Спасибо!


  • 0

#13 tchudov

tchudov

Отправлено 03 April 2016 - 09:57

Как-то странно скрипт себя ведет. Не подгружает другие страницы, а зацикливает и подгружает одно и то-же снова и снова.

 

http://discoverportu...plyazhi-algarve

 

Joomla: 3.5.0 JBZoo: 2.2.4 Pro rev3086 Zoo: 3.3.14WidgetKit: 1.4.7

 

скрипт

  1. <script type="text/javascript">
  2. var ias = jQuery.ias({
  3. container: '.items', //класс где выводятся все айтемы
  4. item: '.column', //класс одного айтема или строки с айтемами (у меня например row)
  5. pagination: '.pagination', //класс пагинации для того чтоб скрыть её
  6. next: '.next', // класс ссылки в пагинации для загрузки след страницы
  7. delay: 1000
  8. });
  9. ias.extension(new IASSpinnerExtension({
  10. src: '/images/loader.gif', // адрес лоадера для красоты
  11. }));
  12.  
  13. ias.extension(new IASNoneLeftExtension({html: '<div class="ias-noneleft" style="text-align:center"><p><em></em></p></div>'}));
  14. //текст когда айтемы закончатся по желанию
  15.  
  16.  
  17. </script>

pagination.php

  1. <?php
  2. /**
  3. * @package com_zoo
  4. * @author YOOtheme http://www.yootheme.com
  5. * @copyright Copyright (C) YOOtheme GmbH
  6. * @license http://www.gnu.org/licenses/gpl.html GNU/GPL
  7. */
  8.  
  9. /**
  10. * Class to provide pagination functionalities
  11. *
  12. * @package Framework.Classes
  13. */
  14. class AppPagination {
  15.  
  16. /**
  17. * A reference to the global App object
  18. *
  19. * @var App
  20. * @since 1.0.0
  21. */
  22. public $app;
  23.  
  24. /**
  25. * Name of the paging http GET variable
  26. *
  27. * @var string
  28. * @since 1.0.0
  29. */
  30. protected $_name;
  31.  
  32. /**
  33. * The total item count
  34. *
  35. * @var int
  36. * @since 1.0.0
  37. */
  38. protected $_total;
  39.  
  40. /**
  41. * The current page number
  42. *
  43. * @var int
  44. * @since 1.0.0
  45. */
  46. protected $_current;
  47.  
  48. /**
  49. * The number of items per pag
  50. *
  51. * @var int
  52. * @since 1.0.0
  53. */
  54. protected $_limit;
  55.  
  56. /**
  57. * The range for the displayed pagination pages
  58. *
  59. * @var int
  60. * @since 1.0.0
  61. */
  62. protected $_range;
  63.  
  64. /**
  65. * The total number of pages
  66. *
  67. * @var int
  68. * @since 1.0.0
  69. */
  70. protected $_pages;
  71.  
  72. /**
  73. * If we are showing all the items
  74. *
  75. * @var boolean
  76. * @since 1.0.0
  77. */
  78. protected $_showall = false;
  79.  
  80. /**
  81. * Constructor
  82. *
  83. * @param string $name The name of the pagination http GET variable
  84. * @param int $total The total number of items
  85. * @param int $current The current page (default: 1)
  86. * @param int $limit The number of items per page (default: 10)
  87. * @param int $range The range for the displayed page (default: 5)
  88. */
  89. public function __construct($name, $total, $current = 1, $limit = 10, $range = 5) {
  90.  
  91. // init vars
  92. $this->_name = $name;
  93. $this->_total = (int) max($total, 0);
  94. $this->_current = (int) max($current, 1);
  95. $this->_limit = (int) max($limit, 1);
  96. $this->_range = (int) max($range, 1);
  97. $this->_pages = (int) ceil($this->_total / $this->_limit);
  98.  
  99. // check if current page is valid
  100. if ($this->_current > $this->_pages) {
  101. $this->_current = $this->_pages;
  102. }
  103.  
  104. }
  105.  
  106. public function name() {
  107. return $this->_name;
  108. }
  109.  
  110. public function total() {
  111. return $this->_total;
  112. }
  113.  
  114. public function current() {
  115. return $this->_current;
  116. }
  117.  
  118. public function limit() {
  119. return $this->_limit;
  120. }
  121.  
  122. public function range() {
  123. return $this->_range;
  124. }
  125.  
  126. public function pages() {
  127. return $this->_pages;
  128. }
  129.  
  130. /**
  131. * Get the show all items flag
  132. *
  133. * @return boolean True if we have to show all the items
  134. *
  135. * @since 1.0.0
  136. */
  137. public function getShowAll() {
  138. return $this->_showall || $this->_pages < 2;
  139. }
  140.  
  141. /**
  142. * Set the show all items flag
  143. *
  144. * @param boolean $showall If we have to show all the items
  145. *
  146. * @since 1.0.0
  147. */
  148. public function setShowAll($showall) {
  149. $this->_showall = $showall;
  150. }
  151.  
  152. /**
  153. * Get the current limit start
  154. *
  155. * @return int The current limit start
  156. *
  157. * @since 1.0.0
  158. */
  159. public function limitStart() {
  160. return ($this->_current - 1) * $this->_limit;
  161. }
  162.  
  163. /**
  164. * Get the link with the added GET parameters
  165. *
  166. * @param string $url The url to which we should add the GET parameter
  167. * @param mixed $vars A list of variables to add to the url
  168. *
  169. * @return string The url with the added GET parameters
  170. *
  171. * @since 1.0.0
  172. */
  173. public function link($url, $vars) {
  174.  
  175. if (!is_array($vars)) {
  176. $vars = array($vars);
  177. }
  178.  
  179. return $url.(strpos($url, '?') === false ? '?' : '&').implode('&', $vars);
  180. }
  181.  
  182. /**
  183. * Render the pagination
  184. *
  185. * @param string $url The url of the page on which we're adding the pagination
  186. *
  187. * @return string The html code of the pagination
  188. *
  189. * @since 1.0.0
  190. */
  191. public function render($url = 'index.php', $layout = null) {
  192.  
  193. $html = '';
  194.  
  195. // check if show all
  196. if ($this->_showall) {
  197. return $html;
  198. }
  199.  
  200. // check if current page is valid
  201. if ($this->_current > $this->_pages) {
  202. $this->_current = $this->_pages;
  203. }
  204.  
  205. if ($this->_pages > 1) {
  206.  
  207. $range_start = max($this->_current - $this->_range, 1);
  208. $range_end = min($this->_current + $this->_range - 1, $this->_pages);
  209.  
  210. if ($this->_current > 1) {
  211. $link = $url;
  212. $html .= '<a class="start" href="'.JRoute::_($link).'">&lt;&lt;</a>&nbsp;';
  213. $link = $this->_current - 1 == 1 ? $url : $this->link($url, $this->_name.'='.($this->_current - 1));
  214. $html .= '<a class="previous" href="'.JRoute::_($link).'">&lt;</a>&nbsp;';
  215. }
  216.  
  217. for ($i = $range_start; $i <= $range_end; $i++) {
  218. if ($i == $this->_current) {
  219. $html .= '[<span>'.$i.'</span>]';
  220. } else {
  221. $link = $i == 1 ? $url : $this->link($url, $this->_name.'='.$i);
  222. $html .= '<a class="next" href="'.JRoute::_($link).'">'.$i.'</a>';
  223. }
  224. $html .= "&nbsp;";
  225. }
  226.  
  227. if ($this->_current < $this->_pages) {
  228. $link = $this->link($url, $this->_name.'='.($this->_current + 1));
  229. $html .= '<a href="'.JRoute::_($link).'">&gt;&nbsp;</a>&nbsp;';
  230. $link = $this->link($url, $this->_name.'='.($this->_pages));
  231. $html .= '<a class="end" href="'.JRoute::_($link).'">&gt;&gt;&nbsp;</a>&nbsp;';
  232. }
  233.  
  234.  
  235. }
  236.  
  237. return $html;
  238. }
  239. }

Сообщение отредактировал tchudov: 03 April 2016 - 10:03

  • 0

#14 isay777

isay777

Отправлено 03 April 2016 - 10:22

Перенесите класс next в pagination 

12135655.png

Мне кажетс я ошибся. 

Отпишитесь если получилось


Сообщение отредактировал isay777: 03 April 2016 - 10:25

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

#15 tchudov

tchudov

Отправлено 03 April 2016 - 10:27

Спасибо, вроде заработало!


  • 0

#16 isay777

isay777

Отправлено 03 April 2016 - 10:34

tchudov сказал(а) 03 Апр 2016 - 09:27:

Спасибо, вроде заработало!

я рад! 


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

#17 daler

daler

Отправлено 14 June 2016 - 15:08

*
Популярное сообщение!

  1. var ias = jQuery.ias({
  2. container: '.items', //класс где выводятся все айтемы
  3. item: '.row', //класс одного айтема или строки с айтемами (у меня например row)
  4. pagination: '.pagination-box', //класс пагинации для того чтоб скрыть её
  5. next: '.next', // класс ссылки в пагинации для загрузки след страницы
  6. delay: 500
  7. });
  8.  
  9.  
  10.           //кнопка
  11. ias.extension(new IASTriggerExtension({
  12. html: '<div class="showmore" style="text-align: center; cursor: pointer;"><a class="show_more">Показать больше</a></div>', // optionally
  13. }));
  14.  
  15.  
  16.          //картинка лоадера
  17. ias.extension(new IASSpinnerExtension({
  18. html: '<div class="showmore" ><img src="/images/reload.gif"/></div>', // optionally
  19. }));
  20.  
  21. ias.extension(new IASNoneLeftExtension({html: ''}));
  22. //текст когда айтемы закончатся по желанию

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

 


  • 7

#18 mr.varhola

mr.varhola

Отправлено 03 August 2016 - 04:18

Столкнулся с двумя проблемами:

1) Лоадер не отображался, как только пути не писал

2) Значение delay не изменяет время задержки

Первый вопрос решил так:

  1. var ias = jQuery.ias({
  2. container: '.items', //класс где выводятся все айтемы
  3. item: '.rborder', //класс одного айтема или строки с айтемами (у меня например row)
  4. pagination: '.pagination', //класс пагинации для того чтоб скрыть её
  5. next: '.next', // класс ссылки в пагинации для загрузки след страницы
  6. loader: '<div style="text-align:center;"><img style="width: 30px;" src="/templates/port_import/img/squares.gif"></div>',
  7. delay: 5000
  8. })

Но что делать с задержкой ума не приложу - прошу помощи у знатоков

Реализация пока тут: http://port-import.w...ness-ideas.html


Сообщение отредактировал mr.varhola: 03 August 2016 - 04:18

  • 0

#19 mr.varhola

mr.varhola

Отправлено 03 August 2016 - 04:32

Проблема с лоадером была по причине, что функции не отрабатывают по какой-то причине

  1. ias.extension(new IASSpinnerExtension({
  2. src: '/images/squares.gif', // адрес лоадера для красоты
  3. }));
  4. ias.extension(new IASNoneLeftExtension({html: '<div class="ias-noneleft" style="text-align:center"><p><em>Это конец </em></p></div>'}));
  5. //текст когда айтемы закончатся по желанию

  • 0

#20 isay777

isay777

Отправлено 03 August 2016 - 05:14

mr.varhola сказал(а) 03 Ауг 2016 - 03:32:

 

Проблема с лоадером была по причине, что функции не отрабатывают по какой-то причине

  1. ias.extension(new IASSpinnerExtension({
  2. src: '/images/squares.gif', // адрес лоадера для красоты
  3. }));
  4. ias.extension(new IASNoneLeftExtension({html: '<div class="ias-noneleft" style="text-align:center"><p><em>Это конец </em></p></div>'}));
  5. //текст когда айтемы закончатся по желанию

 

У тебя в консоли ias.extension выдает ошибку. По какой причине не могу понять . 

Кажется причина в разметки js


Сообщение отредактировал isay777: 03 August 2016 - 05:15

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





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

Click to return to top of page in style!