Эффекты изображений

Шаблоны MF содержат готовые css-классы для изображений. Некоторые css-классы рассчитаны на определенный html-код, поэтому могут использоваться, только если соблюдена html-разметка.

Классы можно указывать как для непосредственных изображений в тексте записи, так и в служебных файлах/юнитах.

Классы в тексте записи

Обычно изображения в записи размещают с помощью bb-кода img. CSS-класс указывается в скобках. Это типовое поведение для большинства bb-кодов MaxSite CMS.

[img(класс)]адрес изображения[/img] 

Или для кода image:

для миниатюры:
[image(класс)=mini.jpg]full.jpg[/image]

для одноночного изображения:
[image class="класс" title="подсказка"]адрес изображения[/image]

Если используется lightGallery и её шорткод gl, то класс указывается в виде параметра iclass:

[gl=mini.jpg iclass="класс"]full.jpg[/gl]

Классы hover

Данные классы срабатывают при наведение мыши (при наведении появится название css-класса).

[img(my-hover-img3)]image.jpg[/img]
[img(my-hover-img4)]image.jpg[/img]
[img(my-hover-img5)]image.jpg[/img]
[img(my-hover-img6)]image.jpg[/img]
[img(my-hover-img7)]image.jpg[/img]
[img(my-hover-img8)]image.jpg[/img]
[img(my-hover-img9)]image.jpg[/img]

Классы фильтров CSSgram

Для изображений можно использовать классы библиотеки CSSgram.

Для того, чтобы подключить классы CSSgram сразу для всего сайта, отметьте файл cssgram-lazy.css в CSS профилях шаблона. Если эффекты предпалагается использовать только для какой-то одиночной записи, то можно выбрать этот файл в Профиле оформления при редактировании записи.

CSSgram требует специальной html-разметки для обрамления изображения. Вы можете использовать такой bb-код (здесь используется тэг SPAN с классом b-inline):

[span(b-inline moon)][img]адрес[/img][/span]

<span class="b-inline toaster">[img]image.jpg[/img]</span>
<span class="b-inline valencia">[img]image.jpg[/img]</span>
<span class="b-inline earlybird">[img]image.jpg[/img]</span>
<span class="b-inline willow">[img]image.jpg[/img]</span>
<span class="b-inline moon">[img]image.jpg[/img]</span>

Для того, чтобы при наведении эффект убирался (насколько это возможно), можно добавить класс hover-no-filter.

[span(b-inline hover-no-filter moon)][img]адрес[/img][/span]

[span(b-inline hover-no-filter toaster)][img]image.jpg[/img][/span]
[span(b-inline hover-no-filter valencia)][img]image.jpg[/img][/span]
[span(b-inline hover-no-filter earlybird)][img]image.jpg[/img][/span]
[span(b-inline hover-no-filter willow)][img]image.jpg[/img][/span]
[span(b-inline hover-no-filter moon)][img]image.jpg[/img][/span]

Классы в юнитах

В файлах юнитов классы указываются в виде опций thumb.... Например:

...
thumb_class = класс для изображения
thumb_link_class = класс для ссылки
...