Клуб API Карт

Слайдер в балуне

k1n3z
14 сентября 2017, 18:55
Добрый день. Подскажите пожалуйста как реализовать слайдер в балуне кластера. Одно изображение вывести могу: $[properties.imgSrc] - но как сделать когда их много в json?
6 комментариев
Создайте свой макет балуна, в нем вы сможете реализовать любую логику
Свой макет создан у меня:


var MyBalloonContentLayout = ymaps.templateLayoutFactory.createClass(
'<div class="object"><div class="img-box"><div class="img-slider"><div class="slide"><a href="$[properties.descriptionHref]"><img src="uploads/object-thumb-slider1.jpg" /></a></div></div><header class="header"><span class="number-of-rooms">$[properties.numberOfRooms]</span><div class="price attr"><span class="ruble">$[properties.price]<span class="tooltip" title="$[properties.priceTooltip]">?</span></span><span class="others-currency">$[properties.otherCurrency]</span></div></header></div><div class="content"><p class="description"><a href="$[properties.descriptionHref]">$[properties.description]</a></p><div class="attributes"><div class="col"><p class="icon-location attr">$[properties.location]</p></div><div class="col"><span class="square attr">$[properties.totalArea]</span></div></div></div></div>'
),

К данным json стучусь так $[properties.price] - к примеру и тут получаю цену. Но как вывести много изображений не пойму когда в properties есть еще вложенный массив imgSlider



"properties": {
"district": "Первомайский район",
"description": "Успейте купить 1-комнатную квартиру на Алтайской 166/1 до 12 марта и получите в подарок большую и красивую стиральную маши красивую стиральную маш",
"descriptionHref": "object-inner22.html",
"location": "г. Минск, проспект Независимости 21",
"price": "134 830 р",
"priceTooltip": "Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet",
"otherCurrency": "69 500 $",
"otherCurrencyTooltip": "Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet",
"additionalPrice": "2 222 р.",
"additionalPriceTooltip": "Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet",
"numberOfRooms": "1-комнатная квартира",
"squareMeterPrice": "1 111 $ /м²",
"totalArea": "85 <span>/</span> 59 <span>/</span> 7,1 м²",
"constructionYear": "2014",
"floor": "<span>Этаж</span> 1 <span>из</span> 3",
"materialWalls": "Кирпичные стены",
"favourite": "true",
"imgSlider": [
{
"imgSrc": "uploads/object-thumb-slider1.jpg"
},
{
"imgSrc": "uploads/object-thumb-slider2.jpg"
},
{
"imgSrc": "uploads/object-thumb-slider3.jpg"
}
],


Получается в шаблоне моем идет
<div class="img-slider"><div class="slide"><a href="$[properties.descriptionHref]"><img src="uploads/object-thumb-slider1.jpg" /></a></div></div>

Что вставить нужно вместо изображения чтоб вывести значения массива imgSlider в каждый из слайдов ?
Обновлено 18 сентября 2017, 13:28
k1n3z,
в шаблонах макетов есть спец синтаксис для обхода коллекций 
см. пример 3, 4
https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/templateLayoutFactory-docpage/
Спасибо, вроде разобрался.
Один вопрос еще, а когда инициализировать плагин сам? - пробовал в коде карты после построения своего лэйаута, еще пробовал так:

if($('#objects-map').length){
ymaps.ready(initObjectMap, initSlider);
}

и никак не получается.
k1n3z,
В методе build макета
Спасибо большое.