CODEWITHSUNDEEP
ruby-on-railsmagnific-popup
aman
aman

Reputation: 374

Magnific popup doesn't display after navigating to other page

I'm running into a strange problem with Magnific popup. I have two separate pages with links to the same Magnific-enabled popups.

  1. Click a magnific-enabled link on page 1--- popup comes up. Closing the popup and clicking again works fine too.
  2. Click a link on page 1 to go to page 2.
  3. Click a mangific-enabled link on page 2--- popup doesn't come up.
  4. Reload the browser for page 2.
  5. Click a magnific-enabled link on page 2--- popup comes up. Closing the popup and clicking again works fine too.
  6. Click a link on page 2 to go to page 1.
  7. Click a magnific-enabled link on page 1--- popup doesn't come up.
  8. Reload the browser for page 1.
  9. Click a magnific-enabled link on page 1--- popup comes up. Closing the popup and clicking again works fine too.
  10. Repeat from step 2.

I have the fixedContentPos option set to true so the background doesn't scroll when the popup is up. In every instance I've outlined above where the popup doesn't come up, the background doesn't scroll as if the popup were there. I've looked in inspector, and see the overflow:hidden attribute attached that's stopping the background scroll. However, the popup DOM elements are not there.

This is a Rails site btw. I tested out the same Javascript code on a static version, and it works as intended, so I'm wondering if this has something to do with how Rails handles routing?

Any help would be appreciated!

Upvotes: 1

Views: 316

Answers (1)

Nicolas Maloeuvre
Nicolas Maloeuvre

Reputation: 3169

I guess you have Turbolinks enabled (it makes pages load faster by only replacing the content but it's not triggering $(document).ready() )

You should bind your image links like this :

$(document).on('ready page:load', function(event) {
  $('.test-popup-link').magnificPopup({ ...});
});

Or disable turbolinks

Upvotes: 1

Related Questions