При оформлении статьей очень частно возникает необходимость вставки картинок внутри текста, например с выравниванием по левой или по правой стороне, часто с подписями к этим картинкам, как это реализовать в Drupal с WYSIWYG редактором TinyMCE я писала в прошлый раз - TinyMCE template плагин в Drupal
А теперь к этим картинкам добавим эффект Lightbox - увеличение картинки при клике на ней.
В самом модуле Lightbox уже есть фильтр, который автоматически добавит javascript для картинок с определенным классом (если этот фильтр отдельно включить).
Но вручную писать и ссылку на большую картинку, и делать thumbnail не удобно.
К счастью, есть модуль image_resize_filter (кстати, разработанный известной компанией Lullabot).
Этот модуль, как ясно из названия, сам за вас изменит размер картинки.
Работает он как фильтр, вы с помощью IMCE или даже просто в Bueditore
вставляете в текст большую картику (не thumbnail), но указываете в атрибутах width и height
размеры thumbnailа, а фильтр сделает все остальное - уменьшит картинку и добавит нужную ссылку для Lightbox.
Lightbox модуль
Для начала посмотрим как вставлять картинку с эффектом Lightbox,
установив только модуль Lightbox2.
вариант #1
Для этого нужно img поместить внутри ссылки на картинку оригинального размера
и добавить аттрибут rel="lightbox":
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
<a href="images/image-1.jpg" rel="lightbox[][my caption]">image #1</a>
Чтобы сгруппировать картинки, т.е. чтобы можно было пролистывать их внутри lightbox стрелочками влево и вправо:
<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip][caption 2]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip][caption 3]">image #3</a>
(подробнее, в том числе как группировать картинки см. http://drupal.org/node/356124)
Чтобы это работало lighbox скрипт должен быть включен на всех страницах -
см. в настройках модуля (/admin/settings/lightbox2) в блоке Page specific lightbox2 settings.
вариант #2
Другой вариант заключается в том, что можно не добавлять атрибут rel и не мучаться с прописыванием правильных групп,
а добавить аттрибут class в тег img:
<a href="images/image-1.jpg" rel="lightbox" title="my caption"><img src="images/image-1-small.jpg" class="lb"/></a>Чтобы это работало в настройках модуля (/admin/settings/lightbox2/automatic) нужно прописать этот класс:
Lightbox + Image resize filter
В обоих случаях, описанных выше, нужно
иметь две картинки - большую и маленькую,
вручную добавлять ссылку к картинке,
указывать атрибут (либо rel, либо class)
При использовании модуля Image resize filter
достаточно вставить картинку и указать размеры превьюшки в атрибутах width и height:
<img src="images/image-1.jpg" width="320" height="240">
здесь /files/image-1.jpg - это большая картинка.
И если Image resize фильтр включен в настройках формата ввода,
а также в настройках самого фильтра указано, что нужно добавить тег rel=lightbox
то при просмотре страницы html будет выглядет вот так:
<a rel="lightbox" href="/files/image-1.jpg" class="lightbox-processed"><img height="240" width="320" src="/files/resize/image-1-320x240.JPG"></a>
иметь две картинки - большую и маленькую,
вручную добавлять ссылку к картинке,
указывать атрибут (либо rel, либо class)
При использовании модуля Image resize filter
достаточно вставить картинку и указать размеры превьюшки в атрибутах width и height:
<img src="images/image-1.jpg" width="320" height="240">
здесь /files/image-1.jpg - это большая картинка.
И если Image resize фильтр включен в настройках формата ввода,
а также в настройках самого фильтра указано, что нужно добавить тег rel=lightbox
то при просмотре страницы html будет выглядет вот так:
<a rel="lightbox" href="/files/image-1.jpg" class="lightbox-processed"><img height="240" width="320" src="/files/resize/image-1-320x240.JPG"></a>
Модули
Модули, которые понадобятся -
http://drupal.org/project/wysiwyg
http://drupal.org/project/imce
http://drupal.org/project/lightbox2
http://drupal.org/project/wysiwyg
http://drupal.org/project/imce
http://drupal.org/project/lightbox2
Итак, порядок действий
установка IMCE
установка визуального редактора поддерживающего интеграцию с IMCE
настройка оной
установка Lightbox
установка Image resize filter и настройка - в форматах ввода:
Управление ->
Форматы ввода ->
настроить ->
Правка ->
пункт "Фильтры" ->
чек бокс "Image resize filter",
сохраняемся
в формате "Filtered HTML" обязательно добавить тег img:
Управление ->
Форматы ввода ->
настроить ->
Настройка ->
пункт "HTML filter",
сохраняемся
"Image resize filter" должен обрабатываться раньше "HTML filter":
Управление ->
Форматы ввода ->
настроить ->
Порядок,
сохраняемся,
а также в настройках самого фильтра указать, что нужно добавить тег rel=lightbox:
Управление ->
Форматы ввода ->
настроить ->
Настройка ->
пункт "Image resize settings" ->
чек бокс "Link to the original:" ->
give it the class: lb, and/or a rel attribute: lightbox,
сохраняемся.
установка IMCE
установка визуального редактора поддерживающего интеграцию с IMCE
настройка оной
установка Lightbox
установка Image resize filter и настройка - в форматах ввода:
Управление ->
Форматы ввода ->
настроить ->
Правка ->
пункт "Фильтры" ->
чек бокс "Image resize filter",
сохраняемся
в формате "Filtered HTML" обязательно добавить тег img:
Управление ->
Форматы ввода ->
настроить ->
Настройка ->
пункт "HTML filter",
сохраняемся
"Image resize filter" должен обрабатываться раньше "HTML filter":
Управление ->
Форматы ввода ->
настроить ->
Порядок,
сохраняемся,
а также в настройках самого фильтра указать, что нужно добавить тег rel=lightbox:
Управление ->
Форматы ввода ->
настроить ->
Настройка ->
пункт "Image resize settings" ->
чек бокс "Link to the original:" ->
give it the class: lb, and/or a rel attribute: lightbox,
сохраняемся.
Чтобы картинки листались внутри lighbox, укажите атрибут не lightbox, а lightbox[roadtrip]
и все, получаем готовый результат.)
и все, получаем готовый результат.)
Комментариев нет:
Отправить комментарий