放大弹出式窗口不起作用

Question

I want to implement the magnific popup on my website, I followed all the instructions in the documentation, but nothing happened.

here are the header files I included.

<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="magnific-popup/magnific-popup.css">

<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js" type="text/javascript"></script>

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

This is my initialization code.

<script src="js/magnificpopinit.js"></script> (at the end of index.html within body)

$(document).ready(function() {
$('.portfolio-img').magnificPopup({
    delegate: 'a',
    type:'image'
   });
});  

and my code is

<div class=" col-xs-offset-1"> 
   <div class=" twelve columns container">           
          <div data-anim-type="fadeInUp" class="setwidth25 animate fadeInUp">
                    <div class="box"> <a class=" portfolio-img"  href="Website/Community Service/Aug 15 Plantation/20840999_1763381930619812_5996646119960337765_n.jpg"><img alt="plantation" BORDER="0" src="Website/Community Service/Aug 15 Plantation/20840999_1763381930619812_5996646119960337765_n.jpg" height="200" width="200"> </a></div>
         </div>
         <div data-anim-type="fadeInUp" class=" setwidth25 animate fadeInUp">
                    <div class="box"> <a class="portfolio-img"  href="Website/Community Service/Aug 15 Plantation/20840999_1763381930619812_5996646119960337765_n.jpg"><img alt="plantation" src="Website/Community Service/Aug 15 Plantation/20841080_1763381967286475_679893694361630086_n.jpg" height="200" width="200"> </a></div>
         </div>
         <div data-anim-type="fadeInUp" class=" setwidth25 animate fadeInUp">
                    <div class="box"> <a class="portfolio-img" href="Website/Community Service/Aug 15 Plantation/20840999_1763381930619812_5996646119960337765_n.jpg"><img alt="plantation" src="Website/Community Service/Aug 15 Plantation/20914365_1763382237286448_3724536977546091967_n.jpg" height="200" width="200"> </a></div>
         </div>
         <div data-anim-type="fadeInUp" class=" setwidth25 animate fadeInUp">
                    <div class="box"> <a class="portfolio-img" href="Website/Community Service/Aug 15 Plantation/20840999_1763381930619812_5996646119960337765_n.jpg"><img alt="plantation" src="Website/Community Service/Aug 15 Plantation/20953405_1763381833953155_7689290877386847638_n.jpg" height="200" width="200"> </a></div>
         </div>
   </div>
</div>

Console shows no error related to magnific popup,yet it is not working. I searched many related articles but none of them worked. I'm banging my head with this for more than 6 hours. Is there any problem with my code. How do I make it work? Please help!!... Thanks in advance.

Answer 1

replace this block of code in your code. And make sure your jquery and js path is correct. you used multiple jquery and magnific js that's not necessary. remove it and try only two script file that i include here. i used it from cdn. It works here fine. Hope that will help you.

 $('.portfolio-img').magnificPopup({ type: 'image', closeOnContentClick: true, image: { verticalFit: false } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js"></script> 

Answer 2

Seems that you have not wrapped JavaScript code inside <script></script> tags:

<script src="js/magnificpopinit.js"></script> (at the end of index.html within body)

$(document).ready(function() {
$('.portfolio-img').magnificPopup({
    delegate: 'a',
    type:'image'
   });
});  

It probably should be:

<script src="js/magnificpopinit.js"></script> (at the end of index.html within body)

<script>
    $(document).ready(function() {
        $('.portfolio-img').magnificPopup({
            delegate: 'a',
            type:'image'
        });
    });  
</script>