Улан-Удэ

Россия

Беларусь

Имеется взятый из песочницы яндекса
[code]&#65279;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);
    });
}[/code]
Содержание json 
[code]&#65279;{
    "type": "FeatureCollection",
    "features": [
       &#65279;{"type": "Feature", "id": 64, "geometry": {"type": "Point", "coordinates": [52.990937, 108.283042]}, "properties": {"balloonContentBody": "<a href='http://baikalvr.com/tours/turka.html'><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'><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'><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'><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'><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'><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'><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'>"}},
 &#65279; &#65279;{"type": "Feature", "id": 125, "geometry": {"type": "Point", "coordinates": [51.639287, 105.543242]}, "properties": {"balloonContentBody": "<a href='http://baikalvr.com/tours/turka.html'><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'>"}}
    ]
}[/code]
Необходимо:
1) Настроить отображение картинки в балуне, прилагаются файлы как отображается сейчас и как надо с сохранением размеров.

2) При нажатии на картинку в правой части балуна должно выводиться модальное окно на всю ширину и высоту страницы с содержимым по ссылке из файла json (панорама 360), в правом верхнем углу должен быть контрастный крестик для закрытия модального окна, после закрытия всплывающего окна балун должен оставаться без изменений.

Скрипт взял отсюда: [url=https://tech.yandex.ru/maps/jsbox/2.1/object_manager]object_manager[/url]

POPUP из балуна яндекс

AJAX

JavaScript

Положительные

Необходимо создать карту с изображениями (превью фотографий)вместо меток как на яндекс карте
При выборе метки она появляется в балуне в большем размере (размер балуна 300px по ширине, по высоте пропорционально фотографии)
При нажатии на изображение в балуне появляется галерея в которой открывается выбранный снимок, при перелистывании (поддержка свайпов)
начинается показ фотографий в случайном порядке, при этом на карте выделяется
метка которой соответствует фотография. 
 
При увеличении масштаба метки кластеризуются
При нажатии на иконку кластера появляется балун с превью фотографий из кластера
При нажатии на содержимое балуна с превью фотографий сверху открывается галерея в которой можно листать выбранные снимки. Когда снимки в
выбранном балуне заканчиваются, начинается показ фотографий в случайном
порядке, при этом на карте выделяется метка которой соответствует фотография.
При нажатии на изображение (или нажатии кнопки –полноэкранный режим в правом верхнем углу) оно открывается в полный экран,
должна присутствовать поддержка свайпов (в принципе photoswipe то что нужно)
 
Все изображения находятся в одной папке
Предположим: ../images
Необходимо написать скрипт, который
- создавал превью (во всех необходимых разрешениях)изображений в определенной папке предположим ../images/trumbs
 - добавлял в отдельный файл JSON (с которым уже будет работать api yandex)данные о геолокации в десятичных координатах, имени файла, ссылке на превью
- скрипт должен запускаться каждый раз при обращении к сайту, проверять количество изображений в папке и если есть новые фотографии
автоматически добавлять. Соответственно если количество количество изображений соответствует
тому что содержится в базе – ничего не делать
Всё это необходимо вживить в существующий сайт
Сайт статический
необходимо, чтоб всё это корректно отображалось на экране мобильных устройств

вся информация во вложении с примерными картинками

Необходимо создать карту с изображениями (превью фотографий)вместо меток как на яндекс карте
При выборе метки она появляется в балуне в большем размере (размер балуна 300px по ширине, по высоте пропорционально фотографии)
При нажатии на изображение в балуне появляется галерея в которой открывается выбранный снимок, при перелистывании (поддержка свайпов)
начинается показ фотографий в случайном порядке, при этом на карте выделяется
метка которой соответствует фотография. 
 
При увеличении масштаба метки кластеризуются
При нажатии на иконку кластера появляется балун с превью фотографий из кластера
При нажатии на содержимое балуна с превью фотографий сверху открывается галерея в которой можно листать выбранные снимки. Когда снимки в
выбранном балуне заканчиваются, начинается показ фотографий в случайном
порядке, при этом на карте выделяется метка которой соответствует фотография.
При нажатии на изображение (или нажатии кнопки –полноэкранный режим в правом верхнем углу) оно открывается в полный экран,
должна присутствовать поддержка свайпов (в принципе photoswipe то что нужно)
 
Все изображения находятся в одной папке
Предположим: ../images
Необходимо написать скрипт, который
- создавал превью (во всех необходимых разрешениях)изображений в определенной папке предположим ../images/trumbs
 - добавлял в отдельный файл JSON (с которым уже будет работать api yandex)данные о геолокации в десятичных координатах, имени файла, ссылке на превью
- скрипт должен запускаться каждый раз при обращении к сайту, проверять количество изображений в папке и если есть новые фотографии
автоматически добавлять. Соответственно если количество количество изображений соответствует
тому что содержится в базе – ничего не делать
Всё это необходимо вживить в существующий сайт
Сайт статический
необходимо, чтоб всё это корректно отображалось на экране мобильных устройств

вся информация во вложении с примерными картинками

API Yandex карт, кастомный балун, фотогалерея

Имеется взятый из песочницы яндекса
<code>﻿ymaps.ready(init);
</code>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 
<code>﻿{
</code>    "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" rel="nofollow noopener noreferrer" target="_blank"></a>", "clusterCaption": ""}},
 {"type": "Feature", "id": 65, "geometry": {"type": "Point", "coordinates": [52.990931, 108.283031]}, "properties": {"balloonContentBody": "<a href="http://baikalvr.com/tours/turka.html" rel="nofollow noopener noreferrer" target="_blank"></a>", "clusterCaption": ""}},
 {"type": "Feature", "id": 66, "geometry": {"type": "Point", "coordinates": [52.993628, 108.281625]}, "properties": {"balloonContentBody": "<a href="http://baikalvr.com/tours/turka.html" rel="nofollow noopener noreferrer" target="_blank"></a>", "clusterCaption": ""}},
 {"type": "Feature", "id": 78, "geometry": {"type": "Point", "coordinates": [52.792222, 107.958055]}, "properties": {"balloonContentBody": "<a href="http://baikalvr.com/tours/turka.html" rel="nofollow noopener noreferrer" target="_blank"></a>", "clusterCaption": ""}},
 {"type": "Feature", "id": 86, "geometry": {"type": "Point", "coordinates": [52.873333, 108.145000]}, "properties": {"balloonContentBody": "<a href="http://baikalvr.com/tours/turka.html" rel="nofollow noopener noreferrer" target="_blank"></a>", "clusterCaption": ""}},
 {"type": "Feature", "id": 87, "geometry": {"type": "Point", "coordinates": [52.873333, 108.144444]}, "properties": {"balloonContentBody": "<a href="http://baikalvr.com/tours/turka.html" rel="nofollow noopener noreferrer" target="_blank"></a>", "clusterCaption": ""}},
 {"type": "Feature", "id": 88, "geometry": {"type": "Point", "coordinates": [52.884167, 108.112778]}, "properties": {"balloonContentBody": "<a href="http://baikalvr.com/tours/turka.html" rel="nofollow noopener noreferrer" target="_blank"></a>", "clusterCaption": ""}},
 ﻿ ﻿{"type": "Feature", "id": 125, "geometry": {"type": "Point", "coordinates": [51.639287, 105.543242]}, "properties": {"balloonContentBody": "<a href="http://baikalvr.com/tours/turka.html" rel="nofollow noopener noreferrer" target="_blank"></a>", "clusterCaption": ""}}
    ]
}
Необходимо:
1) Настроить отображение картинки в балуне, прилагаются файлы как отображается сейчас и как надо с сохранением размеров.

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

Скрипт взял отсюда: <a href="https://tech.yandex.ru/maps/jsbox/2.1/object_manager" rel="nofollow noopener noreferrer" target="_blank">object_manager</a>

Денис zzi

API Yandex карт, кастомный балун, фотогалерея

POPUP из балуна яндекс

Отзывы фрилансеров