时间戳

首页 > 解决方案 > 在 django 框架中使用 javascript 插件进行图像缩放/放大

javascript - 在 django 框架中使用 javascript 插件进行图像缩放/放大

问题描述

我很难加入放大的 javascript 插件功能。

基本上，我能够在带有静态图像的静态 html 模板上运行这个插件。但我似乎根本无法在我的 django 构建网站上运行它。

      <!DOCTYPE html>
    <html>
    <head>
        <title>Items</title>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" />

        <title>EasyZoom, jQuery image zoom plugin</title>

        <link rel="stylesheet" href="css/example.css" />
        <link rel="stylesheet" href="css/pygments.css" />
        <link rel="stylesheet" href="css/easyzoom.css" />
    </head>
    <body>


        {%if entry.image_set.get.imgfile%}
  <!-- images are extracted from the entry model --> 
        <div class="easyzoom easyzoom--overlay">
            <a href="{{MEDIA_URL}} {{entry.image_set.get.imgfile.url}}">
                <img src="{{MEDIA_URL}} {{entry.image_set.get.imgfile.url}}" alt="Green-SLI" />
            </a>
        </div>
        {%endif%}



        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <script src="dist/easyzoom.js"></script>
        <script>
            // Instantiate EasyZoom instances
            var $easyzoom = $('.easyzoom').easyZoom();

            // Setup thumbnails example
            var api1 = $easyzoom.filter('.easyzoom--with-thumbnails').data('easyZoom');

            $('.thumbnails').on('click', 'a', function(e) {
                var $this = $(this);

                e.preventDefault();

                // Use EasyZoom's `swap` method
                api1.swap($this.data('standard'), $this.attr('href'));
            });

            // Setup toggles example
            var api2 = $easyzoom.filter('.easyzoom--with-toggle').data('easyZoom');

            $('.toggle').on('click', function() {
                var $this = $(this);

                if ($this.data("active") === true) {
                    $this.text("Switch on").data("active", false);
                    api2.teardown();
                } else {
                    $this.text("Switch off").data("active", true);
                    api2._init();
                }
            });
        </script>
    </body>



    </html>

我的图像位于入口模型内，它们是从那里提取的。这对放大脚本是否有效有影响吗？因为它们并不完全是静态的。

另外，我有多个 css 文件，不确定这是否会影响任何东西。我禁用了基本模板中的主 css 以查看它是否有干扰，但仍然没有。

有没有更有效的方法来合并放大功能？我真的没有使用 javascript 的经验。

这是实际有效的修改后的代码。 

> {% load staticfiles %}
> 
> <!DOCTYPE html> <html> <head>     <title>Items</title>    <meta
> charset="utf-8" />    <meta http-equiv="X-UA-Compatible"
> content="IE=Edge;chrome=1" />
> 
>   <title>EasyZoom, jQuery image zoom plugin</title>
> 
>               <link rel="stylesheet" type = "text/css" href={% static "css/easyzoom.css" %} /> </head> <body>     {%if
> entry.image_set.get.imgfile%}
> 
> 
>   <div class="easyzoom easyzoom--overlay">
>       <a href="{{MEDIA_URL}} {{entry.image_set.get.imgfile.url}}">
>           <img src="{{MEDIA_URL}} {{entry.image_set.get.imgfile.url}}" alt="Green-SLI" width = '240' height ='180' />
>       </a>    </div>  {%endif%}
> 
> 
> 
>   <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
>   <script type="text/javascript" src="{% static "css/easyzoom.js"
> %}"></script>     <script>        // Instantiate EasyZoom instances       var
> $easyzoom = $('.easyzoom').easyZoom();
> 
>       // Setup thumbnails example         var api1 =
> $easyzoom.filter('.easyzoom--with-thumbnails').data('easyZoom');
> 
>       $('.thumbnails').on('click', 'a', function(e) {             var $this =
> $(this);
> 
>           e.preventDefault();
> 
>           // Use EasyZoom's `swap` method
>           api1.swap($this.data('standard'), $this.attr('href'));      });
> 
>       // Setup toggles example        var api2 =
> $easyzoom.filter('.easyzoom--with-toggle').data('easyZoom');
> 
>       $('.toggle').on('click', function() {           var $this = $(this);
> 
>           if ($this.data("active") === true) {
>               $this.text("Switch on").data("active", false);
>               api2.teardown();            } else {
>               $this.text("Switch off").data("active", true);
>               api2._init();           }       });     </script> </body>
> 
> 
> 
> </html>

标签： javascripthtmldjangomodelmagnify

解决方案

推荐阅读