Skip to content

Commit 6c1157b

Browse files
committed
feat(blog): Add zoomin for images
1 parent 8ba9f1a commit 6c1157b

File tree

1 file changed

+22
-0
lines changed

1 file changed

+22
-0
lines changed

django_wtf/templates/wagtail_code_blog/blog_page.html

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,25 @@
1010
{% include "wagtail_code_blog/blog_page_body.html" %}
1111
</div>
1212
{% endblock content %}
13+
{% block js %}
14+
{{ block.super }}
15+
<script src="https://cdnjs.cloudflare.com/ajax/libs/medium-zoom/1.0.6/medium-zoom.min.js"
16+
integrity="sha512-N9IJRoc3LaP3NDoiGkcPa4gG94kapGpaA5Zq9/Dr04uf5TbLFU5q0o8AbRhLKUUlp8QFS2u7S+Yti0U7QtuZvQ=="
17+
crossorigin="anonymous"
18+
referrerpolicy="no-referrer"></script>
19+
<script>
20+
const images = Array.from(document.querySelectorAll(".prose img"));
21+
console.log(images)
22+
images.forEach(img => {
23+
mediumZoom(img, {
24+
margin: 0,
25+
/* The space outside the zoomed image */
26+
scrollOffset: 40,
27+
/* The number of pixels to scroll to close the zoom */
28+
container: null,
29+
/* The viewport to render the zoom in */
30+
template: null /* The template element to display on zoom */
31+
});
32+
});
33+
</script>
34+
{% endblock js %}

0 commit comments

Comments
 (0)