Яндекс карта в модальном окне fancybox

[imushroom]

Хочу добавить в способ доставки "Самовывоз" ссылку на Яндекс карту. Я уже добавлял простую ссылку на Яндекс карту, которая открывалась в отдельном окне. Для этого я добавлял ссылку в переменную $_['text_description'] в файле pickup.php.

А вот как сделать так, чтобы карта открывалась в модальном окне? Очень надо. Помогите, люди знающие.

Змінено 2 грудня 2015 користувачем imushroom

[afwollis]

так же, только добавив ей id и подключив инициализацию fancybox на этот id (например - в common.js).

[imushroom]

так же, только добавив ей id и подключив инициализацию fancybox на этот id (например - в common.js).

Спасибо за подсказку. К сожалению мои познания в программировании очень незначительны. Я буду очень благодарен, если Вы напишете пример (вместе с кодом).

[mazein]

Качаешь, и подключаешь fancybox, например так:

<link type="text/css" rel="stylesheet" href="/catalog/view/javascript/jquery/fancybox/jquery.fancybox.css">
<script type="text/javascript" src="/catalog/view/javascript/jquery/fancybox/jquery.fancybox.js"></script>

Оформляешь ссылку, открывающую карту в модальном окне:

<a class="fancybox-media" href="адрес карты" rel="media-gallery">Название ссылки</a>

Чуть ниже задаёшь для всплывающих окон необходимые настройки

<script>
$(document).ready(function(){
    $('.fancybox-media').attr('rel', 'media-gallery').fancybox({
        openEffect : 'none',
        closeEffect : 'none',
        prevEffect : 'none',
        nextEffect : 'none',
        arrows : false,
        helpers : {
            media : {},
            buttons : {}
        }
    });
});
</script>

Как-то так.

Змінено 2 грудня 2015 користувачем mazein

[imushroom]

Fancybox скачал, ссылку оформил в файле pickup.php. Возник вопрос - в каком файле подключать fancybox и в каком файле задавать настройки для всплывающих окон?

Змінено 2 грудня 2015 користувачем imushroom

[imushroom]

Разобрался с подключением fancybox - прописал его в header.tpl в разделе head. Там же прописал настройки для всплывающих окон. В файле pickup.php оформил ссылку

<a class="fancybox-media" href="https://maps.yandex.ru/-/CVwtiElp" rel="media-gallery">Красная площадь</a>

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

[mazein]

Вот http://webmap-blog.ru/yandex-maps/fancybox-vyvodim-kartu-v-modalnom-okne-api-yandeks-kart-2-x

[imushroom]

Все сделал по инструкции. Даже взял их файлы jquery.fancybox.js, jquery.fancybox.css к себе на хостинг. Решил пока поэкспериментировать со страницей Контактов (catalog/view/theme/my/template/common/contact.tpl). Оформил ссылку как написано в примере. В итоге окно fancybox открывается, но карта в него не подгружается. И еще при открытии окна fancybox вся страница сдвигается влево. Моя тестовая страница с ссылкой: http://hochulinzi.tk/contact-us/

Змінено 3 грудня 2015 користувачем imushroom

[AlexDW]

только что проверил - все открывается, карта есть (Firefox 39.0)

 

другое дело, что у вас сайт доступен как с www, так и без www - делайте редирект на что-то одно

смотрите здесь

[imushroom]

Не понимаю, что происходит. Сейчас попробовал, карта тоже открылась. Пробую второй раз - уже не открывается, только пустое окно.

А что можете сказать на счет сдвига содержимого страницы?

[imushroom]

Испытания провожу в браузере Firefox 42.0

[AlexDW]

про сдвиг при использовании fancybox смотрите здесь

[imushroom]

Опять весь вечер убил на эксперименты. Карта в модальном окне открывается, но сдвиг из за появления второго скролбара убрать так и не смог. Появляется он в браузере Firefox 42.0 на Windows 7.

Safari и Firefox 42.0 на MacOS все ок - второго скролбара нет, следовательно никакого сдвига тоже нет.

Если не сложно потыкайте на ссылку "расположение на карте" на этой странице и отпишитесь, будет ли сдвиг содержимого страницы...