google-mapsinfowindowshadowbox

Make Shadowbox.js work inside multiple InfoWindow


I'm trying to use Shadowbox.js inside multiple 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);

As you can see, I've successfully made it work, but only for the first InfoWindow.
This seems to be caused by my event attachment, I'm using domready :

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

I can't find another way to "reinit" Shadowbox for each InfoWindow.

Any advice ?


Solution

  • As usual, I find the solution I'm searching for just a few minutes after writing my question...
    To get Shadowbox working on every InfoWindow : you need to call Shadowbox player manually.

    Use a custom class instead of rel=shadowbox :

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

    Every time domready is triggered on an InfoWindow, manually attach an event listener to every .dyn-shadowbox link :

    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