0

I'm trying to create a button that once clicked, opens up a Vimeo video in lightbox. I've found Magnific Popup and am trying to implement this into a Squarespace site using a Code Block.

I am receiving an error in the console that states 'Uncaught ReferenceError: $ is not defined'

I currently have this code together to execute the button:

<script>
$(document).ready(function() {
  $('.open-popup-link').magnificPopup({
    type:'inline',
    midClick: true
  });
});
</script>

<!-- View Demo Button -->
<a href="#demo-popup" class="open-popup-link view-demo">View Demo</a>

<!-- Popup itself -->
<div id="demo-popup" class="white-popup mfp-hide">
  Vimeo video goes here
</div>

I also have the two JS files loading in the footer as well:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://website.com/s/magnific-popup.js"></script>

I'm not sure what's causing the issue, any help would be appreciated!

user3370902
  • 4,803
  • 3
  • 14
  • 14
  • possible duplicate of [Uncaught ReferenceError: $ is not defined?](http://stackoverflow.com/questions/2075337/uncaught-referenceerror-is-not-defined) – GabrielOshiro Apr 30 '15 at 18:53
  • 1
    By the looks of that error, why don't you try and put the calling of the JQuery script in the header and Have it load and then call, becuase at the moment in the body you referenceing JQuery and it hasn't been loaded yet – TrojanMorse Apr 30 '15 at 18:59
  • That fixed it! Thank you very much. I thought if I had $(document).ready, it would execute the JS for the button once the DOM was loaded completely... – user3370902 Apr 30 '15 at 19:03

0 Answers0