Как сделать увеличение картинки по клику в текстовом редакторе

5 февраля 2018

Советы

Итак, у нас есть страница, на ней что то размещено и есть картинка. Необходимо чтобы картинка была небольшого размера но по клику на нее мышкой, открывалась крупная картинка, и не просто открывалась, а красиво всплывала. Сделать это не сложно, в системе управления сайтом TSAdmin это реализовано с помощью класса "colorbox".

Обо всем подробнее и по порядку.

Предположим что вас уже есть страница и в ней уже размещена картинка. Примерно это может выглядеть так:

Картинка должна быть кликабельна и увеличиваться.

Переходим в систему управления сайтом. Находим страницу где размещена данная информация. В текстовом редакторе находим где расположена картинка.

А теперь нужно понять, какая картинка должна открываться по клику, если эта же (т.е. по умолчанию была загружена картинка в большом разрешении, и в текстовом редакторе уменьшен ее размер при установке в текст), то необходимо скопировать ее адрес: 

выделяем картинку в тексте, кликаем в редакторе на иконку "Вставить картинку".

В открывшемся окне настроек полностью выделяем и копируем весь путь размещения картинки:

Жмем "Ок".

Если по клику должна открываться какая то другая картинка (можно сделать любую), то нужно найти и скопировать путь размещения той картинки.

Сейчас нам нужно сделать ссылку, снова выделяем в текстовом редакторе картинку и кликаем на иконку "Вставить ссылку".

В открывшемся окна в поле ссылки, вставляем скопированный путь размещения картинки, которая будет открываться по клику.

Отлично! Тут же, в этом же окне настроек, переходим во вкладку "Дополнительно".

Здесь, нам нужно поле "Класс CSS".

В нем указываем "colorbox", вот так:

Когда все прописано, жмем "Ок".

Жмем "Сохранить" чтобы сохранить все внесенные изменения на странице.

Сейчас, на сайте, при клике на эту картинку, она будет крупно всплывать поверх всего сайта.

Пример того, как всплывает картинка можно посмотреть тут: