Увеличивающиеся картинки в тексте

Опубликовано Пнд, 24/01/2011 - 11:38 пользователем wshurik

При оформлении статьей очень частно возникает необходимость вставки картинок внутри текста,
например с выравниванием по левой или по правой стороне, часто с подписями к этим картинкам,
как это реализовать в 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>

Модули

Модули, которые понадобятся -
http://drupal.org/project/wysiwyg
http://drupal.org/project/imce

http://drupal.org/project/lightbox2

http://drupal.org/project/image_resize_filter

P.S. Спасибо Андрею, за комментарии

Итак, порядок действий

(Screenshots by givchik)

  • установка 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]

  • и все, получаем готовый результат.)

Автора автора

drupal
друпал
LightBox2
IMCE