Fancybox open href onclick

Question

I am doing a GeoMap of some blog activity and new comments get added to the map with data from a socket. Now I want these comments to link to the blogpost, but in a Fancybox iframe style.

As the links does not exists yet I am having trouble to get fancybox to init these.

I want to be able to do something like:

<a href="http://domain/url/to/post" class="fancybox iframe" onclick="trigger_the_link_in_fancybox_iframe">

This is the code I have for the socket data so far:

var socket = io.connect('http://debug.dk:1000')
function geodata(content)
{

var jsonstring =  jQuery.parseJSON(content);

var lat = jsonstring.lat;
var long = jsonstring.lng;


 // Add marker

var myLatlng = new google.maps.LatLng(lat,long);


var marker = new google.maps.Marker({
    position: myLatlng,
    animation: google.maps.Animation.DROP,
    map: map,
    visible: false
})

var boxText = document.createElement("div");
    boxText.style.cssText = "border: 3px solid black; margin-top: 8px; background:#333; color:#FFF; font-family:Arial; font-size:12px; padding: 5px; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px;";

    boxText.innerHTML = '<a class="fancybox fancybox.iframe" href="' +  jsonstring.link + '" onclick="jQuery(\'a.fancylink\').trigger(\'click\')";>' + jsonstring.post + '</a>'

    var myOptions = {
             content: boxText
            ,disableAutoPan: false
            ,maxWidth: 0
            ,pixelOffset: new google.maps.Size(-140, 0)
            ,zIndex: null
            ,boxStyle: {
                background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
                opacity: 0.75,
                width: "180px"
             }
            ,closeBoxMargin: "10px 2px 2px 2px"
            ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
            ,infoBoxClearance: new google.maps.Size(1, 1)
            ,isHidden: false
            ,pane: "floatPane"
            ,enableEventPropagation: false
    };

    var ib = new InfoBox(myOptions);
    ib.open(map, marker);


}



socket.on('notification', function(x) { geodata(x); });

Is there any way to trigger these fancybox iframe modal windows dynamically when the links do not exist on document ready?

Hope the above makes sense.

Page can be viewed and demo´ed here http://www.o-meter.dk/geo/ — Tonny Jørgensen, Sep 02 '12 at 14:05

score 3 · Answer 1 · edited May 23 '17 at 10:34

When you want to listen for a click on a link in JavaScript you normally bind a listener on the click event. The issue is that at after time of binding, new links might be added to the DOM that the listener doesn't know about and therefore isn't bound to.

jQuery "solves" this by giving you the .on() method (prior to jQuery 1.7 you would use .live()), which makes it possible to auto-bind to future DOM elements matching a specific jQuery selector. E.g.

$(document).on('click', '.fancybox', function() { ... });

Your job is to get Fancybox to do this. A lot of people have already asked this question on StackOverflow:

There are 3 suggested solutions:

Patch Fancybox in-line using jQuery to use .on() instead of .bind()
Update the Fancybox binding every time a new link is added to the DOM
Don't auto-bind Fancybox at all, but fire it manually when a link is clicked

Which one you chose is a matter of taste I think. But I might go for #3, since it seems to have the least overhead:

$(document).on('click', '.fancybox', function(e) {
  e.preventDefault();
  $.fancybox({
    href : $(this).attr('href'),
    type : 'iframe',
    ...
  });
});

I tried to implement you code, though had to modify it a bit as $ is breaking my js. I now have jQuery(document).on('click', '.fancybox', function(e) { e.preventDefault(); jQuery.fancybox({ href : jQuery(this).attr('href'), type : 'iframe', width: '900px', speedIn: '300' }); }); Links are create with this: boxText.innerHTML = '' + jsonstring.post + '' The link is still opened in the same window not in a fancybox. — Tonny Jørgensen, Sep 02 '12 at 16:18
if i put this in the chrome console after loading the page it works jQuery('#map').html('click me'); it replaces the map with "click me" but when i click the page displays in modal iframe. — Tonny Jørgensen, Sep 02 '12 at 16:55
The previous questions that you are making reference are for older versions of fancybox. Fancybox v2.x already uses `live` so it can be bound to existing or future elements without using `live()` or the livequery plugin. @TonnyJørgensen : integer and Boolean values go without quotes so `width: '900px'` should be `width: 900` only ... and same for `speedIn: '300'` that should be `speedIn: 300` ... maybe this is why it doesn't work. — JFK, Sep 02 '12 at 20:50

Fancybox open href onclick

1 Answers1