Lightbox-эффекты для изображений с использованием jQuery. Дружим Drupal и скрипт FancyBox.

Всем хорош скрипт Highslide за исключением двух моментов - размер и игнорирование jQuery, чей богатый набор возможностей скучает без пользы в кэше браузера посетителя вашего сайта на Drupal.

Долгое время, ослепленный «хорошестями» и настраиваемостью Highslide, всем другим похожим решениям для отображения изображений объявил я тотальный игнор. Но прошло время, «глаза привыкли к свету», и вернулся на место мой хронический недуг - любовь к простоте. Да и тяга к разнообразию сыграла свою роль.

Стал я шерстить глобальную сеть на предмет lightbox`овых альтернатив с использованием jQuery. Таких, как и ожидалось, жило в интернете большое количество. После многодневного тестирования и придирчивого отбора найденного появился новый фаворит - FancyBox.

FancyBox. Знакомство с возможностями.

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

  • Адекватное восприятие скрипта ушастым осликом IE, даже версии 5.5, что и не ожидалось даже. На Огнелисе и Опере проблем при тестировании не выявилось так же.
  • Симпатичный Мак-стиль дефолтового «фейса» и «безгеморная» реализация возможности его изменения под собственное видение.
  • Припростейшее его «цепляние» к изображениям сайта. Как к одиночным, так и групповым.
  • Безжалостное использование библиотеки jQuery. Работает с версией jQuery 1.2.6. Той, что входит в стандартный установочный пакет Drupal`а.
  • Сравнительно миниатюрные размеры при впечатляющих возможностях. Вес «пожатого» файла самого скрипта - менее 9Кб.

Документацию в полном объеме желающие могут почитать на сайте автора скрипта. Там же и внушительный список доступных к изменению опций для получения того или иного эффекта.

Показательные демки работы FancyBox можно увидеть на этой странице.

Практическая часть. Дружим FancyBox с Drupal`ом.

Переходим теперь к самому интересному. К интеграции FancyBox с нашей любимой CMS Drupal.

Никаких особо острых подводных камней на данном этапе нас не ожидает. Если вы читали предыдущие мои публикации касательно «нативного» сращивания Друпала с плугинами jQuery, и суть их понятна, то ничего принципиально нового в случае с FancyBox скорей всего не обнаружите.

1. Скачиваем последний релиз скрипта на сайте автора. На момент написания доступна версия 1.2.6.

В архиве всего одна папка - fancybox, где лежат два файла скрипта (упакованный и незжатый), файл стилей и служебные имаджи к нему.

2. Закачиваем папку fancybox со всем ее содержимым на сервер в директорию текущей темы. Файл с непожатым кодом можно удалить. Использовать его заместо упакованного смысла нет.

3. Открываем файл template.php темы и добавляем в него код, подгружающий файлы FancyBox:

drupal_add_css(path_to_theme(). '/fancybox/jquery.fancybox-1.2.6.css');
drupal_add_js(path_to_theme(). '/fancybox/jquery.fancybox-1.2.6.pack.js');

4. Вызов скрипта «к жизни» реализуется помещением на страницу с изображениями следующего кода:

<script type="text/javascript">
$(document).ready(function() {
$("a.zoom").fancybox(); /* Указываем скрипту с каким css-классом в ссылке на изображение он должен работать. В примере это класс - «zoom» в теге «a» (a.zoom). Если не указывать класс вообще (оставив только тег ссылки «а»), то скриптом будут обрабатываться все ссылки на изображения. */
});
</script>

Или с какими-либо дополнительными параметрами из возможных:

<script type="text/javascript">
$(document).ready(function() {
$("a.zoom").fancybox({
 'overlayOpacity'       : 0.7,    // Задаем степень прозрачности фона.
 'overlayColor'         : '#FFF', // Цвет фона.
 'zoomSpeedIn'          : 500,    // Скорость «открытия» изображения.
 'zoomSpeedOut'         : 500     // Скорость «закрытия» изображения.
});
});
</script>

Куда «засунуть» код вызова? Вариантов, как и обычно, несколько.

а) В тот же template.php добавлением в него:

drupal_add_js('$(document).ready(function() { $("a.zoom").fancybox(); });', 'inline');

б) В файл шаблона ноды - node.tpl.php. Не забываем заключать код в теги:

  <script type="text/javascript"> ... </script>
 

в) В файл шаблона страницы - page.tpl.php. Не забываем и в этом случае заключать код в теги:

  <script type="text/javascript"> ... </script>
 

г) В самый конец кода самого скрипта, имеется в виду файл jquery.fancybox-1.2.6.pack.js. Теги

  <script type="text/javascript"> ... </script>
 

в этом случае не нужны.

5. Полностью очищаем кэш.

6. Бродим по страницам своего сайта и наслаждаемся содеянным, кликая на фотки.

Удачи в интересной жизни вам, коллеги.
На сим - аривидерчи.

Dalay

Комментарии

Попробую рискнуть на этих выходных.
Спасибо, Dalay!

Вот ещё если бы Вы прямо сюда пример вставляли, было бы вообще хорошо и нагляднее.

Есть же в начале ссылка на примеры, Василий. http://fancybox.net/example

Я непонятно выразился.
Хотелось бы видеть здесь текст изменённого файла template.php с комментариями в нём - что, куда и зачем вставлено и с полным путём к картинке, например, на этом или другом сайте. Т.е. от и до - конкретный пример.
Цель - сразу взять и пользоваться а не думать ;)
думать - это на drupal.org;
обсуждать - это на drupal.ru;
а брать готовые полезные штучки для Друпала для их немедленного внедрения - здесь на drupalka.ru

:) Убийственные пожелания. Только утопические: без «подумать» не получится никак.

Кстати обновился FancyBox, до 1.3.

это все понятно. я делал так же, только использовал другое слайд-шоу. по идее ссылки на оригинальное фото формируются без какого-либо стиля. и поэтому до вывода материала (в нашем случае изображений) нужно в тэг 'a' засунуть атрибут class="zoom" (к примеру).
подскажите, пожалуйста, как это сделать, не прибегая к самостоятельному выводу всего материала??
я знаю, как при формировании ссылки функцией l() добавить туда атрибут, но не знаю как сделать, чтобы этот атрибут добавлялся только в ссылки с изображениями.
мне пришлось самому писать запросы на вывод фотографий на страницу =)
или поправьте меня, если я ушел совсем не в ту сторону...

Вообще не понимаю о чем вы. Попробуйте обьяснить проблему свою более доступным языком.

Вроде понял вашу надобность.
Добавьте куданить в файл темы, лучше в шаблон ноды нужного типа, вызов:

drupal_add_js('$(document).ready(function(){ $(img).addClass("zoom");});', 'inline');

спасибо за помощь!
как я понял, этот скрипт в тэг добавляет class=zoom.
будем проверять.

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

В общем, такой используйте:

drupal_add_js('$(document).ready(function() { $("a:has(img)").addClass("zoom"); });', 'inline');

Еще раз спасибо.

Привет, интересная тема, но у меня не получилось, а именно сделал так:
1) закинул папку в свою тему
2) в template темы написал подключение css javascript и инициализацию
В результате эффекта нет, пробую консоль ошибок в FireFox ругается на следующее:
b.support is undefined Строка: 17
Что могло бы это значить и что я не так сделал

Ставьте модулем.

Сегодня набрел на ваш блог в поисках модуля корзины, нашел очень много всего интересного, спасибо!
По существу, хотелось бы понять принцип работы:
1. Скрипт обрабатывает все картинки с правильном классом (тут все ясно)
2. Tumbnail (маленькую картинку) делает скрипт? Какие размеры?

Пожалуйста.
1. Ага. Но не картинки, а ссылки на них(с маленькой на большую).
2. Пофиг ибо см. пункт 1.

Угу, спасибо. Уже разобрался, прочитав следующий пост про модуль.