I Can't Get Magnific Popup To Work (js noob)

Question

I Can't Get Magnific Popup To Work (js noob)

Hey guys, I hate asking questions like this, but I've run out of options. I followed the documentation, as well as several Youtube videos and StackOverflow threads, but I'm obviously missing something. I tried the initializing scripts several people recommended, but that didn't help me either. Currently, when I click the picture, the href works (it takes me to a page with the picture) but Magnific doesn't.

<div class="container">
    <a id="homegallery1" href="http://placehold.it/250x250"><img src="http://placehold.it/150x150" class="magnificpic" /></a>
</div>

CSS Link:

<link href="css/magnific-popup.css" rel="stylesheet">

JS Links:

/* JS */
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/magnific-popup.js"></script>

Initializing Script:

<!------------------------------
 Script To Call Gallery On Click
-------------------------------->
<script>
    // Example with multiple objects
    $('#homegallery1').magnificPopup({
    items: [
      {
        src: 'http://placehold.it/350x250'
      },
      {
        src: 'http://placehold.it/250x350'
      },
      {
        src: 'http://placehold.it/350x350'
      },
    ],
    gallery: {
      enabled: true
    },
    type: 'image' // this is default type
});
</script>

jsFiddle: http://jsfiddle.net/CSS_Apprentice/4coo0mxn/3/

Answer 1

The problem is when you mix http and https protocols when adding javascript and css files. Also JSFIDDLE seems to have a problem with Chrome browser. Please see https://github.com/maksa9/magnific-popup/. Working in my Chrome.

Answer 2

It seems your script is missing to wait the document ready part.

 $(document).ready(function(){

    // jQuery methods go here...
    // try placing your ('#homegallery1').magnificPopup in here

 }); 

http://www.w3schools.com/jquery/jquery_syntax.asp