Бесконечная прокрутка как ВКонтакте - настраиваем модуль Views Infinite Scroll

Drupal: 
Уровень сложности: 
Модули: 

Постраничный вывод тизеров на сайте - слишком не интерактивная и медленная вещь, от которой вы откажетесь, когда попробуете модуль Views Infinite Scroll. Благодаря нему вы получите бесконечную ленту новостей, как например в соц. сетях. Посетителям будет гораздо проще просматривать сайты, которые автоматически подгружают новости, когда посетитель достиг конца страницы (самого низа).
Тема урока: Как сделать бесконечную прокрутку новостей с автоматической подгрузкой новой страницы новостей при достижении конца страницы. Как пользоваться модулем Views Infinite Scroll.
Вопросы: как заставить Infinite Scroll работать? Почему не подгружаются новости автоматически? Где включить Infinite Scroll?

Модуль не добавляет сразу для вашего сайта такую опцию для всех страниц. Для его работы нужно создать Вьюс (Представление) и там включить опцию Infinite Scroll. Например, это может быть Представление по материалам на главной странице или в рубрике.

Как сделать автоматическую подгрузку новостей

  1. Скачайте и активируйте модуль Views Infinite Scroll ( по ссылке в разделе Модули)
  2. Выполните все необходимые зависимости, то есть в данном случае скачайте в папку js модуля файл jquery.autopager....js
  3. Создайте Представление для материалов и Страницу для этого представления (не Блок)
  4. В графе Pager (средняя колонка при редактировании Представления) нажмите на Paged output, или Нет, и выберите новый способ: Infinite Scroll
  5. Задайте адрес страницы Представления и сохраните Представление
  6. Если вы откроете адрес страницы представления, и новостей больше, чем помещается на странице, вы увидите как подгружаются новости при достижении конца страницы

Infinite Scroll работает только для Представлений, поэтому для обычного отображения последних записей это работать не будет.
Поэтому если вам нужно, чтобы такое представление отображалось на Главной, откройте Конфигурация - О сайте и вставьте в графу "Главная страница по умолчанию" адрес вашего представления. Теперь на главной вы будете иметь бесконечную прокрутку.
Для бесконечной прокрутки в разделах сайта вам нужно создать Представление для рубрик и с помощью модуля Taxonomy Display для вашего словаря настроить использование созданного вами Представления вместо обычного отображения материалов от Ядра на странице термина Таксономии.

Проблемы

Пишет: autopager jquery plugin not loaded. - Вам нужно внимательно прочитать пункт 2: выполните зависимости, то есть скачайне на странице модуля файл jquery.autopager-1.0.0.js и вставьте его в папку модуля то есть sites/all/modules/views_infinite_scroll/js.
Не отображается индикатор загрузки, но подгружаются новые тизеры. - Вам нужно прописать в style.css вашей темы:

div#views_infinite_scroll-ajax-loader {clear:both;float:none;}

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

Пишет: Uncaught TypeError: Cannot read property 'top' of null. Нужно 1. отключить ajax во вьюс (в настройках представления справа Advanced - Use Ajax - Нет) 2. нужно обязательно добавлять классы строк, то есть в настроках формата вывода, например Неформатированный список, нужно отметить галку "Добавлять классы строк".

Не работает Views Infinite Scroll с Masonry. Это часто обсуждается, патчей много, работают иногда. Я не нашёл, поэтому предлагаю просто не использовать Masonry, вместо него в CSS ограничить высоту блока тизера, чтобы все тизеры были равной высоты (а контент лишний скрывать overflow:hidden;).

Как добавить ссылки на страницы как ВКонтактке, чтобы не прокручивать а сразу перейти на нужную страницу? - Сам так хочу. Если решите, сообщите.

Как изменить индикатор загрузки? - Для этого просто замените файл sites/all/modules/views_infinite_scroll/images/ajax-loader.gif на новую картинку, например такие картинки есть в модуле LazyLoader.