Данный компонент может быть реализован в любом месте текстового блока. После его установки на странице появляется лента с изображениями. При нажатии на превью мышкой открывается псевдоокно, генерируемое средствами Javascript. Его можно отдельно перемещать по экрану и закрывать.
Отметим, что фотографии, не видимые на ленте, загружаются один раз и только при навигации по фотослайдеру. Этот процесс ускоряет загрузку как самого компонента, так и сайта в целом.
Пример:
Использование компонента:
##PhotoSliderAdv({"ObjType":"...","ObjGid":"..."})##
Обязательные параметры:
ObjType – имя модуля, в котором находятся фотографии ("QA" – информаторий, "Info" – инфоблоки, "News" – новости и другие).
ObjGid – идентификатор статьи, инфоблока, новости и т.д.
Необязательные параметры (по умолчанию устанавливаются автоматически):
Count (по умолчанию = 3) – количество элементов (превью фотографий), которые будут показаны в компоненте единовременно. Остальные изображения появляются с использованием навигации в компоненте.
ItemWidth (по умолчанию = 150), ItemHeigh (по умолчанию = 120) – ширина и высота зоны, в которой показываются превью фотографии (в пикселях). Все изображения на ленте фотослайдера кадрируются по центру и сжимаются в пределах указанных параметров. Это помогает компоненту выглядеть эстетично, даже если редактор опубликует превью фотографий с разными размерами.
ItemMargin (по умолчанию = 3) – отступ превью фотографий от рамки компонента, в котором происходит анимация ленты.
Устанавливается компонент PhotoSliderAdv достаточно просто:
1. В первую очередь, стоит опубликовать фотографии в новой закрытой для общего доступа статье через «Публичный архив» или определить местоположение нужных вам, опубликованных ранее изображений. Отметим, что фотографии должны быть опубликованы с превью - именно превью отображаются в ленте фотослайдера. Картинка с натуральным размером открываются отдельно по щелчку мышки.
2. После опубликования все изображение автоматически попадает в соответствующую поддиректорию архива, в соответствии с данными которой в параметрах указываются:
ObjType
ObjGid
Данные параметры можно посмотреть в адресной строке статьи (новости, инфоблока) определенной вами, как носителя изображений.
##PhotoSliderAdv({"ObjType":"qa","ObjGid":"318"})##
3. Затем укажите остальные параметры, значения которых могут быть выставлены по умолчанию.
##PhotoSliderAdv({
"ObjType": "qa",
"ObjGid": "318",
"Count": 3,
"ItemWidth": 100,
"ItemHeight": 100
})##
