Can't get magnific popup to work, two javascript errors

Question

I am trying to make a lightbox gallery and have used the example source code.

Here is the documentation I read over: http://dimsemenov.com/plugins/magnific-popup/documentation.html

Uncaught TypeError: undefined is not a function

Uncaught ReferenceError: $ is not defined 

I am not sure what the errors mean or what to do with them.

In a video tutorial I watched, they said something about a jquery conflict being a potential problem. On a different page of the website, I used a Kwicks sliding menu (which also used jquery). That's the only thing I can think of.

I would really appreciate any help you would be able to give me!

Thank you! There are no more errors, but now I need to make the hovering on the image work with the zooming in magnifying cursor.

I have made the hovering work, now I need to make the zooming in magnifying cursor work. I have attached a page of what I what the cursor to be when it hovers.

Example: http://dimsemenov.com/plugins/magnific-popup/

I have figured out the zoom cursor! Thanks for all the help!

Answer 1

The documentation of the plugin Magnific popup you are using suggests -

Including files

<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

<!-- Magnific Popup core JS file -->
<script src="magnific-popup/jquery.magnific-popup.js"></script>

Remember : You need to include jQuery file reference, for the plugin to work; rather every jQuery plugin. And in the specified order. This is the sole reason behind $ not defined and undefined in not a function.