Jump to content

Бесконечная прокрутка 2.0 (+ подгрузка по кнопке и еще фишки)


Recommended Posts

Спасибо большое автору этого топика:

http://forum.simplacms.ru/topic/6074-%D0%B1%D0%B5%D1%81%D0%BA%D0%BE%D0%BD%D0%B5%D1%87%D0%BD%D0%B0%D1%8F-%D0%BF%D1%80%D0%BE%D0%BA%D1%80%D1%83%D1%82%D0%BA%D0%B0-aka-%D0%BD%D0%BE%D0%B2%D0%BE%D1%81%D1%82%D0%B8-%D0%B2%D0%BA%D0%BE%D0%BD%D1%82%D0%B0%D0%BA%D1%82%D0%B5

 

Но я посидев в гугле пол ночи нашел таки решение более гибкое, а именн мне нужна была кнопка "Показать еще", плюс он не совсем управляемый:

1. Качаем скрипт: https://yadi.sk/d/CcnMVAKpcwyyN кидаем его в папку js нашей темы

 

2. Подключаем его скрипт перед самым тегом </head>:

{literal}<script src="{/literal}design/{$settings->theme}/js/jquery-ias.min.js{literal}"></script>{/literal}

2. В products.tpl в самом низу инициируем его + настраиваем:

{literal}
	<script>
		var ias = jQuery.ias({
		  container:  '.tiny_products',  // главный блок с подгружаемым контентом
		  item:       'li',              // селектор подгружаемых элементов
		  pagination: '.pagination',     // блок с сылками пагинации
		  next:       '.next_page_link'   // ссылка "следующая страница"
		});


// кнопка "показать еще" в виде html кода, который можно оформить через стили	
		ias.extension(new IASTriggerExtension({	 
		html: '<div class="ias-trigger ias-trigger-next" style="text-align: center; cursor: pointer;"><a style="border-bottom:1px dashed; font-size:20px;">показать еще товары</a></div>', // optionally
		}));

// показать картинку загрузки загрузки товаров (a.k.a. loader)	
		ias.extension(new IASSpinnerExtension());             


// показать надпись когда все загружено		
		ias.extension(new IASNoneLeftExtension({            
			text: 'Загружены все товары.', // optionally
		}));


// показывает url при листинге
		ias.extension(new IASPagingExtension());            
		

// Штука ниже это та же кнопка "показать еще" только для страниц позднее 1й, выводятся товары ранее
		ias.extension(new IASHistoryExtension({ 
			prev: '.prev_page_link', // указываем ссылку предыдущей страницы
			html: '<div class="ias-trigger ias-trigger-next" style="text-align: center; cursor: pointer;"><a style="border-bottom:1px dashed; font-size:20px;">товары ранее</a></div>', // optionally
		}));
</script>
{/literal}

 

Вот такой вот простенький и ОЧЕНЬ легкий скрипт (15Кб).

 

 

!? ВОПРОС: у меня стоит "быстрый просмотр" fancybox от Davinci, при подгрузке новых элементов fancybox  их не видит, пробывал с ними подгружать JS  - но он затирается, как быть?

Link to post
Share on other sites

!? ВОПРОС: у меня стоит "быстрый просмотр" fancybox от

Davinci, при подгрузке новых элементов fancybox  их не видит, пробывал с

ними подгружать JS  - но он затирается, как быть?

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

А вообще, такого рода скрипт имеет смысл только если выводится постраничная навигация с отображением номера текущей страницы и возможностью быстрого перехода на нужную, типа как здесь http://www.drugiepodarki.com/category/s-soboy/. А так, если человек по алфавиту или по цене примерно видит, что его товар должен быть где-то на 15-й странице, то ему придется листать все 15 страниц, чтобы попасть на нужную.

Link to post
Share on other sites

Cкрипт качается jquery-ias.js а подключается - jquery-ias.min.js.

В "инициализации и настройке" :

{/literal} ...... {/literal}
 

Я правильно понимаю, что пропадают кнопки стандартной пагинации?

Link to post
Share on other sites

Cкрипт качается jquery-ias.js а подключается - jquery-ias.min.js.

В "инициализации и настройке" :

{/literal} ...... {/literal}
 

Я правильно понимаю, что пропадают кнопки стандартной пагинации?

 

Спасибо за указ на ошибку - исправил. Перелезалил ссылку (FileZilla че-то подвис просто, руками все делал)  :)

 

Да кнопки пропадают. Но с отключенным js вроде не должны. Там есть плагин пагинации

 

 ias.extension(new IASPagingExtension());
 

он показывает урл страниц  при листинге товаров 

 

 

а вообще вот сайт разработчика  http://infiniteajaxscroll.com/docs/extension-paging.html

там есть описания и инструкции

Link to post
Share on other sites

спасибо автору! еще остались люди, что делятся доработками бесплатно! честь и слава вам

 

Да бросьте, это мелочь , и  тут все сообщество такое, доработок море, и помогают бесплатно даже мастера, которые деньги на этом зарабатывают. Спасибо и Noxter и Mart (simplashop.com) и Davinci  и др.

Link to post
Share on other sites

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

А вообще, такого рода скрипт имеет смысл только если выводится постраничная навигация с отображением номера текущей страницы и возможностью быстрого перехода на нужную, типа как здесь http://www.drugiepodarki.com/category/s-soboy/. А так, если человек по алфавиту или по цене примерно видит, что его товар должен быть где-то на 15-й странице, то ему придется листать все 15 страниц, чтобы попасть на нужную.

Вот сайт с скриптом, а именно страница с пагинацией :

http://infiniteajaxscroll.com/docs/extension-paging.html

 

Но тут выводится просто сообщение (к слову у меня не получилось ) с текстом типа: вы на странице такой то

если его как то оптимизировать, но это не мой левел

Link to post
Share on other sites

Cкрипт качается jquery-ias.js а подключается - jquery-ias.min.js.

В "инициализации и настройке" :

{/literal} ...... {/literal}
 

Я правильно понимаю, что пропадают кнопки стандартной пагинации?

 

можно просто в этом коде

 

pagination: '.pagination', // блок с сылками пагинации 
 

не указывать блок с пагинацией, тогда она остается и все работает также, но не обновляются в ней значения

Link to post
Share on other sites

!? ВОПРОС: у меня стоит "быстрый просмотр" fancybox от Davinci, при подгрузке новых элементов fancybox  их не видит, пробывал с ними подгружать JS  - но он затирается, как быть?

http://api.jquery.com/delegate/

http://stackoverflow.com/questions/6358929/delegate-in-combination-with-fancybox

http://stackoverflow.com/questions/7114450/using-delegate-on-click-event-to-load-fancybox

Link to post
Share on other sites

"Внутренности" скрипта по ссылке:

 

http://dimito.com/shop/goods/goods_view.php?goodsno=4662&category=057001 http://dimito.com/shop/goods/goods_view.php?goodsno=4533&category=057001 http://dimito.com/shop/goods/goods_view.php?goodsno=4532&category=057001 http://dimito.com/shop/goods/goods_view.php?goodsno=4531&category=057001 http://dimito.com/shop/goods/goods_view.php?goodsno=4530&category=057001 http://dimito.com/shop/goods/goods_view.php?goodsno=4529&category=057001 http://dimito.com/shop/goods/goods_view.php?goodsno=4527&category=057001 http://dimito.com/shop/goods/goods_view.php?goodsno=4526&category=057001 http://dimito.com/shop/goods/goods_view.php?goodsno=4525&category=057001 http://dimito.com/shop/goods/goods_view.php?goodsno=4524&category=057001 http://dimito.com/shop/goods/goods_view.php?goodsno=4523&category=057001 и так далее
 

В Опере не показывает ?page=2 и т.д.

Link to post
Share on other sites
  • 1 year later...

Да платная штука то, хотелось бы попробовать прикрутить, сайт - явно для получения выгоды))

 

во-первых я вам кинул скрипт на Я.Диске. во-вторых там можно скачать скрипт внизу такой большой кнопкой.

Link to post
Share on other sites
  • 8 months later...

Кто-то смог сделать автоматическое перелистывание в пагинации при переходе на страницу при нажатии на кнопку "показать ЕЩЁ" ?

 

А разве пагинация не подгружается аяксом? Не помню как было у меня

 

Кто-то смог сделать автоматическое перелистывание в пагинации при переходе на страницу при нажатии на кнопку "показать ЕЩЁ" ?

 

Либо вам сюда http://infiniteajaxscroll.com/docs/events.html

Link to post
Share on other sites
  • 1 month later...

Подскажите пожалуйста куда копать, вылезла ошибка

 

 Uncaught Error: Syntax error, unrecognized expression: ]

    at Function.m.error (jquery.js:3)
    at Function.m.filter (jquery.js:3)
    at m (jquery.js:3)
    at Function.m [as find] (jquery.js:3)
    at init.find (jquery.js:3)
    at init (jquery.js:2)
    at new e (jquery.js:2)
    at init (jquery.js:2)
    at e (jquery.js:2)
    at c.<anonymous> (jquery-ias.min.js:13)
Link to post
Share on other sites

 

Подскажите пожалуйста куда копать, вылезла ошибка

 

 Uncaught Error: Syntax error, unrecognized expression: ]

    at Function.m.error (jquery.js:3)
    at Function.m.filter (jquery.js:3)
    at m (jquery.js:3)
    at Function.m [as find] (jquery.js:3)
    at init.find (jquery.js:3)
    at init (jquery.js:2)
    at new e (jquery.js:2)
    at init (jquery.js:2)
    at e (jquery.js:2)
    at c.<anonymous> (jquery-ias.min.js:13)

 

где-то с селектором ошибка у вас, может быть с версией...

Link to post
Share on other sites
  • 3 months later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...