Клуб API Карт

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

Пост в архиве.
Денис
31 октября 2011, 23:22

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

Пытаюсь сделать в балуне ссылки, при клике на которых срабатывали бы определенные эффекты 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 комментариев

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

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

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

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

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

$(".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, то они вообще перестают на что-либо реагировать. Може, я что-то недопонял в Вашем ответе?

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

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

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

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

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

Попробовал перенести бинды в момент после создания карты - не помогло. Выяснил, что они в пределах карты вообще не работают, работает только сам 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
        });
    });

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

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

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

        // Создание группы
        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('Привет!'); } );
Но это дело не работет, алерт не вылетает, балуны молча открываются.

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

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

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