Внедрение скрипта Highslide в тему Drupal`а

В продолжение темы поиска решений по вопросам расширения возможностей 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 относительно корневой папки самого Друпала:

hs.graphicsDir = '/themes/НАЗВАНИЕ_ВАШЕЙ_ТЕМЫ/js/highslide/graphics/';

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

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

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

drupal_add_js(path_to_theme() .'/js/highslide/highslide.packed.js');
drupal_add_js(path_to_theme() .'/js/highslide/highslide.config.js');

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

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="<?php print path_to_theme(); ?>/css/highslide-ie6.css" />
<![endif]-->

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

stylesheets[all][] = css/highslide.css

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

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

drupal_add_css(path_to_theme() .'/js/highslide/highslide.css');

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

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="<?php path_to_theme(); ?>/js/highslide/highslide-ie6.css" />
<![endif]-->

Все, готово!

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

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

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

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

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


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

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

Комментарии

Что то не хочет работать. Все делаю по инструкции в результате всё вроде прописывается как надо, скрипты подключаются, графика видна, но не работает. При нажатии на маленькую картинку на ней появляется "вращающийся кружок" и надпись "LOADING" и все... при нажатии на надпись она исчезает, а если нажать на картинку рядом с надписью, то открывается большая (с указанием ее прямого пути в строке браузера). Уже перепробовал на нескольких темах - аналогично. Где нибудь можно увидеть работающий вариант? Что может быть мной сделано не правильно? Заранее спасибо!

При подгрузке js-файлов в template.php поставьте первым в очереди highslide.packed.js, а highslide.config.js после него. В инструкции этот момент изменил.

drupal_add_js(path_to_theme() .'/js/highslide/highslide.packed.js');
drupal_add_js(path_to_theme() .'/js/highslide/highslide.config.js');

Работающий вариант, где все «собиралось» в соответствии с вышеизложенным, можно увидеть тут.

Стало лучше, но совсем на чуть-чуть, а именно: при наведении на маленькую картинку появился правильный курсор, все остальное осталось без изменений. :(

При загрузке Ваших "Готовых" файлов надпись "LOADING" заменилась на надпись "Загружается", т.е. файл highslide.config.js точно нормально грузится. Поскольку появляется курсор, то и путь до каталога графики тоже правильно прописан.
Если отключить всю эту настройку и включить Ваш модуль со старой версией highslide, то тот же текст нормально работает, но очень хочется подключить именно новую версию.

Пока попытался разобраться как в старой версии выводить не только отдельные фото, но и галереи. Подредактировал Ваш модуль чтобы он подключал файл highslide-with-gallery.js вместо highslide.js. В этом файле, естественно, указал правильный graphicsDir.
В результате одиночное изображение работает нормально, а галерея просто раскрывается одной большой картинкой в том же окне. Что нужно настроить чтобы галерея тоже заработала?
Хотел дать ссылку, на то, что хочу получить, но тут это не разрешается.

Зайдите в редактор на сайте автора и настройте его для работы в «галерейном» режиме. После этого скачайте новые настроенные на ваш вкус файлы и подключайте их.

Откройте по очереди файлы

  • highslide.config.js
  • highslide.css
  • template.php

и внимательно еще раз проверьте их на правильность прописанных путей и расстановки слешей, проблема ваша зарыта там. Что бы уж наверняка, пропишите в cnbkz[ highslide.css полные пути от корневой директории установки друпала, то бишь там:

url(/themes/тема/фотопапко/картинко.джэпэгэ)

Все перепробовал - не работает.
Тупо скопировал в head page.tpl.php head из файла примера и все заработало (Чем такой вариант плох? Догадываюсь, что JS не будут в таком случае кэшироваться... или нет?). Сравнил с тем что у меня было - вроде все один в один. Завтра буду более детально разбираться в чем разница.
Еще вот такой вопрос - реально ли сделать, чтобы при загрузке страницы изображение уже было максимизированным, а при нажатии на него исчезало без следа? Что то на сайте автора такого варианта не нашел, но может плохо искал...

По первому пункту: ищите, пересохраняйте тему, очищайте кэш...

По второму: для этих целей highslide вам нафиг не нужен. Достаточно jQuery, где есть функция .hide(). Например, что бы по клику на изображение(в теге img) оно плавно шкерилось, добавьте на страницу:

<script type="text/javascript">
$(document).ready(function(){
     $('img').click(function(){
         $(this).hide('slow');
     });
});
</script>

И будет вам счастье.

Всё заработало! Огромное СПАСИБО!
По второму пункту - понятно, но интересует именно средствами highslide. И даже не столько картинка, сколько их вывод ХТМЛ.

Доброго дня, друзья!

Как интегрировать bumpbox в друпал.

Спасибо.

Тут как бы тема не о нем, дружище.

Извините.
Весь инет перерыл. У вас интесные модули.
bumpbox - хорош. Как его внедрить.

Так же, как и любой другой JS-скрипт. Нюансы ищите в мануалах по bumpbox.

Папочка highslide. Внутри нее нам будут нужны лишь подпапка graphics и четыре файла:
highslide.config.js
highslide.packed.js
highslide.css
highslide-ie6.css

Нет файла highslide.config.js, все остальные на месте. Качал с оф. сайта.

Его и не будет без предварительных настроек предпочтений на странице редактора.

Огромнейшее спасибо!

На здоровье, добрый человек.