5 января 2016 в 1:06
Ситуация:
Слайдер и JQuery не могут подружиться.
Запускаем слайдер так:
jQuery(window).load(function() {
$(selector).iLightBox({
skin: 'light'
});
});
$(selector).iLightBox({
skin: 'light'
});
});
Работает слайдер, в админке JQuery тоже работает.
Дергаем на страничке AJAX.
После этого слайдер естественно уже не работает 
Хорошо. Засовываем слайдер в
(function ($) {
Drupal.behaviors.MY_MODULE = {
attach : function(context, settings) {
$(selector).iLightBox({
skin: 'light'
});
} // attach
};
}) (jQuery);
Drupal.behaviors.MY_MODULE = {
attach : function(context, settings) {
$(selector).iLightBox({
skin: 'light'
});
} // attach
};
}) (jQuery);
Слайдер работает замечательно как ДО дерганья на страничке AJAX, так и после, сколько угодно раз.
JQuery отказывается работать. В Админке в связи с этим "траур" - никакие скрипты не работают 
Смотрим отладчик, видим, что он ругался:
TypeError: jQuery(...).iLightBox is not a function
О чем это говорит? Мы вызвали функцию ДО ее инициализации? А почему тогда слайдер работает?
Вообщем, я не догнал. Прошу помощи. Спасибо.
Комментарии
1 инетерсно люди пляшут - а где определение подружаете для .iLightBox прежде чем использовать ?
И я бы в аттаче изменил
$(this).iLightBox ...
});
Как умеем так и пробуем плясать.
> определение подружаете для .iLightBox прежде чем использовать
Где плагин загружается? Уже загружен своими скриптами и css. Или вы о чем говорите?
И почему именно на этот код вы бы изменили в аттаче? Прошу объяснить. В чем соль?
В чем причина неработы моего варианта?
Что неправильно?
Спасибо.
Применил ваш код.
Все заработало. Но слайдер показывает только ОДНУ картинку.
После загрузки страницы всем картинкам слайдера в HTMLе добавлен class = ilightbox-once-processed
Почему ONCE ? Знаю, скажете RTFM
Drupal.behaviors.MY_MODULE = {
attach : function(context, settings) {
$(SELECTOR, context).once('ilightbox-once', function(){
$(this).iLightBox({
skin: 'light',
});
});
} // attach
};
}) (jQuery);
Интересное наблюдение (вынужден экспериментировать):
если данный участок кода
$(this).iLightBox(заменить на
$(SELECTOR).iLightBox(то все картинки в селекторе показываются как надо. Только они выводятся поверх аналогичного слайдера (назовем его теневым), который находится в слое как бы за текущим слайдером.
При выходе из слайдера, теневой слайдер тоже закрывается.
Во всем остальном все работает и ДО дерганья AJAX и ПОСЛЕ.
Эксперимент завершился удачей.
Заработало все как надо.
Но в чем причина я так и не понял.
Объясните пожалуйста, чтобы темноты у меня стало меньше. Мы же все стремимся к свету
Вот это рабочий код.
Объясните пожалуйста его. Можно ли его оптимизировать? Как?
Drupal.behaviors.MY_MODULE = {
attach : function(context, settings) {
$('ul#infinite_scroll', context).once('ilightbox-once', function(){
$('ul#infinite_scroll li a').iLightBox({
skin: 'light',
});
});
} // attach
};
}) (jQuery);
Скорее всего дело в специфики функционароания .iLightBox судя по последнему коду ему нужен "ul#infinite_scroll li" тогда логично переписать
$('ul#infinite_scroll li a', context).once('ilightbox-once', function(){
var thisEl = $(this);
thisEl.iLightBox({
skin: 'light',
});
});
...
Но ul#infinite_scroll хреновый селектор для ajax - так как может стать не уникальным, надо бы использовать class
Не работает данный код, точнее работает но на 50%.
Он показывает только одну картинку в слайдере. Отсутствует лента маленьких preview'шек рядом и больших соседей. (образец работающего слайдера: http://ilightbox.net/infinite_scroll.html )
Надо разбираться с библиотекой - как работает и по примерам и демо смотреть, в друпале подключение стандартное, но селекторы зависят от логики.
Понятно что "надо бы", но при работающем коде, кто этим будет заниматься? Не разработчик слайдера же.
Разбираться надо Вам, чтобы понять что к чему и как используется, чтобы правильно построить логику js кода
Куда деваться ?