I have this piece of code to open a photo when marker is clicked on Leaflet-map. And it works fine.
function onMouseFancybox(feature, layer)
{
foto="images/" + feature.properties['uuid'] + ".jpg";
tijd=feature.properties['timestamp'].replace('T', ' ');
uuid=feature.properties['uuid'];
caption=tijd + "<br>";
Fancybox.show([{ src: foto, caption: caption} ]);
layer.setStyle({fillColor: "#ff0000", color: "#ff0000"});
console.log(uuid);
}
geojsonFeatureCamera=<?php echo json_encode($geojsonc)?>;
var geojsonc = L.geoJSON(geojsonFeatureCamera, {
pointToLayer: function (feature, latlng)
return L.circleMarker(latlng, geojsonMarkerOptionsCamera);
},
onEachFeature: function(feature, layer) {
console.log(feature);
layer.on('click', function(e) {
onMouseFancybox(feature, layer);
});
}
});
But I wish to group all photos (uuid’s in each feature) to be able to go to the next or previous.
I know there is a grouping-mechanism and Fancybox.bind but I do not understand how to use that in this situation, if possible.