Reputation: 939
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/
Upvotes: 1
Views: 674
Reputation: 4652
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.
Upvotes: 0
Reputation: 1953
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
Upvotes: 3