Клуб API Карт

Найдено на тему «FancyBox»:
Fancybox при клике на метку
Maksim
3 октября 2014, 15:03

Как реализовать открытие через Fancybox картинки, iframe при клике на метку на карте?

 

Сейчас у меня на это событие прикручен alert стандартный:

 

myMap.geoObjects.add(myPlacemark);

myPlacemark.events
.add('mouseenter', function (e) {
// Ссылку на объект, вызвавший событие,
// можно получить из поля 'target'.
e.get('target').options.set('preset', 'islands#greenIcon');
})
.add('mouseleave', function (e) {
e.get('target').options.unset('preset');
})
.add('click', function (e) {
alert("Щелк!");
})
;

 

 

Блок кода по fancybox:

 

    <!--
        Подключаем скрипт Fancybox
    -->    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script>
        !window.jQuery && document.write('<script src="./fancybox/jquery-1.4.3.min.js"><\/script>');
    </script>
    <script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
    <script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
    <script type="text/javascript">
        $(document).ready(function() {
        
            $("a[rel=example_group]").fancybox({
                'transitionIn'        : 'none',
                'transitionOut'        : 'none',
                'titlePosition'     : 'over',
                'titleFormat'        : function(title, currentArray, currentIndex, currentOpts) {
                    return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
                }
            });

            /*
            *   Examples - various
            */

            $("#various1").fancybox({
                'width'                : '95%',
                'height'            : '95%',
                'autoScale'            : true,
                'transitionIn'        : 'elastic',
                'transitionOut'        : 'elastic',
                'type'                : 'iframe',
                'titleShow'         : true,
                'titlePosition'     : 'outside',
                'overlayColor'        : '#000',
                'overlayOpacity'    : 0.6
            });
        });
    </script>
Если на самой странице использую, то fancybox по ссылке работает. Если на карте в содержимое балуна эту же ссылку запихиваю, то открывается без эффекта fancybox.

 

 

3 комментария
API 2.1,FancyBox
Яндекс карта + Fancybox
xorder2
30 июля 2014, 20:12

Хочу сделать чтобы изображения в Balloon открывались в fancybox, но не получается.

Подскажите решение.

1 комментарий
API 2.1,FancyBox
Карта в fancybox
Сергей Ш.
7 ноября 2013, 21:55

Есть две карты: http://www.haroldltd.ru/map.php?map=1 и http://www.haroldltd.ru/map.php?map=2 

Они нормально и спокойно открываются. Есть страница: http://www.haroldltd.ru/contact/

Справа от "Санкт-Петербург" и "Москва" есть кнопка "все магазины на карте", открывающая в fancybox'е две эти карты.

Почему-то открывается белый лист. В дебаггере хрома я вижу следующее:

  1. Uncaught TypeError: Cannot call method 'insertBefore' of null api-maps.yandex.ru/services/constructor/1.0/js/?sid=nYTs_ftRCQa0z4j_exe76D8C05aWPrOd&width=640&height=480&_=1383843482406:1

 

Как это можно вылечить? 

2 комментария
FancyBox,конструктор
FancyBox в Yandex Maps
Denis
14 мая 2013, 22:44

Не могу найти помощи в этом вопросе:
 1) Очень хочу сделать так, чтобы картинки внутри текста балуна открывались с помощью fancybox,а так же ссылки на другие страницы
 2) вот ссылка на мой сайт http://imperiyakolpino.ru/карта/
 3) Вот где работает http://www.reklama.kolpino.ru/outdoor/

 

<script type="text/javascript">

    ymaps.ready(init);

 

    function init() {

        var myMap = new ymaps.Map("map", {

            center: [59.7459, 30.58666],

            zoom: 15

        }),

 

            myGeoObject = new ymaps.GeoObject({

                geometry: {

                    type: "Point",

                    coordinates: [59.7459, 30.58666]

                },

                properties: {

                    iconContent: 'Метка',

                    balloonContent: '<a class="fancybox" rel="gallery" href="http://imperiyakolpino.ru/wp-content/uploads/2013/05/map-icon-small.jpg" > <img src="http://imperiyakolpino.ru/wp-content/uploads/2013/05/map-icon-small.jpg" width="200" /> </a>'

                }

            }, {

                preset: 'twirl#redStretchyIcon'

            });

 

        myGeoObject2 = new ymaps.GeoObject({

            geometry: {

                type: "Point",

                coordinates: [59.744, 30.582]

            },

            properties: {

                iconContent: 'Метка 2',

                balloonContent: 'Тестовый текст 2'

            }

        }, {

            preset: 'twirl#greenStretchyIcon'

        });

 

        myMap.geoObjects

            .add(myGeoObject2)

            .add(myGeoObject);

    }

</script>

 

 

Хотя картинка снизу работает 

2 комментария
API 2.0,балун,FancyBox
Вывод карты в модальном окне через плагин Fancybox
tekunova
23 апреля 2013, 17:42
Вывод карты в модальном окне через плагин Fancybox

В блоге «Занимательная веб-картография» опубликована статья о том, как вывести Яндекс.Карту в модальном окне, используя плагин FancyBox для javascript-библиотеки jQuery.

Если вы написали статью или хотите рассказать о своей реализации, пишите нам в клуб, facebook или на почту ymapsapi@ya.ru.

статьи пользователей,jQuery,API 2.0,статьи,FancyBox
Опять вопрос про Fancybox
tormoznaya
24 июня 2012, 20:10

Здравствуйте. Обсуждалось наверное, но я так и не понял как же все-таки вызвать окно Fancybox по клику на метке на карте? Может кто нибудь дописать недостающий кусок? Идея такая:
При клике на метку на карте открывается модальное окно с содержимым файла test.php


ymaps.ready(init);
function init () {

var myMap = new ymaps.Map('map', {
center: [55.76, 37.64], // Москва
zoom: 10
});
// Создаем экземпляр класса коллекции геообъектов.
myCollection = new ymaps.GeoObjectCollection();

var point= new Array();
point[0] = [55.9052 , 37.568426];
point[1] = [55.659378, 37.757521];

for (var i = 0; i < 2; i++) {

// Создаем метку с заданными координатами.
// Создаем метку и задаем изображение для ее иконки
myPlacemark = new ymaps.Placemark(point[i], {}, {
iconImageHref: 'icon/logoc.png', // картинка иконки
iconImageSize: [70, 70], // размеры картинки
iconOffset: [-5, -20], // смещение картинки
});

// Добавляем метку в коллекцию.
//myPlacemark.events.add('click', simp, myPlacemark);

myPlacemark.events.add('click', function (e) {

// я так понимаю что код должен быть тут

},
myPlacemark
);

myCollection.add(myPlacemark);
}


// Теперь добавим коллекцию геообъектов на карту.
myMap.geoObjects.add(myCollection);
myMap.controls
// Кнопка изменения масштаба
.add('zoomControl');

// Добавление метки на карту
myMap.geoObjects.add(myPlacemark);

}

 

Спасибо

4 комментария
API 2.0,FancyBox
Опять Yandex Map и Fancybox
mcedonskiy
22 июня 2012, 15:07

Знаю, что тема пережевывалась много раз - но возникшая у меня проблема нигде не описывалась.

Использую версию API 2.0.9 Yandex Map - 

C помощью fancybox открывается окно и загружается страничка вот с таким содержимым

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>На карте</title>
    <script src="http://api-maps.yandex.ru/2.0.8/?load=package.full&lang=ru-RU" type="text/javascript"></script>
<script type="text/javascript">
    ymaps.ready(function () {
        var map = new ymaps.Map('YMapsID', {
            center: [55.76, 37.64], // Москва
            zoom: 10
            /*center: [37.585566, 55.670819],
            zoom: 6*/
            //type: 'yandex#map',
            //behaviors: ['scrollZoom', 'drag']
        });

        // Необходимо подставить свой URL.
            .then(function (res) {

                // Установка границ карты по размерам содержимого YMaspML-файла.
                var bounds = res.mapState && res.mapState.getBounds();

                bounds && map.setBounds(bounds);

                res.geoObjects.options.set({
                    preset : 'twirl#buildingsIcon', // Все типы стандартных значков можно увидеть тут http://api.yandex.ru/maps/doc/jsapi/2.x/ref/reference/option.presetStorage.xml
                     // Можно установить и собственный значок для метки.
                        iconImageHref: 'http://api.yandex.ru/maps/doc/jsapi/2.x/examples/images/myIcon.gif', // картинка иконки
                        iconImageSize: [30, 42], // размеры картинки
                        iconImageOffset: [-3, -42] // смещение картинки

                });

                // Добавление загруженных из YMapsML-файла объектов на карту.
                map.geoObjects.add(res.geoObjects);
            });
    });
</script>
    </head>

<body>
fiiiii
<div id="YMapsID" style="width:1000px;height:800px">

</div>
</body>
</html>


И карта отображается, НО только после изменения размера окна - 

проверялось и Fx и в Chrome и Opera и IE9 - везде картина одинаковая - тоже самое если не подгружать ничего из YMapsML

3 комментария
FancyBox,API 2.0,YMapsML