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专家！我在Google上看到了错误，并将第三方js与django admin集成在一起，但未找到任何有效的方法。

谢谢！

标记

Answer 1

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

我必须在imageviweer.js文件顶部添加行var jQuery = django.jQuery, $ = jQuery;。问题是jquery.init.js中的行django.jQuery = jQuery.noConflict(true);。
此图像查看器允许放大图像。因此，实际上有两张图像，一张被加载在页面上，另一张由imageviewer脚本操纵以进行缩放。我页面上的图像似乎过小。一旦我增加了图像的大小，缩放/平移就起作用了。

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

标记

Django Admin和第三方Javascript

1 个答案: