Вы здесь

Views Infinite Scroll + Background Images Formatter = не отображаются картинки при скролле

0

Да-да, снова я. Чего-то накопилось вопросов за последний месяц..

Итак, использую Background Images Formatter для вывода в блоке Views изображения, в качестве бэкграунда. Если включаю пагинацию в виде Infinite Scroll для этого блока, то этот фон у элементов, которые были изначально видны (например, первые 10 штук) — отображается, а когда подгружаются любые другие — нет.

Полез в код страницы: да, действительно, Background Images Formatter единожды при рендере страницы добавляет в head свои стили — .node-[nid] { background: ... }, в которых как раз и указаны ссылки на изображения.

Можно ли как-то это исправить?

Версия Drupal: 
7.x
Категория: 
AJAX
Связанные проекты: 
Views Infinite Scroll
Вопрос задан 19.10.2015 - 12:14

Ответы

0

Можно, используйте событие которое возникает после добавления элементов например

... jQuery(selector).on("DOMNodeInserted" .........

Ответ дан 19.10.2015 - 13:41

Ага. В теории, конечно, ясно-понятно.

Порылся ещё по модулям около этой проблемы. Нашёл интересную функцию bg_image_add_background_image() в модуле Background Images (от этого модуля зависит Background Images Formatter). Как раз в ней и создаются эти классы в head страницы.

Как бы мне альтернуть эту функцию в своём модуле (или в template.php), чтобы туда как раз DOMNodeInserted запихнуть? Вообще, я не имел дела с подобными задачами, так что буду рад любой (особенно хорошо расписанной) помощи :)

Комментарий оставлен 19.10.2015 - 16:17

Ладно, а если пойти по другому пути — добавить вызов (обновление) функции bg_image_add_background_image() после добавления новых элементов (при скролле страницы), например, куда-то сюда:
./sites/all/modules/views_infinite_scroll/js/views_infinite_scroll.js

Можно ли вообще вызвать функцию одного модуля из JS-файла другого модуля? :)

Комментарий оставлен 20.10.2015 - 01:06

Как-то через это в своём модуле?

(function ($, Drupal) {
  Drupal.behaviors.my_module = {
    attach: function (context, settings) {...}
  };
});
Комментарий оставлен 20.10.2015 - 12:43

Ладно, пошёл через свой модуль + DOMNodeInserted.
Работает — в консоле даёт понять, что элементы новые создаются. Вот код:

(function($, Drupal) {

  Drupal.behaviors.my_module = {
    attach: function (context, settings) {
      $('.my-class').on('DOMNodeInserted', function() {
        console.log('> ', 'New element!');
      });
    }
  }

})(jQuery, Drupal);

Теперь вопрос: как из этого JS скрипта в моём модуле вызвать функцию из другого модуля (или сделать альтер оригинала и разместить в my_module.module)? Да так, чтобы он ещё и обновил картинки только у этих новых созданных элементов, а не у всего DOM?

Прошу помощи, ибо гугл уже не помогает в этом. Должны же тут быть гуру-друпала, которые с этим уже сталкивались.. Жаль нельзя, как на Тостере, «приглашать эксперта» в вопрос :(

Комментарий оставлен 20.10.2015 - 16:16

Обратите внимание в описании модуля на строчку
Reported installs: 3,157 sites currently report using this module.
Это по всему миру.
Представьте сколько народу одновременно с этим модулем используют Infinite Scroll
Потом сколько из них столкнулись и решили данную проблему.
Потом сколько из этой части читают на данный момент dru.io
И сколько из этой части готовы поделится решением.)
Кстати, если такой косяк с модулем, на d.org для модуля есть issues, неплохо бы его открыть.

Комментарий оставлен 21.10.2015 - 23:34

Спасибо, Кэп :)

Issue уже открыл, там пока никто не реагирует. Но я, вроде как, нашёл решение — свой модуль и немного напильника. Причём решение вообще обходит модуль Background Images (и иже с ним), а работает через Image URL Formatter.

Позже выложу на гитхаб и тут ссылку дам на этот модуль, пока оформляю по друпли-шую :)

Комментарий оставлен 22.10.2015 - 13:12

Раз кэп, то непонятно откуда фраза

Должны же тут быть гуру-друпала, которые с этим уже сталкивались..

Даже на d.o. никто не вписывается.

а работает через Image URL Formatter

А зачем модуль тогда? Все решается js-скриптом, получаем адрес картинки и через .css() назначаем ее в качестве background'а нужному элементу

Комментарий оставлен 22.10.2015 - 13:28

Перефразирую: должны же тут быть гуру-друпала, которые сталкивались с неверным отрабатыванием Infinite Scroll в союзе с _________ (вставить любое название) модулем.

Просто иногда листаешь вопросы и по названию не всегда ясно, а так почитаешь комменты/ответы — оказывается тема знакомая, можно подсказать как решал на примере другого модуля и так далее. Я в этом плане.

А зачем модуль тогда?

Мне так проще, ибо решение это для многих сайтов (текущих и будущих) надо перенести и чтобы админам потом было удобно редактировать — везде же классы у дивов будут свои, а универсальный js-скрипт написать — так проще уж в настройках модуля из админки дать все нужные поля.

Комментарий оставлен 22.10.2015 - 13:37