[OpenLayers-Users] jQuery FancyBox Question
Ian Barton
lists at wilkesley.net
Wed Nov 30 03:18:35 EST 2011
I am building a page which loads gpx track points from a text file as
POI's into a Google Maps layer. When the user clicks on a POI they see a
thumbnail of a photo taken from that location. What I want to happen is
for Fancybox to pop up a larger version of the photo when the user
clicks the thumbnail. This doesn't work presumaby because the pop up
hasn't been created when the page is loaded. Following some help on
StackOverflow I have come up with:
<script type="text/javascript">
var map;
function init() {
map = new OpenLayers.Map('map');
map.addControl(new OpenLayers.Control.LayerSwitcher());
var gphy = new OpenLayers.Layer.Google(
"Google Physical",
{type: G_PHYSICAL_MAP}
);
var gmap = new OpenLayers.Layer.Google(
"Google Streets", // the default
{numZoomLevels: 20}
);
var ghyb = new OpenLayers.Layer.Google(
"Google Hybrid",
{type: G_HYBRID_MAP, numZoomLevels: 20}
);
var gsat = new OpenLayers.Layer.Google(
"Google Satellite",
{type: G_SATELLITE_MAP, numZoomLevels: 22}
);
var pois = new OpenLayers.Layer.Text( "My Points",
{ location:"ella_trip_waypoints.txt",
projection: map.displayProjection
});
map.addLayer(pois);
map.addLayers([gphy, gmap, ghyb, gsat, pois]);
map.setCenter(new OpenLayers.LonLat(-3.98600, 53.12540), 13);
});
}
</script>
<script type="text/javascript">
$("#map").delegate("a.simpletitle", "click", function(){
event.preventDefault();
$.fancybox(this),{
'titlePosition': 'inside'
});
});
</script>
However, in Chrome I get an "Uncaught TypeError: Cannot call method
'appendChild' of undefined" when I click the thumbnail. Trying to
delegate click events on other divs in the document works, so I assyume
that it's something in OpenLayers which prevents this working.
Any suggestions on how to achieve what I want greatfully received!
Ian.
More information about the Users
mailing list