Mapbox with fancybox gallery

index.html

<div class="map-container">
  <div id='map'></div>
  <div id="info"></div>
</div>

mapbox-with-fancybox-gallery.markdown

Mapbox with fancybox gallery

A Pen by Olivier MJ on CodePen.

License.

script.js

var url = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/41294/map.geojson'; 

L.mapbox.accessToken = 'pk.eyJ1IjoicmFjaGVsZGVubmlzIiwiYSI6ImJaNWlaSDQifQ.f-xjpKNlTxWt0V12wlslIw';
var map = L.mapbox.map('map', 'racheldennis.ggg80i13').setView([50.4520018,-32.2077026], 3);

var featureLayer = L.mapbox.featureLayer().loadURL(url).addTo(map);
featureLayer.on('click', function(e) {

  map.panTo(e.layer.getLatLng());
  var feature = e.layer.feature;
  var images = feature.properties.gallery;
  var slideshowContent = '';

  for(var i = 0; i < images.length; i++) {
    img = images[i];

    slideshowContent += '<div class="image">' +
      '<a href="' + img[0] + '" class="fancybox" data-fancybox-group="gallery"><img src="' + img[0] + '" /></a>' +
      '</div>';
  }

  var info =  '<div>' + 
      '<h1>' + feature.properties.title  + '</h1>' +
      '<img src="' + feature.properties.head + '" />' +
      '<p>' + feature.properties.description + '</p>' +
      '<div class="slideshow">' +
      slideshowContent +
      '</div>' +
      '</div>';

  document.getElementById('info').innerHTML = info;

});

featureLayer.on('ready', function() {
    map.fitBounds(featureLayer.getBounds());
});

$(document).ready(function() {

  // Set custom style, close if clicked, change title type and overlay color
  $(".fancybox").fancybox({
    wrapCSS     : 'fancybox-custom',
    closeClick  : true,

    openEffect  : 'fade',
    closeEffect : 'fade',
    openSpeed   : 'slow',
    closeSpeed  : 'slow',

    helpers : {
      title : {
        type : 'inside',
      },
      overlay : {
        css : {
          'background' : 'rgba(255,255,255,0.90)',
        }
      }
    }
  });

});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.js"></script>
<script src="http://www2.hull.ac.uk/pws4/js/newJS/jquery.fancybox.pack.js"></script>

style.css

body {padding:30px;}

.map-container {width:700px; display:block; margin:0 auto;}
#map { position:relative; top:0; bottom:0; left:0; height: 400px; border:1px solid #ccc;}
#info {position:relative; width: 94.2%; height: 10%; background:#333; color: #fff; padding:20px; float: right; z-index:99;}
h1 {margin-top:0;}
#map img, #info img {border:none; padding:0; margin:0;width: 100%;}
img[src=""] {display:none;}
            
.slideshow .image {position: relative; width:150px; height:70px; margin:1%; float:left; overflow:hidden;}
.slideshow img {position: absolute; max-width:100%; height:auto; top:-25%; /*left:-15%;*/}

.cycle {display:none;}

.leaflet-popup-pane {display:none;}
.leaflet-marker-icon:hover {cursor:pointer;}

.fancybox-custom .fancybox-skin {box-shadow: 0 0 0 #222;background: transparent;}
.fancybox-custom .fancybox-next {right: 0;}
.fancybox-custom .fancybox-prev {left: 0;}
.fancybox-custom .fancybox-image {border: 1px solid #444;}

styles

<link href="https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.css" rel="stylesheet" />
<link href="http://www2.hull.ac.uk/pws4/js/newJS/jquery.fancybox.css" rel="stylesheet" />