CODEWITHSUNDEEP
javascriptjquerypopupinlinemagnific-popup
user2812043
user2812043

Reputation: 31

Magnific Popup not showing

When I set up my test document to use an 'inline' Magnific Popup I click the link/button, and the URL of the page changes, but nothing actually appears.

I've copied and pasted directly from the original demo, I've included the jQuery library before the after Magnific's .js. I've tried swapping initialization codes. I've honestly lost track. I also can't get my debugger in Chrome to open properly, but what I gathered was that I was missing a closing } but when I added it things only broke further.

I also made a JSFiddle despite not really knowing how to use it: https://jsfiddle.net/3b15w3ek/6/

$(document).ready(function() {
// Example 1: From an element in DOM
$('.open-popup-link').magnificPopup({
    type:'inline',
    midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});

Upvotes: 3

Views: 1798

Answers (2)

Stanislav Agapov
Stanislav Agapov

Reputation: 956

You didn't close the function (missing last });):

$(document).ready(function() {
    // Example 1: From an element in DOM
    $('.open-popup-link').magnificPopup({
        type:'inline',
        midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
    });
});

In order this snippet to work in JSFiddle, you also need to set "Framework & Extensions" = "jQuery 1.9.1" (or later) in Javascript settings. Otherwise $ symbol is not found in Magnific gallery...

Upvotes: 0

vijayP
vijayP

Reputation: 11512

I checked the fiddle and found that URL for jQuery1.9.1 was wrong and corrected it. See the updated fiddle:

https://jsfiddle.net/3b15w3ek/7/

And the updated code is:

$(document).ready(function() {
  // Example 1: From an element in DOM
  $('.open-popup-link').magnificPopup({
    type: 'inline',
    midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
  });
});

Upvotes: 1

Related Questions