Фрилансеры предложат решение вашей задачи уже через несколько минут!

Публикация заказа на фриланс бирже не займет много времени.

1 год назад
Денис Новолодский
36 лет, Россия
1 год в сервисе
Был онлайн 8 месяцев назад
1 год назад

Имеется взятый из песочницы яндекса

ymaps.ready(init);
function init () {
    var myMap = new ymaps.Map('map', {
            center: [52.826716, 107.832781],
            zoom: 8,
            controls: ['zoomControl', 'typeSelector',  'fullscreenControl', 'geolocationControl']
        }, {
            searchControlProvider: 'yandex#search'
        }),
        objectManager = new ymaps.ObjectManager({
            // Чтобы метки начали кластеризоваться, выставляем опцию.
            clusterize: true,
            // ObjectManager принимает те же опции, что и кластеризатор.
            gridSize: 32,
            clusterDisableClickZoom: true,
            clusterBalloonMaxWidth: 290,
            clusterBalloonMaxHeight: 300,
            clusterBalloonContentLayoutWidth: 255,
            clusterBalloonLeftColumnWidth: 70,

        });
    // Чтобы задать опции одиночным объектам и кластерам,
    // обратимся к дочерним коллекциям ObjectManager.
    objectManager.objects.options.set('preset', 'islands#greenDotIcon');
    objectManager.clusters.options.set('preset', 'islands#greenClusterIcons');
    myMap.geoObjects.add(objectManager);
    $.ajax({
        url: "js/data_map.json"
    }).done(function(data) {
        objectManager.add(data);
    });
}

Содержание json 
{
    "type": "FeatureCollection",
    "features": [
       {"type": "Feature", "id": 64, "geometry": {"type": "Point", "coordinates": [52.990937, 108.283042]}, "properties": {"balloonContentBody": "<a href='http://baikalvr.com/tours/turka.html'&gt;&lt;img src='http://baikalvr.com/images/thumbs/7.jpg';  width='220' style='padding: 0px;'></a>", "clusterCaption": "<img src='http://baikalvr.com/images/thumbs/7.jpg'; width='50'>"}},
{"type": "Feature", "id": 65, "geometry": {"type": "Point", "coordinates": [52.990931, 108.283031]}, "properties": {"balloonContentBody": "<a href='http://baikalvr.com/tours/turka.html'&gt;&lt;img src='http://baikalvr.com/images/thumbs/7.jpg';  width='220' style='padding: 0px;'></a>", "clusterCaption": "<img src='http://baikalvr.com/images/thumbs/7.jpg'; width='50'>"}},
{"type": "Feature", "id": 66, "geometry": {"type": "Point", "coordinates": [52.993628, 108.281625]}, "properties": {"balloonContentBody": "<a href='http://baikalvr.com/tours/turka.html'&gt;&lt;img src='http://baikalvr.com/images/thumbs/7.jpg';  width='220' style='padding: 0px;'></a>", "clusterCaption": "<img src='http://baikalvr.com/images/thumbs/7.jpg'; width='50'>"}},
{"type": "Feature", "id": 78, "geometry": {"type": "Point", "coordinates": [52.792222, 107.958055]}, "properties": {"balloonContentBody": "<a href='http://baikalvr.com/tours/turka.html'&gt;&lt;img src='http://baikalvr.com/images/thumbs/7.jpg';  width='220' style='padding: 0px;'></a>", "clusterCaption": "<img src='http://baikalvr.com/images/thumbs/7.jpg'; width='50'>"}},
{"type": "Feature", "id": 86, "geometry": {"type": "Point", "coordinates": [52.873333, 108.145000]}, "properties": {"balloonContentBody": "<a href='http://baikalvr.com/tours/turka.html'&gt;&lt;img src='http://baikalvr.com/images/thumbs/7.jpg';  width='220' style='padding: 0px;'></a>", "clusterCaption": "<img src='http://baikalvr.com/images/thumbs/7.jpg'; width='50'>"}},
{"type": "Feature", "id": 87, "geometry": {"type": "Point", "coordinates": [52.873333, 108.144444]}, "properties": {"balloonContentBody": "<a href='http://baikalvr.com/tours/turka.html'&gt;&lt;img src='http://baikalvr.com/images/thumbs/7.jpg';  width='220' style='padding: 0px;'></a>", "clusterCaption": "<img src='http://baikalvr.com/images/thumbs/7.jpg'; width='50'>"}},
{"type": "Feature", "id": 88, "geometry": {"type": "Point", "coordinates": [52.884167, 108.112778]}, "properties": {"balloonContentBody": "<a href='http://baikalvr.com/tours/turka.html'&gt;&lt;img src='http://baikalvr.com/images/thumbs/7.jpg';  width='220' style='padding: 0px;'></a>", "clusterCaption": "<img src='http://baikalvr.com/images/thumbs/7.jpg'; width='50'>"}},
 {"type": "Feature", "id": 125, "geometry": {"type": "Point", "coordinates": [51.639287, 105.543242]}, "properties": {"balloonContentBody": "<a href='http://baikalvr.com/tours/turka.html'&gt;&lt;img src='http://baikalvr.com/images/thumbs/7.jpg';  width='220' style='padding: 0px;'></a>", "clusterCaption": "<img src='http://baikalvr.com/images/thumbs/7.jpg'; width='50'>"}}
    ]
}

Необходимо:
1) Настроить отображение картинки в балуне, прилагаются файлы как отображается сейчас и как надо с сохранением размеров.

2) При нажатии на картинку в правой части балуна должно выводиться модальное окно на всю ширину и высоту страницы с содержимым по ссылке из файла json (панорама 360), в правом верхнем углу должен быть контрастный крестик для закрытия модального окна, после закрытия всплывающего окна балун должен оставаться без изменений.

Скрипт взял отсюда: object_manager

Выбранный исполнитель
Виталий П.
34 года, Беларусь
2 года в сервисе
Был онлайн 2 месяца назад
1 год назад

$20

2 дня

Безопасный платеж

Отзыв заказчика
Всё отлично, рекомендую
Отзыв фрилансера
Всё прошло хорошо.
Виталий П.
34 года, Беларусь
2 года в сервисе
Был онлайн 2 месяца назад
1 год назад

Безопасный платеж

Иванов С.
Иванов С. 
25 лет, Украина
6 лет в сервисе
Был онлайн 1 месяц назад
1 год назад

Безопасный платеж

Другие заказы в категории «Веб-программирование»

Здесь заказчик и фрилансеры могут обсуждать заказ до начала его выполнения.
Фрилансеры могут участвовать в обсуждении только после подачи заявки.
Здесь заказчик будет контролировать выполнение заказа и общаться с исполнителем.
Доступ к этому разделу имеют только заказчик и выбранный исполнитель.
Все материалы этого раздела закрыты от поисковых систем.