I am having a few issues with fancybox and google maps(v3) when displaying the contents of a KML file.
When displaying the balloon that contains the description, I have a thumbnail of an image that I want to display when clicked u开发者_运维百科sing fancybox. The problem I have is that when the thumbnail is clicked the the fancybox displays but the browser also spawns a new window displaying the full size image.
I know that when the KML file is parsed any href tags have the target attribute added, so I've tried to remove it once the map has loaded, during the same time I attach the fancybox to the link.
I ensure that the map has loaded before I try: i.e.
function updatemap(surveyid){
var map;
var myOptions = {
zoom: 5,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var url = "https://myurl/feed/kml.php?action=survey&id=" + surveyid;
map = new google.maps.Map(document.getElementById("googlemap"), myOptions);
var kmlLayer = new google.maps.KmlLayer(url);
kmlLayer.setMap(map);
google.maps.event.addListener(map, "tilesloaded", function(){
attachFancyBox();
});
}
The attachFancyBox() function looks like this.
function attachFancyBox(){
$("a:has(img)").fancybox({
"hideOnContentClick":true
}).removeAttr("target");
}
Now this will work with firefox however other browsers (IE7+, safari, chrome) act like mentioned above. So is there a way I can achieve the displaying the image in fancybox without spawning a new window/tab??
Many thanks...
Excuse me, I have no time to full reconstruct your case, but may be cause is not a target
, may be cause is Google Map script binds click
events to a
tag? Try to unbind all events before attach fancy box:
function attachFancyBox(){
$("a:has(img)").unbind()
.fancybox({
"hideOnContentClick":true
})
.removeAttr("target");
}
精彩评论