SightMap in fancyBox v3.5

This is a demonstration of a SightMap embedded in a fancyBox modal window, using a simple jQuery fancybox() call. Sadly, this does not work in Wordpress, but it may work for other sites.

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. -->

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>

<!-- This code imports the fancyBox files. -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/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 data-fancybox data-type="iframe" data-src="https://sightmap.com/embed/5rxwj9e0p1e" href="javascript:;" id="fancybox-test-link">There Be Moste Fancye Boxes Here...</a>

CSS

body {
  background-color: #eff8ff;
}

h2 {
  text-align: center;
}

JavaScript

// This is so easy that you can skip straight to the HTML tab!