Клуб API Карт

Конфликт (?) shadowbox и Яндекс.Карт

cybertrancer
16 августа 2013, 11:24

При открытии изображения для просмотра с помощью плагина shadowbox, карта яндекса пропадает, оставляя только подложку карты. Баг виден в браузерах Google Chrome (Версия 28.0.1500.95 m) и IE9

 

 

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
    <script src="http://api-maps.yandex.ru/2.0-stable/?load=package.standard&lang=ru-RU" type="text/javascript"></script>
    
    <script src="http://www.shadowbox-js.com/build/shadowbox.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="http://www.shadowbox-js.com/build/shadowbox.css">
</head>
<body>
    <div id="map" style="width: 600px; height: 400px"></div>
    
<script type="text/javascript">
    ymaps.ready(init);
    var myMap;
    function init(){     
        myMap = new ymaps.Map ("map", {
            center: [55.76, 37.64],
            zoom: 7,
        });
    }
</script>
<a href="http://yandex.st/lego/_/X31pO5JJJKEifJ7sfvuf3mGeD_8.png" rel="shadowbox">My Image</a>
<script type="text/javascript">
Shadowbox.init({
    handleOversize: "drag",
    modal: true
});
</script>
</body>
</html>

  

Код просто скопируйте в файл *.html и откройте в бразуре Хром или ИЕ. Все библиотеки и картинка качается из сети.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
    <script src="http://api-maps.yandex.ru/2.0-stable/?load=package.standard&lang=ru-RU" type="text/javascript"></script>
    
    <script src="http://www.shadowbox-js.com/build/shadowbox.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="http://www.shadowbox-js.com/build/shadowbox.css">
</head>
<body>
    <div id="map" style="width: 600px; height: 400px"></div>
    
<script type="text/javascript">
    ymaps.ready(init);
    var myMap;
    function init(){     
        myMap = new ymaps.Map ("map", {
            center: [55.76, 37.64],
            zoom: 7,
        });
    }
</script>
<a href="http://yandex.st/lego/_/X31pO5JJJKEifJ7sfvuf3mGeD_8.png" rel="shadowbox">My Image</a>
<script type="text/javascript">
Shadowbox.init({
    handleOversize: "drag",
    modal: true,
onFinish: function(elem){
if(myMap) myMap.container.fitToViewport();
}
});
</script>
</body>
</html>

 

6 комментариев
Подписаться на комментарии к посту

Добавьте обработчик события после открытия окна и в него добавьте - map.container.fitToViewport();

 

Добавил:

Shadowbox.init({

    handleOversize: "drag",

    modal: true,

onFinish: function(elem){

if(myMap!==undefined && myMap) myMap.container.fitToViewport();

}

});

и... ничего не изменилось

 

if(myMap!==undefined && myMap)

достаточно проверить if(myMap)

 

Дайте ссылку на страницу

 

Код скрипта в первом сообщении. Все на локалхосте тестим.

Добавил неработающий код в первое сообщение для тестов.

Не знаю зачем, но shadowbox при включении своего оверлея прячет (выставляет visibility: hidden) все элементы на странице

Если на этой строчке убрать "canvas" из массива, и пересобрать, то всё должно быть ОК

Спасибо, теперь работает.

Также есть способ переопределения стилей для canvas:

#map canvas {visibility:visible !important;}

Вдруг кого-то не устроят правки в js