Клуб API Карт

Клуб API Карт

И снова о лайтбоксах

Пост в архиве.

Здравствуйте. Прошу помощи по избитому вопросу.

Пытаюсь сделать в балуне ссылки, при клике на которых срабатывали бы определенные эффекты fancybox.

Столкнулся с тем, что одни функции работают, а другие - нет

 Например, ссылка

работает отлично - вызывается ифрейм с содержимым.

обрабатывается все это функцией

$(".various").fancybox({
        'transitionIn'    : 'none',
        'transitionOut'    : 'none'
    });

а эта ссылка:

<a id='manual2' href='javascript:;' onclick='$.fancybox(this);return false;'>Image gallery</a>
 

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

ее функция: 

$("#manual2").click(function() {
        $.fancybox([
            'http://farm5.static.flickr.com/4044/4286199901_33844563eb.jpg',
            'http://farm3.static.flickr.com/2687/4220681515_cc4f42d6b9.jpg',
            {
                'href'    : 'http://farm5.static.flickr.com/4005/4213562882_851e92f326.jpg',
                'title'    : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
            }
        ], {
            'padding'            : 0,
            'transitionIn'        : 'none',
            'transitionOut'        : 'none',
            'type'              : 'image',
            'changeFade'        : 0
        });
    });


При этом, за пределами карты, разсмещенные на странице еэти примеры отлично работают.

Подскажите, пожалуйста, возможно ли реализовать на карте все функции fancybox?

Пациент тут (стандартые синие метки)
10 комментариев
Авторизуйтесь, чтобы оставить комментарий
thekashey
28 января 2016, 05:35

У вас все работает.

Не забываем что ID элемента на странице четко уникален.

ваш биндинг $("#manual2") в итоге работает(как и должен) для одного элемента - что под картой.

Что требуется - переделать бингинг с ID на классы, или дать кнопке уникальный ID, убрать из нее инлайн onclick, либо в конце jQuery биндинга сделать return false.

Денис
28 января 2016, 05:35

Переделал на классы - картина осталась прежней - то, что под картой - работает, то что на карте - нет, только модальное окно с сообщением о том, что не может загрузить контет, то есть изображение по сссылке:

$(".manual1").click(function() {
        $.fancybox({
            //'orig'        : $(this),
            'padding'        : 0,
            'href'            : 'http://farm3.static.flickr.com/2687/4220681515_cc4f42d6b9.jpg',
            'title'           : 'Lorem ipsum dolor sit amet',
            'transitionIn'    : 'elastic',
            'transitionOut'    : 'elastic'
        });
});
Если убираю из ссылок в балунах инлайн onclick, то они вообще перестают на что-либо реагировать. Може, я что-то недопонял в Вашем ответе?

thekashey
28 января 2016, 05:35

Заметка номер два.

$(".manual1").click вернет все элементы которые сушествуют на странице в данный момент.

В вашем случае получается что в начале отрабатывать этот код, а потом создаются маркеры.

Решение - перенести код биндинга в момент после создания карты, либо использовать live(observe) методы jQuery

KirilkaGPS
28 января 2016, 05:35

235429998 напишите пожалуйста как будет возможность мучаюсь с похожей проблемой)

Денис
28 января 2016, 05:35

Попробовал перенести бинды в момент после создания карты - не помогло. Выяснил, что они в пределах карты вообще не работают, работает только сам onclick='$.fancybox(this);return false; - просто вызывает модальное окно.

Я делаю только первые шаги, подскажите, пожалуйста, можно полностью как-то требуемый бинд прописать на onclick? а то без него вообще ничего не срабатывает.

И не могли бы Вы на примере показать, как можно использовтаь метод Live?

Вот на этом примере:

Image gallery

 

$("#manual2").click(function() {
        $.fancybox([
            'http://farm5.static.flickr.com/4044/4286199901_33844563eb.jpg',
            'http://farm3.static.flickr.com/2687/4220681515_cc4f42d6b9.jpg',
            {
                'href'    : 'http://farm5.static.flickr.com/4005/4213562882_851e92f326.jpg',
                'title'    : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
            }
        ], {
            'padding'            : 0,
            'transitionIn'        : 'none',
            'transitionOut'        : 'none',
            'type'              : 'image',
            'changeFade'        : 0
        });
    });
Денис
28 января 2016, 05:35

Обнаружил такую особенность - если балун отобразить изначально (            placemark.openBalloon();), то лайтбокс работает исправно. Если же балун сначала открывается при клике метки - это уже не работет

onedreamW
28 января 2016, 05:35

Или выполняйте привязывайте клика к событию открытия балуна (Events.BalloonOpen). Т.е. к моменту, когда балун уже есть на карте как объект.

Денис
28 января 2016, 05:35

Попытался добавить слушатель открытия балуна после функций построения меток и групп:

        // Создание группы
        function createGroup (title, objects, style) {
            var group = new YMaps.GeoObjectCollection(style);
            group.title = title;
            group.add(objects);
            return group;
        };

        // Создание метки
        function createPlacemark (point, name, description, content) {
            var placemark = new YMaps.Placemark(point);
            placemark.name = name;
            placemark.description = description;
            placemark.setBalloonContent = content;
            return placemark;
        }
YMaps.Events.observe(placemark, placemark.Events.BalloonOpen, function () { alert('Привет!'); } );
Но это дело не работет, алерт не вылетает, балуны молча открываются.

Я вообще к тому событию  обратился, к какому нужно? В чем может быть ошибка?

Полный код на всякий случай:

Денис
28 января 2016, 05:35

onedreamW
28 января 2016, 05:35

Либо сделайте placemark глобальным и уберите var из функции либо перенесите определение обсервера внутрь функции.