Marker Tooltips with Image Slideshow

Adding a custom slideshow to a tooltip
Select all
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Marker Tooltips with Image Slideshow</title>
  
  <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
  <script src='//api.tiles.mapbox.com/mapbox.js/v1.5.0/mapbox.js'></script>
  <link href='//api.tiles.mapbox.com/mapbox.js/v1.5.0/mapbox.css' rel='stylesheet' />
  
  <style>
    body { margin:0; padding:0; }
    #map { position:absolute; top:0; bottom:0; width:100%; }
  </style>
</head>
<body>
<style>
.popup {
    text-align: center;
}
.popup .slideshow {
    width: 100%;
}
.popup .slideshow .image {
    display: none;
}
.popup .slideshow .active {
    display: block;
}
.popup .slideshow img {
    width: 100%;
}
.popup .slideshow .caption {
    background: #eee;
    padding: 8px;
}
.popup .cycle {
    height: 30px;
    margin-top: 5px;
    padding-top: 5px;
}
.popup .cycle a.prev {
    float: left;
}
.popup .cycle a.next {
    float: right;
}
</style>

<div id='map'></div>

<script>
var map = L.mapbox.map('map', 'examples.map-9ijuk24y');

var geoJson = [{
    type: 'Feature',
    "geometry": { "type": "Point", "coordinates": [-77.03, 38.90]},
    "properties": {
        'title': 'Washington, D.C.',

        // Store the image url and caption in an array
        'images': [
          ['https://i.imgur.com/O6QEpBs.jpg','The U.S. Capitol after the burning of Washington during the War of 1812'],
          ['https://i.imgur.com/xND1MND.jpg','Ford\'s Theatre in the 19th century, site of the 1865 assassination of President Lincoln'],
          ['https://i.imgur.com/EKJmqui.jpg','The National Cherry Blossom Festival is celebrated around the city each spring.']
        ]
    }
}, {
    type: 'Feature',
    "geometry": { "type": "Point", "coordinates": [-74.00, 40.71]},
    "properties": {
        'title': 'New York City',
        'images': [
          ['https://i.imgur.com/exemdwr.png','Peter Minuit is credited with the purchase of the island of Manhattan in 1626.'],
          ['https://i.imgur.com/LHNDBpf.jpg','During the mid-19th Century, Broadway was extended the length of Manhattan.'],
          ['https://i.imgur.com/Pk3DYH1.jpg','Times Square has the highest annual attendance rate of any tourist attraction in the world.']
        ]

    }
}];

// Add custom popup html to each marker
map.markerLayer.on('layeradd', function(e) {
    var marker = e.layer;
    var feature = marker.feature;
    var images = feature.properties.images
    var slideshowContent = '';

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

        slideshowContent += '<div class="image' + (i === 0 ? ' active' : '') + '">' +
                              '<img src="' + img[0] + '" />' +
                              '<div class="caption">' + img[1] + '</div>' +
                            '</div>';
    }

    // Create custom popup content
    var popupContent =  '<div id="' + feature.properties.id + '" class="popup">' +
                            '<h2>' + feature.properties.title + '</h2>' +
                            '<div class="slideshow">' +
                                slideshowContent +
                            '</div>' +
                            '<div class="cycle">' +
                                '<a href="#" class="prev" onclick="return moveSlide(\'prev\')">&laquo; Previous</a>' +
                                '<a href="#" class="next" onclick="return moveSlide(\'next\')">Next &raquo;</a>' +
                            '</div>'
                        '</div>';

    // http://leafletjs.com/reference.html#popup
    marker.bindPopup(popupContent,{
        closeButton: false,
        minWidth: 320
    });
});

// Add features to the map
map.markerLayer.setGeoJSON(geoJson);

// This example uses jQuery to make selecting items in the slideshow easier.
// Download it from http://jquery.com
function moveSlide(direction) {
    var $slideshow = $('.slideshow'),
        totalSlides = $slideshow.children().length;

    if (direction === 'prev') {
        var $newSlide = $slideshow.find('.active').prev();
        if ($newSlide.index() < 0) {
            $newSlide = $('.image').last();
        }
    } else {
        var $newSlide = $slideshow.find('.active').next();
        if ($newSlide.index() < 0) {
            $newSlide = $('.image').first();
        }
    }

    $slideshow.find('.active').removeClass('active').hide();
    $newSlide.addClass('active').show();
    return false;
}

map.setView([40, -75], 6);
</script>
The code and documentation to mapbox.js is hosted on GitHub where you can contribute changes and improvements.