Плагин "Линза" для редактора "Atto"

Плагин "Линза" разработан как дополнительный инструмент для редактора "Atto". "Линза" позволяет увеличивать часть ранее уменьшенного с помощью масштабирования изображения до оригинального размера при наведении указателя мыши. Например, чтобы рассмотреть детали.

Для включения опции, в редакторе нужно выделить предварительно загруженное изображение и отметить его кнопкой "Линза" в панели инструментов. На отображаемой странице часть отмеченного изображения будет увеличиваться до оригинального размера при наведении указателя мыши. Опционально можно включить открытие полноразмерного (с оригинальным разрешением) изображения в другой вкладке браузера по клику мыши.

Рис.1 Увеличение части отмеченного изображения до оригинального размера при наведении курсора мыши

Как это работает. Использование плагина "Линза"

Плагин предназначен для обработки загруженных в редактор изображений, размер которых уменьшен (масштабируется) с помощью тегов, опций редактора или автоматически. Обычно это изображения высокого качества с большим оригинальным разрешением и значениями длины и ширины (в пикселах), которые за счет значений html атрибутов "width" и "height" отображаются для удобства пользователя на странице в браузере в уменьшенном виде.

Рис. 2. Загрузка изображения через редактор Atto. Свойства изображения

Другими словами, имеется в виду, что размер передаваемого в браузер изображения меньше оригинального.
Например, оригинальный размер изображения 1800х988px, а размер, установленный в редакторе - 450х247px (масштаб 1:4).

Исходные изображения загружаются через редактор Atto. Для применения инструмента "Линза" необходимо выделить целевое изображение левой кнопкой мыши и переключить "тумблер-индикатор" на кнопке инструмента "Линза" в панели инструментов редактора в положение "Зеленый". При этом, после сохранения, изображение получит разметку, определяющую необходимость увеличения при наведении указателя мыши:

Рис. 3. Применение инструмента "Линза". Переключение "тумблера-индикатора" в положение "Зеленый"

Если при выделении изображения в редакторе на кнопке "Линза" отображается красный индикатор, данный инструмент не применяется к изображению (значение по умолчанию):

          
Рис. 4. Применение инструмента "Линза". Отображение красного индикатора                                                              

С помощью кликов по "Линзе" при выделенном изображении можно менять разметку, определяющую необходимость увеличения изображения.

По умолчанию плагин присутствует в системе начиная с версии 3.5.14b, но, для его использования, необходимо добавить кнопку "Линза" в панель инструментов редакора "Atto".

Плагин "Линза". Включение инструмента Требуются права полного администратора

Настройка плагина заключается в добавлении кнопки "Линза" в панель инструментов редактора "Atto". Это может сделать технический администратор системы.

Для настройки панели инструментов редактора необходимо перейти:
Блок "Настройки" -► "Администрирование" -► "Плагины" -► "Текстовые редакторы" -► "Html-редактор Atto" -► "Настройки панели инстументов редактора Atto".

На странице настроек нужно добавить название плагина "otmagnifier" (Линза) в форму "Конфигурация панели инструментов" в место, где предполагается размещение кнопки инструмента "Линза".

Например, можно добавить его между инструментами "image" (Вставить изображение) и "media" ("Вставить файл аудио/видео"):

После сохранения результатов кнопка "Линза" должна добавиться в панель инструментов редактора в указанное место.

Чтобы включить открытие полноразмерного (с оригинальным разрешением) изображения в другой вкладке браузера по клику мыши, необходимо перейти с этой же страницы настроек из списка плагинов редактора к настройкам плагина "otmagnifier" - "Линза":

Рис. 6. Настройки линзы. Дополнительная разметка

На открывшейся странице нужно включить опцию с помощью "галочки".

После активации опции при редактирования контента и нажатии на кнопку "Линза" для выбранных изображений будет произведена дополнительная разметка (добавление класса "magnifier-handle-click" к тегу изображения). Данная разметка, во время просматривания контента пользователями, обеспечит открытие исходного изображения по клику, в дополнение к увеличению изображения при наведении. Наличием этого класса можно управлять вручную. Данная опция только позволяет по умолчанию добавлять класс автоматически.