Увеличение фото при клике в описании и статьях

Всем привет! Сегодня хочу описать Вам простой метод при помощи которого вы сможете загружать свои фото в любую написанную вами статью или же в описании товара в уменьшенном размере и увеличивать их при клике, сейчас по умолчанию в opencart такой функции нет и фото отображается именно таким как вы его и загрузили ,ну а если вам нужно загрузить множество фото,то согласитесь это немного не удобно и не красиво будет смотреться.... И так не будем расписывать для чего оно нужно а сразу же приступим к самой настройке.
Открываем файл catalog/view/theme/ТЕМА/template/product/product.tpl находим и удаляем в нем следующий код:

Далее в файле catalog/view/theme/ТЕМА/template/common/footer.tpl перед самим body и html добавляем:

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

1. Нажимаем в нашем редакторе на выбор и вставку нашего фото ,выбор на сервере и указываем сразу нужный размер нашего уменьшенного фото, далее не закрывая окно нажимаем на вкладку ссылка и указываем ссылку на фото которое должно открываться большим, размер фото не изменяем и нажимаем ок.

2. Нажимаем один раз левой кнопкой мыши на фото в тексте,далее в редакторе выбираем пункт "Вставить/Редактировать ссылку" в отрившемся окне вкладка "Дополнительно" и вписываем в поле "Классы CSS" "colorbox" Все сохраняем.

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

Так же я записал небольшой видео урок по правильному добавлению фотографий: