Fancybox galerie

templates/gallery.html

@@ -1,5 +1,9 @@
 {% extends "base.html" %}
 
+{% block styles %}
+	<link rel="stylesheet" href="{{ get_url(path="fancybox/jquery.fancybox.min.css") }}">
+{% endblock styles %}
+
 {% block extra %}
 	{{ macro::breadcrumbs(page=page) }}
 {% endblock %}
@@ -17,3 +21,8 @@
 		</section>
 	</main>
 {% endblock content %}
+
+{% block javascript %}
+	<script src="{{ get_url(path="lib/jquery-3.6.0.min.js") }}"></script>
+	<script src="{{ get_url(path="fancybox/jquery.fancybox.min.js") }}"></script>
+{% endblock %}

templates/macros.html

@@ -211,7 +211,7 @@
 	<div class="gallery">
 		{% for asset in page.assets %}
 			{% if asset is matching("[.](jpg|png)$") %}
-				<img src="{{ resize_image(path=asset, width=300, height=200, op="fill") }}" alt="{{ asset }}">
+				<a data-fancybox="{{ page.title }}" href="{{ get_url(path=asset) }}"><img src="{{ resize_image(path=asset, width=300, height=200, op="fill") }}" alt="{{ asset }}"></a>
 			{% endif %}
 		{% endfor %}
 	</div>