В продолжение темы поиска решений по вопросам расширения возможностей Drupal`а в работе с изображениями решил «озвучить» еще один вариант/пример подключения к движку стороннего скрипта. Речь снова пойдет о незабвенном Highslide - скрипте из семейства лайтбокс-подобных приблуд.

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

Приступим. Идем за Highslide.

Покончим же со словоблудием и перейдем к практическим действиям.

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

Если с редактором возиться лень, то можно скачать прикрепленные к публикации уже настроенные файлы Highslide. Настроены они, естественно, по моим предпочтениям, но думаю для большинства сайтов будут вполне достаточны. Русских сайтов, ибо в моем конфиге скрипта выбран именно русский, с соответствующим переводом всех служебных и пользовательских диалогов.

Highslide и его файлы.

И так, что мы имеем перед началом манипуляций с темой-шиблоном. Папочка highslide. Внутри нее нам будут нужны лишь подпапка graphics и четыре файла:

• highslide.config.js - файл с настройками скрипта;
• highslide.packed.js - «упакованный» и «пожатый» основной JavaScript-код;
• highslide.css - файл стилей Highslide;
• highslide-ie6.css - файл стилей с поправками на «своеобразие» браузера Internet Explorer шестой и ранее версий;

CSS-файлы сразу перемещаем туда, где у нас находиться основной файл стилей темы - style.css. (В моем случае все стили темы лежат в подпапке css, а дополнительные скрипты в подпапке js. Относительно такой структуры и пойдет речь далее.)

Папку highslide помещаем в подпапку js(смотрите выше) нашей темы.

Теперь открываем highslide.config.js, и вписываем в самой верхней его строчке путь к подпапке graphics относительно корневой папки самого Друпала:

...сохраняем, закрываем.

Вносим изменения в файлы темы.

Затем открываем файл template.php темы и дописываем в него следующий код, дающий указание Друпалу подгрузить скрипты Highslide в «общую кучу» массива $scripts:

Далее, в файл page.tpl.php темы после  print $styles добавляем команду для IE старых версий загружать дополнительный файл стилей:

И последним действием будет внесение дополнений в информационный файл редактируемой темы (название_темы.info) касательно нового файла стилей highslide.css:

Важно! В файле стилей highslide.css при его включении по вышеописанному примеру необходимо будет переопределить соответствующие пути к изображениям в правилах стилей.

Как вариант, css-файлы Highslide можно оставить в папке highslide скрипта. В этом случае их подгрузку можно инициировать не изменением название_темы.info, а добавлением в template.php соответствующих инструкций:

Соответственно и пути к highslide-ie6.css в page.tpl.php будут другими:

Все, готово!

После того, как вы пересохраните тему, все доступные возможности Highslide - к вашим услугам.

Напомню, что для задействования скрипта для открытия ссылок на изображения в теге a ссылки должна находиться инструкция вида:

class="highslide" onclick="return hs.expand(this)"

О возможных способах применения Highslide`а на Drupal-сайте, и в частности о его взаимодействии с модулем Node Images подробно расскажу в отдельных публикациях. Надеюсь, что и эта кому-то чем-то помогла.

В любом случае успехов всем вам, коллеги, в собственных ваших экспериментах с Drupal - CMS-сой вне всех времен. ЗакАпаем этот интернет нахрен!

ПС: Да, чуть было не забыл. Для редактора BUEditor можно взять готовый код кнопки автоматической вставки «правильной» ссылки.