0

I am trying to have a popup generated with leaflet hold an anchor tag which when clicked opens the webpage in fancybox window. This works just fine outside of the popup content when generating a fancybox using

<a class='fancybox.iframe' href='http://en.wikipedia.org/wiki/Space_Needle'>More Info</a>"

but when I put that in the leaflet popup the fancybox doesn't doesn't work and it just opens in a new window.

var markerLocation = new L.LatLng(47.6204, -122.3491),
marker = new L.Marker(markerLocation);
map.addLayer(marker);
var popupContent = "<a class='fancy fancybox.iframe' href='http://en.wikipedia.org/wiki/Space_Needle'>More Info</a>";
marker.bindPopup(popupContent);
map.on('click', onMapClick);
var popup = new L.Popup();

I'm fairly new to all this so how can I make it work?

2 Answers 2

1

hope you use the v2

it would help if you show your code where you bind your link to fancybox plugin something like :

$(function(){
   $(".fancy").fancybox();
});

maybe you would need to call this binding after you add your link !

A second option would be to call the fancybox plugin directly on the onclick of the link something like :

<a href="..." class="fancybox.iframe" onclick="$.fancybox(this);return false;">More info</a>
1
  • Perfect the second option worked great. Thank you for the help!
    – Gregle
    Feb 25, 2012 at 6:30
0

Are you binding the fancybox on $(document).ready() or something similar? If so, it looks like your popup content doesn't exist within the DOM at that time. It needs to exist in order to have a click event bound to it.

If your map triggers an event that you can attach a callback to when the popup opens (when the content gets added to the DOM), then you can bind the fancybox click at that time. It looks like your onMapClick function might do the trick, if that's where it adds the popup content to the DOM. If so, add your $('whatever').fancybox(); at the end of it.

In the worst case scenario, you could try adding a <script> tag after the <a> within var popupContent, in which you call the fancybox binding.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.