Открывайте все картинки в Colorbox!

Аватар пользователя Zil
Автор: 
Zil

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

Пример изображенияОднако, когда поработаешь с ним какое-то время, возникает желание, чтобы все ссылки на изображения, добавленные через текстовый редактор, открывались в Colorbox автоматом, без каких-либо дополнительных указаний и настроек. Например как изображение справа или вот эта ссылка. Мне кажется, эта функция настолько полезна и очевидна, что задаешься вопросом, почему она до сих пор не поддерживается в Colorbox UI (по крайней мере, я не нашел).

Хотя, возможно, она не встроенна именно потому, что ее легко реализовать самим...
Давайте посмотрим, как это сделать. Если до сих пор вы работали только через пользовательский интерфейс, сейчас мы немного расширим ваш кругозор! wink

NB: Перед этим вам нужно включить модуль 'PHP filter' на странице модулей. Этот модуль даст возможность вводить php-код в нодах и блоках. Будьте внимательны: доступ должен быть только для админов.

Теперь сделаем три простых шага:

Создайте скрипт

Создайте JavaScript файл, назовите его, например, 'colorbox-fix.js' и впишите в него следующее содержимое:

 
jQuery(document).ready(function($) {
	
	// Открываем все ссылки на изображения в ColorBox
	$("a[href$='.jpeg'], a[href$='.jpg'], a[href$='.png'], a[href$='.gif']")
	.attr('rel', 'gallery')
	.colorbox();
	
})(jQuery);
 

Сохраните его

Сохраните этот файл по адресу: 'ваш.сайт/sites/all/themes/fix/js/colorbox-fix.js'.
Обратите внимание, что я предлагаю выгрузить в папку 'fix' - таким образом мы с вами создадим общее место для всех подобных файлов, у нас будет больше порядка и нам будет удобнее вносить небольшие изменения или добавлять функции, общие для всего сайта, независимо от тем оформления.

И активируйте

Теперь у нас на сайте есть готовая функция, и чтобы она заработала - нужно ее активировать. Для этого:

  • Создайте блок
  • В его заголовке впишите '<none>', системный заголовок введите на ваше усмотрение
  • Выбрав формат ввода 'PHP фильтр' - скопируйте код, приведенный ниже
  • Укажите, чтобы он отображался в шапке сайта и сохраните
 
<?php
    // Активируем дополнительный JavaScript
    drupal_add_js('sites/all/themes/fix/js/colorbox-fix.js', 'file');
?>

Это все!
Теперь, когда добавляете материал, можете просто указывать ссылку на изображение, оно будет автоматически открываться в Colorbox.

 

*VISA/MasterCard