Using fancyBox for Map Images

This is a quick and dirty example of how to integrate the fancyBox lightbox plugin for images displayed by the map.

First add the fancyBox CSS and JavaScript to your page (requires jQuery):

<link href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

Add this JavaScript to your page:

jQuery(document).on('hover', '.waymark-map .waymark-info-image_large_url a', function () {
  jQuery(this).attr('data-fancybox', 'gallery');
});

Adding this to your page will produce the following:


Parent page: