Внедрение скрипта 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 относительно корневой папки самого Друпала:
...сохраняем, закрываем.
Вносим изменения в файлы темы.
Затем открываем файл template.php темы и дописываем в него следующий код, дающий указание Друпалу подгрузить скрипты Highslide в «общую кучу» массива $scripts:
drupal_add_js(path_to_theme() .'/js/highslide/highslide.config.js');
Далее, в файл page.tpl.php темы после print $styles
добавляем команду для IE старых версий загружать дополнительный файл стилей:
<link rel="stylesheet" type="text/css" href="<?php print path_to_theme(); ?>/css/highslide-ie6.css" />
<![endif]-->
И последним действием будет внесение дополнений в информационный файл редактируемой темы (название_темы.info) касательно нового файла стилей highslide.css:
Важно! В файле стилей highslide.css при его включении по вышеописанному примеру необходимо будет переопределить соответствующие пути к изображениям в правилах стилей.
Как вариант, css-файлы Highslide можно оставить в папке highslide скрипта. В этом случае их подгрузку можно инициировать не изменением название_темы.info, а добавлением в template.php соответствующих инструкций:
Соответственно и пути к highslide-ie6.css в page.tpl.php будут другими:
<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 можно взять готовый код кнопки автоматической вставки «правильной» ссылки.
Что то не хочет работать. Все делаю по инструкции в результате всё вроде прописывается как надо, скрипты подключаются, графика видна, но не работает. При нажатии на маленькую картинку на ней появляется "вращающийся кружок" и надпись "LOADING" и все... при нажатии на надпись она исчезает, а если нажать на картинку рядом с надписью, то открывается большая (с указанием ее прямого пути в строке браузера). Уже перепробовал на нескольких темах - аналогично. Где нибудь можно увидеть работающий вариант? Что может быть мной сделано не правильно? Заранее спасибо!
При подгрузке js-файлов в template.php поставьте первым в очереди highslide.packed.js, а highslide.config.js после него. В инструкции этот момент изменил.
drupal_add_js(path_to_theme() .'/js/highslide/highslide.config.js');
Работающий вариант, где все «собиралось» в соответствии с вышеизложенным, можно увидеть тут.
Стало лучше, но совсем на чуть-чуть, а именно: при наведении на маленькую картинку появился правильный курсор, все остальное осталось без изменений. :(
При загрузке Ваших "Готовых" файлов надпись "LOADING" заменилась на надпись "Загружается", т.е. файл highslide.config.js точно нормально грузится. Поскольку появляется курсор, то и путь до каталога графики тоже правильно прописан.
Если отключить всю эту настройку и включить Ваш модуль со старой версией highslide, то тот же текст нормально работает, но очень хочется подключить именно новую версию.
Пока попытался разобраться как в старой версии выводить не только отдельные фото, но и галереи. Подредактировал Ваш модуль чтобы он подключал файл highslide-with-gallery.js вместо highslide.js. В этом файле, естественно, указал правильный graphicsDir.
В результате одиночное изображение работает нормально, а галерея просто раскрывается одной большой картинкой в том же окне. Что нужно настроить чтобы галерея тоже заработала?
Хотел дать ссылку, на то, что хочу получить, но тут это не разрешается.
Зайдите в редактор на сайте автора и настройте его для работы в «галерейном» режиме. После этого скачайте новые настроенные на ваш вкус файлы и подключайте их.
Откройте по очереди файлы
и внимательно еще раз проверьте их на правильность прописанных путей и расстановки слешей, проблема ваша зарыта там. Что бы уж наверняка, пропишите в cnbkz[ highslide.css полные пути от корневой директории установки друпала, то бишь там:
url(/themes/тема/фотопапко/картинко.джэпэгэ)
Все перепробовал - не работает.
Тупо скопировал в head page.tpl.php head из файла примера и все заработало (Чем такой вариант плох? Догадываюсь, что JS не будут в таком случае кэшироваться... или нет?). Сравнил с тем что у меня было - вроде все один в один. Завтра буду более детально разбираться в чем разница.
Еще вот такой вопрос - реально ли сделать, чтобы при загрузке страницы изображение уже было максимизированным, а при нажатии на него исчезало без следа? Что то на сайте автора такого варианта не нашел, но может плохо искал...
По первому пункту: ищите, пересохраняйте тему, очищайте кэш...
По второму: для этих целей highslide вам нафиг не нужен. Достаточно jQuery, где есть функция .hide(). Например, что бы по клику на изображение(в теге img) оно плавно шкерилось, добавьте на страницу:
$(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, все остальные на месте. Качал с оф. сайта.
Его и не будет без предварительных настроек предпочтений на странице редактора.
Огромнейшее спасибо!
На здоровье, добрый человек.