Complete portfolio gallery: add Lightbox JS and configuration

smartsoltech/web/templates/web/portfolio_detail.html

@@ -3,6 +3,19 @@
 
 {% block title %}{{ item.title }} - Портфолио - SmartSolTech{% endblock %}
 
+{% block extra_head %}
+<!-- Lightbox CSS -->
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/css/lightbox.min.css">
+<style>
+.hover-zoom {
+    transition: transform 0.3s ease;
+}
+.hover-zoom:hover {
+    transform: scale(1.05);
+}
+</style>
+{% endblock %}
+
 {% block content %}
 <section class="section-padding">
     <div class="container" style="max-width: 1000px;">
@@ -40,6 +53,25 @@
         </div>
         {% endif %}
 
+        <!-- Project Gallery -->
+        {% if item.gallery_images.all %}
+        <div class="mb-5">
+            <h3 class="mb-4">Галерея проекта</h3>
+            <div class="row g-3">
+                {% for gallery_image in item.gallery_images.all %}
+                <div class="col-md-4 col-sm-6">
+                    <a href="{{ gallery_image.image.url }}" data-lightbox="portfolio-gallery" {% if gallery_image.caption %}data-title="{{ gallery_image.caption }}"{% endif %}>
+                        <img src="{{ gallery_image.image.url }}" class="img-fluid rounded shadow-sm hover-zoom" alt="{{ gallery_image.caption }}" style="width: 100%; height: 250px; object-fit: cover; cursor: pointer; transition: transform 0.3s;">
+                    </a>
+                    {% if gallery_image.caption %}
+                    <p class="text-muted small mt-2 text-center">{{ gallery_image.caption }}</p>
+                    {% endif %}
+                </div>
+                {% endfor %}
+            </div>
+        </div>
+        {% endif %}
+
         <!-- Project Description -->
         <div class="card-modern mb-5">
             <div class="card-body">
@@ -59,3 +91,15 @@
     </div>
 </section>
 {% endblock %}
+
+{% block extra_scripts %}
+<!-- Lightbox JS -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/js/lightbox.min.js"></script>
+<script>
+    lightbox.option({
+        'resizeDuration': 200,
+        'wrapAround': true,
+        'albumLabel': 'Изображение %1 из %2'
+    });
+</script>
+{% endblock %}