Модуль jQuery Fancybox для Drupal 6

Вдогонку к предыдущей статье, где было рассмотрено «вживление» в CMS Drupal jQuery-плагина Fancybox «ручным» методом, предлагаю вариант интеграции в виде полноценного модуля.

Поясню, на всякий случай, че-к-чему для «невъезжающих» и «только что подъехавших»:
Fancybox - плагин jQuery, реализующий т.н. lightbox-эффект при клике на определенную ссылку сайта. Ссылка может быть как на изображение (в максимальном его разрешении, например), так и на некую веб-страницу, форму или специально приготовленный для этих действий файл.

В нашем случае Fancybox рассматривается в контексте его применения лишь исключительно к ссылкам на изображения. Посмотреть глазами и «пощупать» мышкой Fancybox в работе можно на соответствующей странице его автора. Куда я вас для закрепления понимания и посылаю. Без всякого намека на грубость, заметьте.

О модуле

Данный его вариант был собран по мотивам предложений от пользователей drupal.org относительно уже существующего модуля Fancybox для пятой версии Друпала. Был обновлен файл самого скрипта (до версии 1.2.6) и добавлены новые настройки.

Возможности

Должен сразу предупредить: делалось сие в соответствиями с собственными потребностями. Посему не поддерживаются некоторые совершенно мне не нужные опции. Такие, как:

  • дополнительные методы анимации (плагин jQuery Easing);
  • интеграция с другими модулями (ImageCache, Image и иже с ними);

Мне был нужен «легкий», просто настраиваемый, симпатичный и максимально «безглючный» инструмент для показа фотографий пользователям своих сайтов.

Установка и настройка

Все как обычно.

1. Распаковываем архив, содержащий папку с модулем в соответствующую директорию на сервере.

2. Логинимся Админом и включаем модуль на странице модулей (http://www.SITE.ru/admin/build/modules).

3. После включения модуля становится доступна страница его настроек (http://www.SITE.ru/admin/settings/fancybox), где вы сможете «вылепить» их комбинации согласно собственным предпочтениям - настроек достаточно много.

Страница настроек модуля Fancybox.

Настройки можно оставить и те, что выставлены по умолчанию. Но что бы все это заработало прежде всего необходимо назначит css-класс ссылки, которую будет обрабатывать Fancybox. Поле для ввода названия класса находится в самом верху на странице настроек модуля. Не забывайте перед названием класса ставить точку - "." (или "#" если назначаете обработку для уникального css-идентификатора - ID).

Вот и все. Надеюсь, что данный модуль будет полезен не только мне.

ПэСэ:

При подключении Fancybox к Drupal`у 6 c его дефолтной версией jQuery - 1.2.6 в браузере Opera от 9.5 билда и до последнего наблюдаются аномалии при открытии изображений. Избавиться от данного недоразумения можно двумя методами.

Первый - это установка модуля jQuery Update (нужен билд 6.x-2.x), обновляющий библиотеку jQuery Друпала до версии 1.3.х. С данной версией jQuery «оперной» проблемы нет. Имеет смысл воспользоваться таким решением, если модуль jQuery Update уже установлен и используется.

Второй метод (мой выбор) - небольшая коррекция кода самого Fancybox`а. В этом случае «костылик» в виде jQuery Update не нужен, никаких подмен «ядерных» файлов Друпала не требуется.

В аттаче прилагаются два варианта модуля, решающие проблему с Оперой в соответствии с описанным выше.

Прикрепленные файлы
Dalay

Комментарии

Спасибо за модуль,все замечательно работает. Еще бы русификацию к нему.

В Opere работает некорректно

Да, действительно. Значит придется таки обновлять jQuery до 1.3, с последней версией библиотеки «оперной» проблемы нет.

Модуль в аттаче обновил. Добавлена зависимость от модуля jQuery Update.

Добавил вариант модуля с исправлениями в самом Fancybox, без дополнительной установки jQuery Update.

За модуль спасибо,фансибокс еще с вордпрессом использовал,теперь с друпалом буду.

Хороший модуль, странно что он у меня в IE 8, 7, 6 ни в каком не работает, пробовал оба модуля, а в Mozilla и Opera все нормально.

Выяснил, он не работает в IE потому, что я еще использую Dynamic display block, ему тоже требуется jQuery Update.

Спасибо за модуль. Посткажите только где в настройках изменяется расположение заголовка. Никак не могу найти 'titlePosition' : 'inside', 'over' и 'titleShow' : false

Возможность настраивать отображение заголовков, насколько я понимаю, в апи Fancybox появилась только в текущей его версии - 1.3.хх. Между тем, модуль, представленный на этой странице, основан на версии 1.2.6.

Не удается назначить css-класс ссылки, которую будет обрабатывать Fancybox.
Есть такой класс-.content-images. Не хватает знаний. Пытаюсь внуку сделать блог. Мозги старые уже :), не выходит ни хрена...
Этот класс надо еще где-нибудь прописывать?

В настройках Fancybox на странице site.ru/admin/settings/fancybox в самое верхнее поле с лейблом CSS class or id вписываете нужный css-класс ссылки на фото, которую будет обрабатывать скрипт. Вписываете вместе с точкой, примерно так: .yassilkinclass.

Внука с прошедшим.

[b]Dalay[/b], спасибо Вам огромное за информацию. У меня знаний ещё меньше, чем у Антона, а мозги напрочь слесарные :) Подскажите, пожалуйста, где мне брать эту css-класс ссылки, чтобы прописать ?
С помощью ОперыДрагонфлай я её как-нибудь смогу просмотреть?
Заранее благодарен.

Драгонфлаем не пользуюсь, посему порекомендую Firebug для Firefox.

Может у меня с imagepicker конфликт. Я им вставляю изображения. Черт,...
Спасибо за поздравления.
Остановлюсь наверное на Node Images или Galleria...

Отличный модуль, все заработало ) модуль работает на ура

Очень хороший модуль, понадобилось во вьюсовой таблице проставлять дефолтовую иконочку на те позиции у которых есть картинка и выводить соответственно . Из всех - lightbox, colorbox, тот fancybox что на орге - ваш заработал под эту задачу лучше всех, и страницу совсем не грузит.

Ребята, чё за класс, где взять его, я хочу чтобы все имейджи открывались через модуль. Вы всю хеорню объяснили, а о самом главном ничё не сказали, гадать отсвили!) Модуль я установил, а дальше кк бы проще простого, чё делать-то??

...что бы все это заработало прежде всего необходимо назначит css-класс ссылки, которую будет обрабатывать Fancybox. Поле для ввода названия класса находится в самом верху на странице настроек модуля. Не забывайте перед названием класса ставить точку - "." (или "#" если назначаете обработку для уникального css-идентификатора - ID).

Если не понятно на русском, то тут на английском.

Как назначить-то?)) Мне нужно CSS-ник открыть и назначить класс или нужно взять класс из CSS-ника и вбить его в вернюю строчку?) И если нужно, чтобы просто все картинки открывались которые в паке files лежат как быть? На английском он там рассуждает как внедрять, а про модуль я там чёт ничё не нашёл)

Пример:
Маленькая картинка является так же ссылкой на свою «большую» копию. У картинки-ссылки есть некий класс.

Вам нужно, что бы по клику на вышеописанную картинку-ссылку с помощью Fancybox «большая» ее копия красиво «всплывала»(т.н. LightBox-эффект) посреди текущей страницы.

Дабы указать Fancybox`у, что с данной картинкой-ссылкой нужно сделать именно то, что описано выше, на странице настроек модуля надобно указать класс этой самой ссылки(которая картинка-ссылка).

Так понятней?

Здравствуйте!
Вы говорите "надобно указать класс этой самой ссылки(которая картинка-ссылка)", этот класс нужно заранее в стилях прописать?

Спасибо, так понятней) Я решл вопрос с помощю Thickbox - тупо ставишь модуль и всё, почти то же самое))

В настройках модуля, под полем куда вводить этот класс, сказано:

"The css class or ID to consider for fancybox. Fancybox will insert this value after the tag a.
Example: insert .myimageclass and fancybox will output a.image. Your markup has to be like this: ."

так вот можно реальный пример, что прописывать в этой разметке именно на сайте?

нету там поля для ввода класса, где вы его взяли?