Плагин aimbox (Alvadi Image Box) реализует:
- предпросмотр картинок (preview),
- открытие картинки на полный экран (fullscreen),
- псевдо вращение картинки на 360 ° (catwalk).

Preview
Для работы Preview по ховеру у элемента должен быть class="aimbox-link hover" и data-href="https://alpics.info/image.jpg" или href="https://alpics.info/image.jpg".
В случае если нужен переход при клике на ссылку, то путь к картинке записывается в data-href="" а адрес ссылки в href="". Это нужно например в списке товаров.
Preview закроется автоматически в случае события "mouseleave". Добавив класс fix - "aimbox-link hover fix", элемент будет оставиться на экране, и закрываться кликом в пустом месте, на крестик закрытия, наведением на другой элемент aimbox.

Fullscreen
Для работы Fullscreen по клику у элемента должен быть class="aimbox-link click" и data-href="https://alpics.info/image.jpg" или href="https://alpics.info/image.jpg".

Preview и Fullscreen могут быть одновременно или отдельно - class="aimbox-link hover click"

Catwalk
Для работы Catwalk у тэга <img /> должены быть доп параметры data-catwalk="http://alvadi.ee/images/carwarmup-v2/carwarmup-l-{col}.jpg" data-catwalk-option="columns: 36;".
Полный список опций уже есть в системе, он немного избыточен, но лучше не трогать
Имеет вид - "key: value; key: value; key: value;"



Элемент Catwalk может помещатсья на страницу при загрузке, отдельно от preview и fullscreen.



Примеры:

Текстовая ссылка





360°
360°