Рейтинг@Mail.ru

Вы здесь

Главная

Если в своей статье на сайте вы хотите, чтобы иллюстрации (картинки) увеличивались при нажатии на них, можно воспользоваться модулем для Drupal - LightBox2.

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

Установка:

1. Скачиваем модуль Lightbox2

2. Скачиваем модуль Iimage_resize_filter (для возможности автоматического изменение размера изображения)

Распаковываем модули на сервер в /sites/all/modules/

Заходим в модули /admin/modules и устанавливаем эти два модуля.

Затем заходим в настройки Ligthbox2.

Далее во вкладку "Автоматическая обработка изображений", где из списка выбераем "Lightbox". Нажимаем "Сохранить".

Опять заходим в модули /admin/modules и входим в настройки Image_resize_filter, где необходмо изменить настройки для каждого формата текста, который вы используете. Например нажимаем "настроить" в формате "Full HTML".

В списке фильтров включаем галочку "Lightbox фильтр" для увеличения картинки при клике. Аналогично можно будет настроить фильтр на слайдшоу или фильтр видео.

После включения галочки, выделенный фильтр появится в списке активных фильтров, где необходимо переместить его выше всех остальных.

 

Далее нажимаем на настройку этого фильтра и включаем галочки: Locally, On remote servers, Добавлять ссылку на оригинальное изображение.

В поле атрибут rel вписываем слово: "lightbox" или "lightbox[mygroup]", если вы хотите, чтобы все изображения страницы группировались и была возможность просмотреть их последовательно в Лайтбоксе.

 

Настройка окончена. Теперь можно приступать к написанию статьи.

Вставив в статью картинку, если вы используете IMCE, то в "Настройках картинки/Дополнительно/Отношение" вписываем lightbox.

Если вы вставляете код картинки сами, то код должен быть примерно таким: <a href="сслыка_на_полноразмерную картинку.jpg" rel="lightbox"><img src="ссылка_на_уменьшенное_изображение.jpg" /></a>

После сохранении статьи, нажав на картинку вы увидите, что она увеличивается. Нажатие на нее приведет к ее закрытию.

Также имеется возможность сгруппировать картинки в статье, что позволит увеличив одну картинку, переходить к следующей или предыдущей не закрывая её. Для этого в пункте "Отношение" вместо lightbox необходимо написать lightbox[mygroup1], где mygroup1 - это название вашей группы (может быть любым).

Прямая ссылка будет выглядеть так: <a href="сслыка_на_полноразмерную картинку.jpg" rel="lightbox[mygroup1]"><img src="ссылка_на_уменьшенное_изображение.jpg" /></a>

Теперь, при нажатии на картинку она увеличивается и справа нее должна появиться большая стрелка вперед, а слева соответственно назад.

Для перехода между картинками можно воспользоваться горячими клавишами: z-увеличить, Стрелки вправо, влево - листать картинки, Esc - выход.

Клавиши можно перенастроить в настройках Lightbox2.

Добавить комментарий