SightMap in Wordpress Fancybox on Mobile

This code demonstrates how to embed a SightMap in a Wordpress page, using the fancyBox modal package. This version displays a modal activation link on screens small enough to be mobile, but switches to an inline embed on larger screens. Note that the JavaScript is still formatted as it would be in a Wordpress CMS.

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>

<div id="sm-inline-div">
  <iframe width="100%" height="100%" src="https://sightmap.com/embed/e8ywkqrqwlx" frameborder="0" id="sightmap-inline"></iframe>
</div>

CSS

body {
  background-color: #eff8ff;
}

h2 {
  text-align: center;
}

div#sm-inline-div {
  display: auto;
  padding-left: 2em;
  padding-right: 2em;
  width: auto;
  height: 500px;
}

@media only screen and (min-width:768px) {
  /* Desktop styling: hide the fancybox link, and show the inline embed. */
  div#sm-inline-div {
    display: auto;
  }
  a#fancybox-test-link {
    display: none;
  }
}

@media only screen and (max-width:767px) {
  /* Mobile-only styling: show the fancybox link, and hide the inline embed. */
  div#sm-inline-div {
    display: none;
  }
  a#fancybox-test-link {
    display: auto;
  }
}

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.
      }
    }
  });
});