Javascript location for multple galleries in magnificPopup

Question

Little bit new here but I searched around for this specifically and couldn't find an answer.

I'm currently trying to get multiple galleries on a single page with the magnificPopUp plugin, and I know this has been discussed (Multiple Galleries with Magnific Popup)

$('.gallery').each(function() { // the containers for all your galleries
$(this).magnificPopup({
    delegate: 'a', // the selector for gallery item
    type: 'image',
    gallery: {
      enabled:true
    }
});
});

This might seem like a dumb question, but where do I place that JavaScript code? in the magnific-popup.js file? Or do I make a new one and call it? I'm relatively new with JS and I'm working on it, but I've tried placing it in different locations and get a JavaScript error. Any ideas?

score 0 · Answer 1 · answered May 22 '17 at 23:32

0

you can put in the same page between <script></script> tag before closing </body> tag

answered May 22 '17 at 23:32

Oleg Markoff

321
2
7

Thanks for the reply but I'm getting an error " $ is not a function " when I try that also. It's a similar message to what I was getting when I had it in other places inside the js file itself. – DMo May 23 '17 at 16:22

score 0 · Answer 2 · answered May 25 '17 at 18:08

Call them from the same page where you have your galleries. Make sure to include jQuery and MagnificPopup.js BEFORE the Magnific Popup initialization script. See sequence below.

They can be put in the <head></head> of your HTML or just before the ending </body> tag. As long as they follow the sequence. Also include $(document).ready() around your script.

<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<!-- Magnific Popup core JS file -->
<script src="magnific-popup/jquery.magnific-popup.js"></script>

<!-- Popup initialization code should be executed after document ready -->
<script type="text/javascript">
 $(document).ready(function() {
  $('.gallery').each(function() { // the containers for all your galleries
  $(this).magnificPopup({
    delegate: 'a', // the selector for gallery item
    type: 'image',
    gallery: {
      enabled:true
    }
  });
 });
});
</script>

Javascript location for multple galleries in magnificPopup

2 Answers2