Django Admin和第三方Javascript

Question

我正在运行django 2.0，它具有jquery 2.2.3。 我想在我的一个管理页面中使用这个ImageViewer Javascript应用程序https://github.com/s-yadav/ImageViewer 。 我将js文件和css文件添加到了ModelAdmin类中的Media类中，并收集了所有静态文件。 文件已加载到网页上。 我正在按照应用程序的“图像模式”示例（ http://ignitersworld.com/lab/imageViewer.html ）

页面已加载，但是js控制台中存在错误：

    imageviewer.js:16 Uncaught TypeError: $ is not a function
    at imageviewer.js:16
    at imageviewer.js:789
(anonymous) @ imageviewer.js:16
(anonymous) @ imageviewer.js:789

ImageViewer脚本的前几行-第16行是带有“ body”的行

    /*
    ImageViewer v 1.1.3
    Author: Sudhanshu Yadav
    Copyright (c) 2015-2016 to Sudhanshu Yadav - ignitersworld.com , released under the MIT license.
    Demo on: http://ignitersworld.com/lab/imageViewer.html
*/

/*** picture view plugin ****/
(function ($, window, document, undefined) {
    "use strict";

    //an empty function
    var noop = function () {};

    var $body = $('body'),
        $window = $(window),
        $document = $(document);

脚本的最后一行是第789行，这是第二个错误的来源：

    }((window.jQuery), window, document));

我的管理页面的标题：

<script type="text/javascript" src="/admin/jsi18n/"></script>
<link href="/static/imageviewer.css" type="text/css" media="all" rel="stylesheet" />
<script type="text/javascript" src="/static/admin/js/vendor/jquery/jquery.js"></script>
<script type="text/javascript" src="/static/admin/js/jquery.init.js"></script>
<script type="text/javascript" src="/static/admin/js/core.js"></script>
<script type="text/javascript" src="/static/admin/js/admin/RelatedObjectLookups.js"></script>
<script type="text/javascript" src="/static/admin/js/actions.js"></script>
<script type="text/javascript" src="/static/admin/js/urlify.js"></script>
<script type="text/javascript" src="/static/admin/js/prepopulate.js"></script>
<script type="text/javascript" src="/static/admin/js/vendor/xregexp/xregexp.js"></script>
<script type="text/javascript" src="/static/imageviewer.js"></script>
<script type="text/javascript" src="/static/my_code.js"></script>

我的图片在管理页面中的html：

<div class="readonly"><div id="image-gallery-3" class="cf"><img src="/documents/bfa1a808-7412-46c0-9d68-1a1df98f5a9c_thumb.jpg" data-high-res-src="/documents/bfa1a808-7412-46c0-9d68-1a1df98f5a9c.jpg" alt="" class="pannable-image"></div></div>

然后使用my_code.js使其正常工作，如示例所示：

$(function () {
    $('.pannable-image').ImageViewer();
});

ImageViewer的示例页面和我的代码之间的唯一区别是，my_code.js出现在示例页面的图像HTML后面，而my_code.js出现在图像的HTML之前。 这有什么区别吗？

我不是JS专家，在尝试将第三方Javascript代码与django管理页面集成之前，我遇到了同样的错误。 我仍然没有解决这个问题的方法，只是不尝试在django管理页面上使用任何自定义js！

我认为django jQuery和第三方js之间存在某种交互，这会导致此错误，但是我又不是JS家伙！ 我有谷歌的错误，并与Django的管理员集成第三方JS，但没有发现任何有效的方法。

谢谢！

标记

Answer 1

经过一些测试和更多谷歌搜索，我找到了以下答案。

1. 我必须添加一行var jQuery = django.jQuery, $ = jQuery; 在imageviweer.js文件的顶部。 问题是django.jQuery = jQuery.noConflict(true); 在jquery.init.js中。

2. 该图像查看器允许放大图像。 因此，实际上有两张图像，一张被加载在页面上，另一张由imageviewer脚本操纵以进行缩放。 我页面上的图像似乎过小。 一旦我增加了图像的大小，缩放/平移就起作用了。

问题已解决，我希望这是将来django管理页面的第三方javascript插件的“通用”解决方案。

标记