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() {});

我找不到另一种方法来为每个InfoWindow“重新启动”Shadowbox。

有什么建议吗？

JSFiddle with 1 Marker（按预期工作）
JSFiddle with 2 Markers（仅适用于第一个）

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:   ''
           });
       });
    }
});

Updated JSFiddle

使Shadowbox.js在多个InfoWindow中工作

1 个答案: