Настройка вывода изображений во всплывающих окнах в Drupal 7 с помощью модуля Colorbox.

image

18.06.12
Comments 0

Для cms Drupal существуют несколько модулей, которые позволяют показывать изображения в всплывающих окнах, но я расскажу вам лишь об одном, который мне нравится больше остальных, называется он Colorbox. C помощью этого модуля можно выводить в модальных окнах не только картинки, но и целые страницы. В дальнейших уроках я покажу как можно вывести форму обратной связи созданную на Webforms  в модальном окне с помощью модуля Colorbox.

Ну что, приступим к установке модуля Colorbox. Скачайте его с сайта Drupal.org, и киньте в папку sites/all/modules.  Кроме самого модуля нам еще понадобится сам Jquery плагин Colorbox, который нужно скачать с этого сайта. После того как скачаете, создайте в папке siets/all еще одну папочку с названием libraries (sites/all/libraries) и закачайте туда папку с плагином Colorbox. Теперь можно пройти к управлению модулями и включить его.

Настройка стиля изображения

Итак, модуль включен, теперь можно приступать  к его настройкам. Первым делом нужно создать свой собственный стиль изображения для уменьшенного изображения. Для этого проходим в «Конфигурация –> Стили изображения», по умолчанию уже созданы три стиля, но мы создадим свой. Нажмите на кнопку «Добавить стиль». 

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

Теперь добавим один из эффектов. Из раскрывающегося списка выберите эффект «Масштабирование» и нажмите на кнопку «Добавить».

Colorbox

Масштабируем изображения, которые будут выводиться этим стилем по ширине 200px.

Colorbox

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

Управление отображением.

Пройдите в «Структура -> Типы материалов», давайте изменим отображение типа материалов «Статья». Пройдите в «Управление отображением» и в настройках поля «Image» в раскрывающемся списке выберите стиль Colorbox. Дальше нужно нажать на иконку (колесико) для того чтобы выбрать стиль  показа изображения в уменьшенном виде.

Colorbox

В дальнейших параметрах указываем в поле «Node image style (стиль изображения ноды)» созданный нами стиль «Mystyle» и на этом все, нажимаем на кнопочку «Обновить», те же  самые настройки сделайте и с анонсом статьи.

Colorbox

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

Об основных моментах использования этого модуля я рассказал, дальше вы можете сами поковыряться с его настройками.

Tags: 

Комментировать