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="" rel="stylesheet">
<script src=""></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: