SightMap in Wordpress Fancybox

This code demonstrates how to embed a SightMap in a Wordpress page, using the fancyBox modal package.

by Jacob Pearlstein

HTML

<!-- The following HTML should include a <script> tag to import the jQuery library, if it is not already available.  In Wordpress, jQuery should already be imported by default, so this step is not shown here. -->

<!-- This code imports the fancyBox files. -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js"></script>

<!-- The actual page contents are just a title and a link that leads nowhere. The fancyBox will be attached to the latter via the associated JavaScript. -->

<h2>This is a Page Title</h2>

<p>
This is body text which tells potential renters all about the marvelous benefits of choosing to rent an apartment in one's building.
</p>

<a href="javascript:void(0);" id="fancybox-test-link">There Be Moste Fancye Boxes Here...</a>

CSS

body {
  background-color: #eff8ff;
}

h2 {
  text-align: center;
}

JavaScript

/* Please note that in an actual Wordpress page/file, the following may have to be encapsulated by an HTML <script> tag.*/

jQuery(function($) {
	/* The link destination and basic fancybox setting attribute must be set manually, 
  or Fancybox will not work on Wordpress.  Note that for other types of web pages, 
  all settings could be set within the fancybox() function call.*/
  
	$('a#fancybox-test-link').attr('href', 'javascript:void(0);');
	$('a#fancybox-test-link').attr('data-fancybox', 'iframe');
	$('a#fancybox-test-link').attr('data-src', 'https://sightmap.com/embed/e8ywkqrqwlx');
	$('a#fancybox-test-link').attr('data-type', 'iframe');
  
  /* Within Wordpress, the fancybox() function can be used to add loading behaviours, 
  and to modify iframe settings as desired. The actual Fancybox settings are set up 
  manually, as shown above.*/
	$('a#fancybox-test-link').fancybox({
  	
  	/*This sets the Fancybox to hide its native infobar and navigational controls 
  	before loading.  As the SightMap is presumably not meant to be part of a slideshow,
  	these controls create unnecessary visual clutter. */
		beforeLoad: function(instance, current){
			$('.fancybox-infobar').css({display: 'none'});
			$('.fancybox-navigation').css({display: 'none'});
		},
    
    /*Some iframe settings that stop scrolling and preloading.*/
		iframe : {
			preload: false,
			scrolling: false,
			css: {
				// Optional iframe CSS can be placed here.  None is required for our purposes.
			}
		}
	});
});