-3

I am trying to open a popup when user click on link using Magnifier PopUp but its not working. files are in correct order but it's not working. My console says:

Uncaught TypeError: window.$(...).magnificPopup is not a function

Here's my code

<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">
</head>

<body>

<a class="hello" href="imgs/work/1.jpg">clcik here to popup</a>
<script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>
<script type="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<script>

$('.hello').magnificPopup({
    type: "image" // <== comma shouldn't be here since there is nothing to initialize after this
});
</script>
</body>
</html>
simonalexander2005
  • 4,338
  • 4
  • 48
  • 92
Programming_lover
  • 11
  • 4

1 Answers1

2

Not all of you filepaths are correct - you are using \ instead of /

So this -

<a class="hello" href="imgs\work\1.jpg">clcik here to popup</a>

Should be -

<a class="hello" href="imgs/work/1.jpg">clcik here to popup</a>

And this -

<script src="js\jquery.js"></script>

Should be -

<script src="js/jquery.js"></script>

EDIT: Upon reading the documentation (following a quick Google search), it appears that you missed the step on Initializing popup

You need to add this:-

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});
ScottieG
  • 318
  • 2
  • 16