I have a hard time incorporating a magnifying javascript plugin feature.
Basically, I was able to run this plugin on a static html template with static images. but I can't seem to run it at all on my django built website.
<!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>
My images are located inside entry model, and they are extracted from there. Does that have an impact on whether the magnify script will work or not? Since they are not exactly static.
Also, I have multiple css files, not sure if that impacts anything. I disabled the main css in the base template to see if it was interfering, but still nothing.
Is there a more efficient way that I incorporate a magnifying function? I have no experience really with javascript.
Here is the modified code that actually works.
> {% 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>