Django管理和第三方Javascript
我正在运行django 2.0，它有jQuery2.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:789ImageViewer脚本的前几行--第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的人！我有谷歌错误和集成第三方js与django管理，但没有发现任何可行的。
谢谢!
标记
回答 1
Stack Overflow用户
发布于 2019-01-19 02:38:52
经过一些测试和更多的googling搜索，我找到了以下答案。
- 我必须将行
var jQuery = django.jQuery, $ = jQuery;添加到imageviweer.js文件的顶部。问题是django.jQuery = jQuery.noConflict(true);在jquery.init.js中的行。 - 这个图像查看器允许一个人放大一个图像。因此，实际上有两个图像，一个是加载在页面上的，另一个是图像查看器脚本为缩放和平移操作的图像。我的页面上的图片似乎太小了。一旦我增加了图像的大小，变焦/平移就起作用了。
问题解决了，我希望这是未来django管理页面的第三方javascript插件的“通用”解决方案。
标记
https://stackoverflow.com/questions/54262931
复制相似问题
腾讯云开发者
