Question

I am having the Infobox (a Infowindow with more controls) popup when the user clicks on a marker on the map. In this popup window, I am currently trying to insert a jQuery image slider, in particular NivoSlider.

Problem:
However, this image slider only works when its on a normal HTML page, and does not work at all when inside the Infobox. I need the image to work inside the infobox.

jQuery/JS Code

The part that loads the jQuery image slider is enclosed by <div id="slider class="nivoSlider"><img...../><img....../></div>"

$(window).load(function() {

$(‘#slider’).nivoSlider(); //loads the nivoslider in the div #slider

$(“#search_button”).click(function(e){
e.preventDefault();
var search_location = $(“#search_location”).val();
$.getJSON(……………………., function() {

        for( i = 0; i < json.length; i++) {

            // Place markers on map
            var latLng = new google.maps.LatLng(json[i].lat, json[i].lng);
            var marker = new google.maps.Marker({
                position: latLng,
                map: map
            });
            markers.push(marker);

            // Create infowindows
            var boxText = '<div id="infobox"> \
                                <div id="infobox_header_title"> \
                                    <span id="infobox_header_price">$' + json[i].price + '</span> \
                                    <span id="infobox_header_room">' + json[i].bedroom + 'br </span> \
                                    <span id="infobox_header_address">' + json[i].address_1 + '</span> \
                                </div> \
                                <div id="slider" class="nivoSlider"> \
                                    <img src="/images/cl/' +  json[i].photos[0] + '.jpg" /> \
                                    <img src="/images/cl/' +  json[i].photos[1] + '.jpg" /> \
                                </div> \
                            </div>';
            var infoboxOptions = {
                content: boxText,
                disableAutoPan: false,
                maxWidth: 0,
                pixelOffset: new google.maps.Size(-140, 0),
                zIndex: null,
                boxStyle: { 
                },
                closeBoxMargin: "10px 2px 2px 2px",
                closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
                infoBoxClearance: new google.maps.Size(1, 1),
                isHidden: true,
                pane: "floatPane",
                enableEventPropagation: false
                };

            var infobox = new InfoBox(infoboxOptions);
            infobox.open(map, markers[i]);
            infoboxes.push(infobox);

            // Create Listeners
            markers[i]._index = i;
            google.maps.event.addListener(markers[i], 'click', function() {

                //infoboxes[this._index].open(map, markers[i]);
                infoboxes[this._index].show();

            });
        };

        // Fill screen with markers
        mapAutoCenter(markers);

    });

What I think is causing this: Probably something to do with the <div> in the infobox not being created when the $('#slider').nivoSlider() is called right at the start

Additional Info: I’m using Google Maps API V3, with PHP and Codeigniter framework.

Answer 1

The slider works by binding an event listener, which will be lost when the infoWindow is removed from the DOM tree (Google maps removes the infoWindow from the DOM tree when it is not visible). Even when the infoWindow appears, the listener will still be gone.

You will have to rewrite the slider listener part of your NivoSlider plugin. Here’s some guidance.

Write a click handler, mousemove handler and a mouseup handler function and put it somewhere (probably inside the the NivoSlider plugin so you don’t pollute the gloal space). Something like this:

$.fn.nivoSlider.handlers = {
    sliderClickHandler: function (event) {
        // register mousemove and mouseup handlers
        $(document).bind('mousemove', $.fn.nivoSlider.handlers.sliderMMoveHandler);
        $(document).bind('mouseup', $.fn.nivoSlider.handlers.sliderMouseupHandler)
    }, 

    sliderMMoveHandler: function (event) {
        // process mousemove event (move the slider, change images, etc. put your logic here)
    },

    sliderMouseupHandler: function (event) {
        // unregister the listeners since the click event has completed
        $(document).unbind('mouseup', $.fn.nivoSlider.handlers.sliderMouseupHandler)
        $(document).unbind('mousemove', $.fn.nivoSlider.handlers.sliderMMoveHandler);
    }
};

Now, register the sliderClickHandler directly in the HTML as an onclick event:

<div id="slider" class="nivoSlider" onclick="$.fn.nivoSlider.handlers.sliderClickHandler()">

Notice, you couldn’t do something like this:

onclick="sliderClickHandler()"

because you’re putting the listener directly into the DOM element which will be executing from the global space (and will not have any other namespace bound to it, unlike typical javascript where we are so used to functions being closures and encapsulating/remembering where they were defined).

There is one major issue with this workaround (but I can’t think of a better way to do it). If you will have more than one NivoSlider on your page (which you probably will), then naturally you will want the handler functions to behave differently depending on which NivoSlider you are interacting with. Since you can’t create handlers on the fly as closures on each instance, you will have to have unique ID’s for each NivoSlider and the handler’s will have to act depending on which ID is currently the active object. (So you’ll have to store the currently active NivoSlider’s ID somewhere).

Good luck. Definitely doable, though not very fun.