我一直在尝试的任何方法似乎都无法让 Magnific Popup 正常工作答案

【问题标题】：Nothing I've been trying seems to get the Magnific Popup to work properly我一直在尝试的任何方法似乎都无法让 Magnific Popup 正常工作
【发布时间】：2014-08-06 06:26:45
【问题描述】：

我花了很多时间试图让这个 Magnific Popup 东西在我的网站上本地工作，它一直将我链接到一个单独的图像页面，而不是获得我想要的弹出查看器。

有谁知道我的错误在哪里以及如何让它发挥作用？

我是 jQuery 的新手，所以我对为什么这段代码不起作用一无所知。

编辑：我需要下载什么东西才能让它工作吗？

所有三个源代码都在我的文件夹中，我确实检查了它们是否位于正确的链接中，但我仍然没有收到任何 Magnific 弹出窗口。

这是我的文档中的内容：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="website.css" rel="stylesheet" type="text/css">
<script src="my_jquery.js"></script>
<title> Name </title>



        <link href="magnific-popup.css" rel="stylesheet" type="text/css">
        <link href="singleimage.css" rel="stylesheet" type="text/css">







 </head>
  <body>

<div id="navigation">
    <div id="header_left"><span id="header_text1">Name</span> </div>

    <div id="header_right"> <span id="header_text2">
    <a href="#home">Link</a>
    <a href="#name">Link</a>
    <a href="#name">Link</a>
    <a href="#name">Link</a>
    <a href="#name">Link</a> 
     </span> </div>

</div>






<a name="graphicdesign">
<div class="bg-image2">

    <div class="test1">
        <div class="test2"> <h1>Page Title</h1>


<a class="image-popup-vertical-fit" href="cat_b.jpg" title="Caption. Can be aligned it to any side and contain any HTML.">
<img src="cat_s.jpg " width="75" height="75">
</a>
<a class="image-popup-fit-width" href="http://farm9.staticflickr.com/8379/8588290361_ecf8c27021_b.jpg" title="This image fits only horizontally.">
<img src="http://farm9.staticflickr.com/8379/8588290361_ecf8c27021_s.jpg" width="75" height="75">
</a>
<a class="image-popup-no-margins" href="http://farm4.staticflickr.com/3721/9207329484_ba28755ec4_o.jpg">
<img src="http://farm4.staticflickr.com/3721/9207329484_ba28755ec4_o.jpg" width="107" height="75">
</a>


    <script>
    $(document).ready(function() {
    $('.image-link').magnificPopup({type:'image'});
    });






    $(document).ready(function() {

$('.image-popup-vertical-fit').magnificPopup({
    type: 'image',
    closeOnContentClick: true,
    mainClass: 'mfp-img-mobile',
    image: {
        verticalFit: true
    }

});

$('.image-popup-fit-width').magnificPopup({
    type: 'image',
    closeOnContentClick: true,
    image: {
        verticalFit: false
    }
});

$('.image-popup-no-margins').magnificPopup({
    type: 'image',
    closeOnContentClick: true,
    closeBtnInside: false,
    fixedContentPos: true,
    mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from left and right side
    image: {
        verticalFit: true
    },
    zoom: {
        enabled: true,
        duration: 300 // don't foget to change the duration also in CSS
    } }); });
    </script>



    <script src="jquery.magnific-popup.min.js"></script> 
    <script src="jquery.magnific-popup.js"></script>
    <!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->



        </div>
    </div>
</div> </a>

我从 Magnific Popup 粘贴的代码中遇到了三个错误。我没有以任何方式更改代码，但最终还是出现了错误。我不确定我是否应该以某种方式改变它。我不知道该怎么办。

Uncaught ReferenceError: $ is not defined index_01.html:73

以下是该页面第 75 行附近的一些代码：

    <script>
    $(document).ready(function() {
    $('.image-link').magnificPopup({type:'image'});
    });

Uncaught TypeError: undefined is not a function jquery.magnific-popup.min.js:4

    (function(e){var t,n,i,o,r,a,s,l="Close",c="BeforeClose",d="AfterClose",u="BeforeAppend",p=

Uncaught TypeError: undefined is not a function jquery.magnific-popup.js:38

     _window = $(window),

【问题讨论】：

首先，由于这是一个jQuery插件，你应该在之后添加一个指向jQuery.min.js的链接。另一件事-您可以将所有脚本块组合在一起，这样阅读起来会容易得多。
感谢指正。我想知道如何修复奇怪的缩进... xD

标签： javascript jquery popup magnific-popup

【解决方案1】：

好吧，正如我在 cmets 中指出的，您应该在 jQuery 之后添加指向 magnific-popup.js 的链接，因为这是一个插件：

<script src="jquery.min.js"></script>
<script src="magnific-popup.js"></script>

我创建了这个jsfiddle，这是你想要的吗（看起来有点毛骨悚然）？我还将您的所有脚本组合在一个块中，如下所示：

$(document).ready(function () {        
    $('.image-popup-vertical-fit').magnificPopup({
        type: 'image',
        delegate: 'a',
        closeOnContentClick: true,
        mainClass: 'mfp-img-mobile',
        image: {
            verticalFit: true
        }
    });
    $('.parent-container').magnificPopup({
        delegate: 'a', // child items selector, by clicking on it popup will open
        type: 'image'
        // other options
    });
    $('.image-popup-vertical-fit').magnificPopup({
        type: 'image',
        closeOnContentClick: true,
        mainClass: 'mfp-img-mobile',
        image: {
            verticalFit: true
        }

    });

    $('.image-popup-fit-width').magnificPopup({
        type: 'image',
        closeOnContentClick: true,
        image: {
            verticalFit: false
        }
    });

    $('.image-popup-no-margins').magnificPopup({
        type: 'image',
        closeOnContentClick: true,
        closeBtnInside: false,
        fixedContentPos: true,
        mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from                left and right side
        image: {
            verticalFit: true
        },
        zoom: {
            enabled: true,
            duration: 300 // don't foget to change the duration also in CSS
        }
    });    
});

【讨论】：

哦，所以我应该在正文部分的最底部有 magnific-popup.js 链接？我试过打开你试过的 jsfiddle 东西，但由于某种原因它没有为我加载。我不确定我是否在页面上组合了太多 jquery 代码。在我发现一个不起作用后，我最终添加了更多的 jquery 代码......
由于您的脚本位于$(document).ready() 函数内，因此您将脚本的链接放在哪里并不重要。尽管脚本链接的顺序很重要。你的意思是它没有加载？ jsfiddle打不开？
没关系 xD jsfiddle 之前没有为我加载，但现在它可以工作了！我现在很困惑，看起来弹出窗口在 jsfiddle 中工作......？但是当我在本地尝试代码时，弹出窗口甚至都不起作用！我是否需要下载一些东西才能使 jquery 代码在本地工作，因为我没有得到相同的结果：（
您的 html 文件夹中是否有 jQuery 和 magnific popup 脚本？基本上你应该把它们和其他脚本放在某个文件夹中，然后放在 html 页面上，然后你应该指向它们相对于这个页面的位置（通过包含<script> 标签）。
这些文件在我的 HTML 中的同一个文件夹中，我已经检查了 5 次文件链接以查看它们是否具有正确的名称，但我仍然没有收到任何弹出窗口：（我没有确定它为什么不工作......