Fancybox ouvrir href onclick
Je suis en train de faire un GeoMap de certains blog d'activité et de nouveaux commentaires sont ajoutés à la carte avec des données à partir d'une prise. Maintenant, je veux ces commentaires pour le lien vers l'article sur le blog, mais dans une Fancybox iframe style.
Que les liens n'existe pas encore j'ai de la difficulté à obtenir fancybox à init ces.
Je veux être en mesure de faire quelque chose comme:
<a href="http://domain/url/to/post" class="fancybox iframe" onclick="trigger_the_link_in_fancybox_iframe">
C'est le code que j'ai pour la prise de données à ce jour:
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); });
Est-il de toute façon à l'origine de ces fancybox iframe modal windows de façon dynamique lorsque les liens n'existent pas sur le document prêt?
Espère que le ci-dessus a un sens.
- Page peut être consultée et fait des démos ici o-meter.dk/geo
Vous devez vous connecter pour publier un commentaire.
Lorsque vous voulez écouter un clic sur un lien en JavaScript, normalement, vous liez un écouteur sur le
click
événement. Le problème est qu'au moment de la liaison, de nouveaux liens pourraient être ajoutés à la DOM que l'auditeur ne connaît pas et n'est donc pas lié.jQuery "résout" ce en vous donnant la
.on()
méthode (avant jQuery 1.7 vous utilisez.live()
), ce qui rend possible l'auto-lier pour l'avenir DOM éléments correspondant à un spécifique sélecteur jQuery. E. g.Votre travail est d'obtenir des Fancybox pour ce faire. Beaucoup de gens ont déjà posé cette question sur StackOverflow:
Il y a 3 solutions proposées:
.on()
au lieu de.bind()
Lequel vous avez choisi est une question de goût je pense. Mais j'irai peut-être pour le #3, car il semble avoir le moins de frais généraux:
live
de sorte qu'il peut être lié existants ou futurs éléments sans l'aide delive()
ou la livequery plugin. @TonnyJørgensen : integer et les valeurs Booléennes aller sans les guillemets doncwidth: '900px'
devrait êtrewidth: 900
seulement ... et même pourspeedIn: '300'
qui devrait êtrespeedIn: 300
... c'est peut-être pourquoi il ne fonctionne pas.