PhotoSliderAdv. «Фотослайдер»

Данный компонент может быть реализован в любом месте текстового блока. После его установки на странице появляется лента с изображениями. При нажатии на превью мышкой открывается псевдоокно, генерируемое средствами Javascript. Его можно отдельно перемещать по экрану и закрывать.

Отметим, что фотографии, не видимые на ленте, загружаются один раз и только при навигации по фотослайдеру. Этот процесс ускоряет загрузку как самого компонента, так и сайта в целом.

Пример:

Использование компонента:

##PhotoSliderAdv({"ObjType":"...","ObjGid":"..."})##

Обязательные параметры:

ObjType – имя модуля, в котором находятся фотографии ("QA" – информаторий, "Info" – инфоблоки, "News" – новости и другие).

ObjGid – идентификатор статьи, инфоблока, новости и т.д.

Необязательные параметры (имеют значение  «по умолчанию» ):

Count (по умолчанию = 3) – количество элементов (превью фотографий), которые будут показаны в компоненте единовременно. Остальные изображения появляются с использованием навигации в компоненте.

 

ItemWidth (по умолчанию = 150), ItemHeigh (по умолчанию = 120) – ширина и высота зоны, в которой показываются превью фотографии (в пикселях). Все изображения на ленте фотослайдера кадрируются по центру и сжимаются в пределах указанных параметров. Это помогает компоненту выглядеть эстетично, даже если редактор опубликует превью фотографий с разными размерами.

 

ItemMargin (по умолчанию = 3) – отступ превью фотографий от рамки компонента, в котором происходит анимация ленты.

Устанавливается компонент PhotoSliderAdv достаточно просто: 

1. В первую очередь, стоит опубликовать фотографии с помощью функции  «Upload Image»  или определить местоположение нужных вам, опубликованных ранее изображений. Отметим, что фотографии должны быть опубликованы с превью - именно превью отображаются в ленте фотослайдера. Картинка с натуральным размером открываются отдельно по щелчку мышки.

2. После опубликования все изображение автоматически попадает в соответствующую поддиректорию архива, в соответствии с данными которой в параметрах указываются:

ObjType

ObjGid

Данные параметры можно посмотреть в адресной строке статьи (новости, инфоблока) определенной вами, как источник изображений.

##PhotoSliderAdv({"ObjType":"qa","ObjGid":"386"})##

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

##PhotoSliderAdv({

"ObjType": "qa",

"ObjGid": "386",

"Count": 3,

"ItemWidth": "100px",

"ItemHeight": "100px"

})##