Leaflet.Photo example

HTML

<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<script src="http://makinacorpus.github.io/Leaflet.Spin/spin.js/dist/spin.min.js"></script>
<script src="http://makinacorpus.github.io/Leaflet.Spin/leaflet.spin.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/leaflet.markercluster.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.css">
<script src="//rawgit.com/turban/Leaflet.Photo/gh-pages/Leaflet.Photo.js"></script>
<link rel="stylesheet" href="//rawgit.com/turban/Leaflet.Photo/gh-pages/Leaflet.Photo.css">
<div id="map"></div>

CSS

html,
body,
#map {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #333;
}

.infopop h4 {
  font: 14px/16px Arial, Helvetica, sans-serif;
  font-weight: bold;
  margin: 0 0 0px;
  color: #777;
}

JavaScript

// set center coordinates
var coords = [34.069, -118.293];
// set default zoom level
var zoomLevel = 12;
// initialize map
var map = L.map('map').setView(coords, zoomLevel);
// set source for map tiles
ATTR = '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
  '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a> | ' +
  '&copy; <a href="http://cartodb.com/attributions">CartoDB</a>';
CDB_URL = 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png';
// add tiles to map
L.tileLayer(CDB_URL, {
  attribution: ATTR
}).addTo(map);

var photos = [{
  "lat": 34.04555452,
  "lng": -118.3001509,
  "name": "C.H. Johnston, 1951",
  "url": "http://41.media.tumblr.com/8dd3cc5931650a6a772db77f6fad797b/tumblr_n5c7uw79Yn1tq6tdto1_400.jpg",
  "thumbnail": "http://40.media.tumblr.com/8dd3cc5931650a6a772db77f6fad797b/tumblr_n5c7uw79Yn1tq6tdto1_75sq.jpg"
}, {
  "lat": 34.0522683,
  "lng": -118.2698607,
  "name": "L.A. Paving Co., Inc., 1925",
  "url": "http://41.media.tumblr.com/83454d0e9cddfa5e9dcf2911ad9f803c/tumblr_n3q2xjrmvk1tq6tdto1_400.jpg",
  "thumbnail": "http://41.media.tumblr.com/83454d0e9cddfa5e9dcf2911ad9f803c/tumblr_n3q2xjrmvk1tq6tdto1_75sq.jpg"
}, {
  "lat": 34.06281904,
  "lng": -118.2809651,
  "name": "Buxton & Rosa, 1930",
  "url": "http://36.media.tumblr.com/e46918901ad4cc6547ea27233873e879/tumblr_n3q2pdzLXM1tq6tdto1_400.jpg",
  "thumbnail": "http://40.media.tumblr.com/e46918901ad4cc6547ea27233873e879/tumblr_n3q2pdzLXM1tq6tdto1_75sq.jpg"
}, {
  "lat": 34.06370117,
  "lng": -118.2967767,
  "name": "A. M. Concrete Inc., 1990",
  "url": "http://41.media.tumblr.com/634b3ebae1233626c427dbfc44b3261a/tumblr_n1m6xg3ik81tq6tdto1_400.jpg",
  "thumbnail": "http://41.media.tumblr.com/634b3ebae1233626c427dbfc44b3261a/tumblr_n1m6xg3ik81tq6tdto1_75sq.jpg"
}, {
  "lat": 34.05123715,
  "lng": -118.3195567,
  "name": "Atkinson–Spicer Co., 1926",
  "url":...