Unable to Initialize Magnific Popup LIghtbox

Question

I'm trying to use the Magnific Popup plug in my website, but I can't seem to be able to initialize it. I've added the necessary mark-up classes, CSS, initialization code, and referenced the JS and CSS files, but no luck.

In my site, I'm not calling jQuery again since it's included with Bootstrap. My browser console says Uncaught TypeError: $(...).magnificPopup is not a function.

Code:

<div class="container-fluid">
        <div class="row no-gutter">
            <div class="col-lg-4 col-sm-6">
                <a href="#test-popup" class="portfolio-box open-popup-link">
                    <img src="img/portfolio/1.jpg" class="img-responsive" alt="">
                    <div class="portfolio-box-caption">
                        <div class="portfolio-box-caption-content">
                            <div class="project-name">
                                Title
                            </div>
                            <div class="project-category text-faded">
                                Click to View
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div id="test-popup" class="white-popup mfp-hide">
                Popup content
            </div>
        </div>
</div>

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

Fiddle: http://jsfiddle.net/mw6ahLzz/1/

Any help would be greatly appreciated!

Answer 1

You have to initialize the jQuery library before any Js library,

so

First comes jQuery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Then comes magnific popup library

<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.magnific-popup/0.9.9/magnific-popup.css">
<script src="//cdn.jsdelivr.net/jquery.magnific-popup/0.9.9/jquery.magnific-popup.min.js"></script>

Initialize the pop-up script and make it Dom-ready

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

HTML

<div class="container-fluid">
    <div class="row no-gutter">
        <div class="col-lg-4 col-sm-6">
            <a href="#test-popup" class="portfolio-box open-popup-link">
                <img src="img/portfolio/1.jpg" class="img-responsive" alt="">
                <div class="portfolio-box-caption">
                    <div class="portfolio-box-caption-content">
                        <div class="project-name">
                            Title
                        </div>
                        <div class="project-category text-faded">
                            Click to View
                        </div>
                    </div>
                </div>
            </a>
        </div>
        <div id="test-popup" class="white-popup mfp-hide">
            Popup content
        </div>
    </div>
</div>

Fiddle