Click on Leaflet marker to open image in fancybox

Question

I am having some problems getting a fancybox gallery to load correctly when clicking on a marker within a leaflet map. I have got to the stage where I can trigger the event, but I am stuck with only getting a fancybox error message within the frame. I ran through the same workflow today with google maps api and got the same result, so there must be something I am doing wrong in calling fancybox. I have searched and searched but can't find an answer anywhere detailing my specific issue, which as I am new to JavaScript is surely a user error. My code is as follows:

//Array of locations
var locations = [
    ['Big Ben', 51.500625, -0.124624, 2, 'www.image1url.com/image1.jpg'],
    ['Tower Bridge', 51.506776, -0.074603, 1, 'www.image2url.com/image2.jpg'],
    ['London Eye', 51.503325, -0.119543, 3, 'www.image3url.com/image3.jpg']
];


//Calling the map
var map = L.map('map').setView([51.508529, -0.109949], 14);
mapLink =
    '<a href="http://openstreetmap.org">OpenStreetMap</a>';
L.tileLayer(
    'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; ' + mapLink + ' Contributors',
        maxZoom: 18,
    }).addTo(map);

//Looping through the array to create the markers
for (i = 0; i < locations.length; i++) {
    marker = new L.marker([locations[i][1], locations[i][2]], {
            title: (locations[i][0]),
        })
        .addTo(map)
        .on('click', function() {
            $.fancybox({
                href: locations[4],
                width: 1000,
                maxHeight: 666,
                fitToView: true,
                autoSize: false,
                type: 'iframe',
                padding: 0,
                openEffect: 'elastic',
                openSpeed: 150,
                aspectRatio: true,
                closeEffect: 'elastic',
                closeSpeed: 150,
                closeClick: true,
                iframe: {
                    scrolling: 'no'
                },
                preload: true
            });
        });
}

Thanks in advance for any help

EDIT I've added a JSFiddle here: Fancybox on Leaflet Marker

Answer 1

Most probably, your error comes from this line of code:

href: locations[4]

The links are located in a nested array, and to access them you'll have to use:

href: locations[i][4]

UPDATE

OK, based on your JSFiddle, I've got a solution. You'll have to create a layer group and store the markers in it. Then, to access the 4th property of the locations array, you'll have to identify the position of the marker inside the layerGroup array.

//create a layergroup to store the markers inside it
var group = L.layerGroup().addTo(map)   

for (i = 0; i < locations.length; i++) {
        marker = new L.marker([locations[i][1], locations[i][2]], {
                title: (locations[i][0]),
                opacity: 1
            })
            .addTo(group)    //add the markers to the group
            marker.on('click', function() {
                markerArray = group.getLayers();      //get an array with all the markers

                //see which marker from the group was clicked and store the value for later use 
                position = markerArray.indexOf(group.getLayer(this._leaflet_id));
                $.fancybox({
                    //acccess the locations array using the previously stored value
                    href: locations[position][4],
                    width: 1000,
                    maxHeight: 666,
                    fitToView: true,
                    autoSize: false,
                    type: 'iframe',
                    padding: 0,
                    openEffect: 'elastic',
                    openSpeed: 150,
                    aspectRatio: true,
                    closeEffect: 'elastic',
                    closeSpeed: 150,
                    closeClick: true,
                    iframe: {
                        scrolling: 'no'
                    },
                    preload: true
                });
            });
    }

Here's an updated JSFiddle: http://jsfiddle.net/pufanalexandru/8mLxm820/2/