使用jquery在django上实现Panzoom

Question

我有一个非常基本的django应用程序，它使用django ImageField显示.png图像，并要求用户对不同的选择进行投票。现在，我需要使它具有交互性，以便用户还可以缩放和平移表单中的图像。我已经下载了这个github https://github.com/timmywil/jquery.panzoom，并按照我的详细信息视图中的说明操作: detail.html：

<div id="img">
    <img src="{{question.image.url}}"/>
</div>

{% load static %}
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="{% static 'polls/node_modules/jquery.panzoom/dist/jquery.panzoom.js' %}"></script>

<script type="text/javascript">
jQuery(document).ready(function(){
$("img").panzoom();
$("img").panzoom({ minScale: 0, $zoomRange: $("input[type='range']") });
    });
</script>

但是什么都没有发生，图像以固定的方式显示。以前我遇到了一些404错误的问题，现在它似乎可以正确加载.js，但它仍然不能工作。提前感谢您的帮助。

Answer 1

您必须具备以下条件：

1) <script type="text/javascript" src="_path_to_your_JS_panzoom_file"></script> -导入该文件

2)

<script type="text/javascript">
    jQuery(document).ready(function(){
        $(".panzoom-elements").panzoom();

        // Pass options 
        $("a.panzoom-elements").panzoom({ minScale: 0, $zoomRange: $("input[type='range']") });
        });
</script>

或2-b)将这些代码添加到单独的.js文件中，并以与段落1中相同的方式导入。

Answer 2

好了，我终于找到问题所在了。这些文档可能是为那些在该领域有更多背景的人准备的！但当然，要使其工作，还需要其他导入：

{% load static %}
<script type="text/javascript" src="{% static 'polls/node_modules/jquery.panzoom/test/libs/jquery.js' %}"></script>
<script type="text/javascript" src="{% static 'polls/node_modules/jquery.panzoom/dist/jquery.panzoom.js' %}"></script>
<script type="text/javascript" src="{% static 'polls/node_modules/jquery.panzoom/test/libs/jquery.mousewheel.js' %}"></script>

<section>
  <div class="parent">
    <div class="panzoom">
      <img src="{{question.image.url}}">
    </div>
  </div>
  <div class="buttons">
    <button class="zoom-in">Zoom In</button>
    <button class="zoom-out">Zoom Out</button>
    <input type="range" class="zoom-range">
    <button class="reset">Reset</button>
  </div>
  <script>
    (function() {
      var $section = $('section').first();
      $section.find('.panzoom').panzoom({
        $zoomIn: $section.find(".zoom-in"),
        $zoomOut: $section.find(".zoom-out"),
        $zoomRange: $section.find(".zoom-range"),
        $reset: $section.find(".reset")
      });
    })();
  </script>
</section>