Merge pull request #227 from honeylogic-io/add-image-zoomin

fix: add image zoom in

Author: adinhodovic

django_wtf/templates/core/base.html

@@ -43,4 +43,6 @@
         <script src="https://unpkg.com/[email protected]"></script>
         {% django_htmx_script %}
     </body>
+    {% block js %}
+    {% endblock js %}
 </html>

django_wtf/templates/core/repository_detail.html

@@ -98,3 +98,26 @@
         </div>
     </div>
 {% endblock content %}
+
+{% block js %}
+    {{ block.super }}
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/medium-zoom/1.0.6/medium-zoom.min.js"
+            integrity="sha512-N9IJRoc3LaP3NDoiGkcPa4gG94kapGpaA5Zq9/Dr04uf5TbLFU5q0o8AbRhLKUUlp8QFS2u7S+Yti0U7QtuZvQ=="
+            crossorigin="anonymous"
+            referrerpolicy="no-referrer"></script>
+    <script>
+        const images = Array.from(document.querySelectorAll(".prose img"));
+        console.log(images)
+        images.forEach(img => {
+            mediumZoom(img, {
+                margin: 0,
+                /* The space outside the zoomed image */
+                scrollOffset: 40,
+                /* The number of pixels to scroll to close the zoom */
+                container: null,
+                /* The viewport to render the zoom in */
+                template: null /* The template element to display on zoom */
+            });
+        });
+    </script>
+{% endblock js %}