让Shadowbox.js在多个InfoWindow中工作。

Question

我想用 Shadowbox.js 内有 InfoWindow :

function initialize() {
    //create the Map
    var map = new google.maps.Map(...);

    //create the Markers
    var marker = new google.maps.Marker(...);
    var marker2 = new google.maps.Marker(...);

    //create the InfoWindow
    var infoWindow = new google.maps.InfoWindow();

    //link the Markers to the InfoWindow
    google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent('<a href="http://placehold.it/200x200.jpg" rel="shadowbox">Working shadowbox link</a>');
        infoWindow.open(map, marker);
    });
    google.maps.event.addListener(marker2, 'click', function() {
        infoWindow.setContent('<a href="http://placehold.it/300x150.jpg" rel="shadowbox">Broken shadowbox link</a>');
        infoWindow.open(map, marker2);
    });

    //enable Shadowbox
    google.maps.event.addListener(infoWindow, 'domready', function() { 
        Shadowbox.init({
            overlayOpacity: 0.8
        });
    }); 
}
google.maps.event.addDomListener(window, 'load', initialize);

如你所见，我已经成功地让它工作了，但只是第一次。InfoWindow. 这似乎是由我的事件附件引起的，我使用的是 domready :

google.maps.event.addListener(infoWindow, 'domready', function() {});

我找不到另一种方法来 "重启 "Shadowbox的每一次。InfoWindow.

任何建议？

Answer 1

像往常一样，我在写完我的问题后几分钟就找到了我正在寻找的解决方案。要获得 Shadowbox 不厌其烦 InfoWindow : 您需要手动调用Shadowbox播放器.

使用一个自定义类，而不是 rel=shadowbox :

<a href="http://placehold.it/200x200.jpg" class="dyn-shadowbox">
    Shadowbox link
</a>

每次 domready 触发了 InfoWindow，手动将事件监听器附加到每个 .dyn-shadowbox 友情链接。

google.maps.event.addListener(infoWindow, 'domready', function() { 
    var dynlinks = document.getElementsByClassName('dyn-shadowbox');
    var n = dynlinks.length;
    for (var i = 0; i < n; i++) {
       var link = dynlinks[i];
       link.removeEventListener('click');
       link.addEventListener('click', function(ev) {
           ev.preventDefault();
           Shadowbox.open({
               link:    link,
               content: link.getAttribute('href'),
               player:  'img',
               title:   ''
           });
       });
    }
}); 

更新的JSFiddle