Cluster Markers on leaflet example

I am trying to make instagram photo map like with leaflet and im in a pretty good way until now.

You can see my example here

Here i load my own photos as markers and im trying to make it work with cluster But every example that i found was with a certain cluster icon.

To be more accurate im trying to do something like this http://turban.github.io/Leaflet.Instagram/examples/fancybox-cluster.html

So above the clustered images to put the number.

My code until now is this

<!DOCTYPE html>
<html>
<head>
    <title>Leaflet Quick Start Guide Example</title>
    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
    <style>
        body {
            padding: 0;
            margin: 0;
        }
        html, body, #map {
            height: 100%;
        }
    </style>

</head>
<body>
    <div id="map"></div>

    <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
    <script>
        var map = L.map('map').setView([51.5, -0.09], 4);

        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        var LeafIcon = L.Icon.extend({
            options: {
                iconSize:     [60, 65],
                iconAnchor:   [22, 94],
                popupAnchor:  [-3, -76]
            }
        });

        var greenIcon = new LeafIcon({iconUrl: 'docs/images/1.jpg'}),
            redIcon = new LeafIcon({iconUrl: 'docs/images/2.jpg'}), 
            orangeIcon = new LeafIcon({iconUrl: 'docs/images/3.jpg'});

        L.marker([51.5, -0.09], {icon: greenIcon}).bindPopup(" <img width=250 height:450 src=http://i.imgur.com/ujr7OPC.jpg /> <br /> ").addTo(map);
        L.marker([51.495, -0.083], {icon: redIcon}).bindPopup("I am a red leaf.").addTo(map);
        L.marker([51.49, -0.1], {icon: orangeIcon}).bindPopup("I am an orange leaf.").addTo(map);

    </script>
</body>
</html>

EDIT 1. So the example uses this line to load the images.

L.instagram.cluster('http://turban.cartodb.com/api/v2/sql?q=SELECT * FROM instagram WHERE the_geom %26%26 ST_SetSRID(ST_MakeBox2D(ST_Point(5.727, 59.124), ST_Point(5.924, 59.305)), 4326)', {
        featureGroup: L.instagram.fancybox
    }
    ).addTo(map);

And i use this code to load mine.

var LeafIcon = L.Icon.extend({
            options: {
                iconSize:     [60, 65],
                iconAnchor:   [22, 94],
                popupAnchor:  [-3, -76]
            }
        });

        var greenIcon = new LeafIcon({iconUrl: 'docs/images/1.jpg'}),
            redIcon = new LeafIcon({iconUrl: 'docs/images/2.jpg'}), 
            orangeIcon = new LeafIcon({iconUrl: 'docs/images/3.jpg'});

        L.marker([51.5, -0.09], {icon: greenIcon}).bindPopup(" <img width=250 height:450 src=http://i.imgur.com/ujr7OPC.jpg /> <br /> ").addTo(map);
        L.marker([51.495, -0.083], {icon: redIcon}).bindPopup("I am a red leaf.").addTo(map);
        L.marker([51.49, -0.1], {icon: orangeIcon}).bindPopup("I am an orange leaf.").addTo(map);

Is there any way to combine my own photos to L.instagram.cluster ???

Can someone help me with any example about it please?

Thanks a lot for your time.

Solution

The Leaflet.Photo plugin is agnostic as to how you populate the photos data.

To make the plugin more versatile, it doesn't deal with AJAX loading or image presentation except the thumbnails on the map. Use your AJAX loader of choice, and simply pass on an array of photo objects to the plugin.

In the Picasa example provided on the repo, the author uses reqwest and a JSONP communication, but you are free to implement any communication protocol you like, or even embed / hard code your photos data into your script. E.g. you could place your data in an external JSON file and load it with jQuery getJSON.

The only requirement is to build an array of objects that have at least the following properties: lat, lon and thumbnail.

So at the minimum you would have something like:

// Prepare the Photo Layer (with clustering).
var photoLayer = L.photo.cluster();

// Prepare the photos data. Use whatever method to build these objects.
var photos = [
    {
        lat: 51.5,
        lng: -0.09,
        thumbnail: 'http://tfeditor.com/map/docs/images/1.jpg'
    },
    {
        lat: 51.495,
        lng: -0.083,
        thumbnail: 'http://tfeditor.com/map/docs/images/2.jpg'
    },
    {
        lat: 51.49,
        lng: -0.1,
        thumbnail: 'http://tfeditor.com/map/docs/images/3.jpg'
    }
];

// Finally add photos into Photo Layer and add to map!
photoLayer.add(photos).addTo(map);

Of course you would probably like to have more interactivity, typically a click event on the thumbnail markers to open a popup with full size photo. See the repo example or the below jsfiddle.

Demo: http://jsfiddle.net/ve2huzxw/38/