Увеличить / увеличить изображение с помощью плагина javascript, в рамках django - PullRequest
Новая
       14

Увеличить / увеличить изображение с помощью плагина javascript, в рамках django

0 голосов
/ 23 декабря 2018

Мне трудно включить функцию плагина для увеличения 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>
...