Для детального просмотра изображения представленных на сайте пригодится модуль VTEM Image Zoom. С помощью этого модуля картинка добавленная в модульной позиции может быть увеличена в квадратной области, как при наведении лупой на объект. Вместе с модулем в комплекте идет плагин, также позволяющий увеличивать изображения. Расширение работает практически во всех браузерах и использует библиотеку jQuery.
Основные возможности
- добавление одной или нескольких изображений в позиции модуля
- выбор позиции для окна с увеличенным изображением
- возможность показа изображений в виде галереи
- выбор размещения мини-эскизов в галереи
- включение\отключение библиотеки jQuery
Установка и настройка модуля VTEM Image Zoom
Существуют версии для установки модуля для Joomla 1.5 - 2.5, а также для Joomla 3.x. Устанавливается из менеджера расширений после чего требуется активация и настройка параметров:
- Module width - ширина модуля в пикселях
- Zoom Title - заголовок для увеличенного изображения
- Image URLs - указать одну или несколько ссылок на изображение
- Small image URLs - одна или несколько ссылок на уменьшенное изображение
- Zoom width/Height - ширина окна увеличения
- Position - выбор позиции окна увеличения (по разным сторонам или внутри - inside)
- adjustX \ Y - регулировать расположение окна увеличения по оси X \ Y
- Soft Focus - использовать или нет эффект размытия при наведении на мини-эскиз
- Tint color - выбор цвета, который будет покрывать участки мини-эскиза при наведении
- Tint Opacity - прозрачность цвета при наведении
- Show Title - показывать или нет заголовок
- Title Opacity - указать степень прозрачности заголовка
- Thumbnail scroller - можно использовать просмотр мини эскизы в виде карусели
- Thumbnail position - выбор расположения мини-эскизов галереи (снизу или сверху)
В дополнительных параметрах можно указывать суффикс класса модуля, включать\отключать библиотеку jQuery, использовать стили CSS, выбирать режим и время кэширования.
Использование плагина VTEM Image Zoom в материале.
Для активации изображения с увеличением следует использовать следующие теги:
Стандартный режим
{vtemzoom image=[images/big1.jpg] thumb=[images/small1.jpg]}
Режим с красным цветом на уменьшенном изображении
{vtemzoom image=[images/big1.jpg] thumb=[images/small1.jpg] tintcolor=[#FF0000]}
Режим с увеличением внутри
{vtemzoom image=[images/big1.jpg] thumb=[images/small1.jpg] position=[inside]}
Режим с размытием
{vtemzoom image=[images/big1.jpg] thumb=[images/small1.jpg] softFocus=[1]}
Режим с галереей
{vtemzoom image=[images/big1.jpg,images/big2.jpg,images/big3.jpg] thumb=[images/small1.jpg,images/small2.jpg,images/small3.jpg] scroll=[1]}
Спонсором данной статьи сегодня выступает компания Экан, которая занимается влагомерами - это специальные приборы для измерения показателя качества зерна.
