壮大なポップアップが動作しない

Question

私のウェブサイトで偉大なポップアップを実装したいが、ドキュメントのすべての指示に従ったが、何も起こらなかった。

は、ここに含まれるヘッダーファイルです。

<!-- 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> 

これは私の初期化コードです。

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

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

と私のコードは

<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> 

あるコンソールはmagnificポップアップに関連したエラーを示していない、まだそれが機能していません。私は多くの関連記事を検索しましたが、どれも働いていませんでした。私は6時間以上頭を叩いている。 私のコードに問題はありますか？私はそれをどのように機能させるのですか？助けてください!! ...事前に感謝します。

Answer 1

コード内のこのコードブロックを置き換えます。 jqueryとjsのパスが正しいことを確認してください。必要ない複数のjqueryとmagnificiを使用しました。それを削除し、私がここに含む2つのスクリプトファイルだけを試してみてください。私はcdnから使いました。ここでうまくいく。それがあなたを助けることを願っています。

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

<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

あなたは<script></script>タグ内のJavaScriptコードをラップしていないようだ：

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

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

それはおそらく次のようになります。すべての

<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>