templates/web/gallery-detail.html.twig line 1

Open in your IDE?
  1. {% extends 'web/base.html.twig' %}
  2. {% block title %}{{ album.title }} - Galerija - 2sweet.eu{% endblock %}
  4. {% block body %}
  6.     {{ include('web/components/inner/breadcrumb.html.twig') }}
  8.     <div class="bgWhite">
  9.         <div class="container">
  10.             <div class="emptySpace-xs60 emptySpace110"></div>
  11.             <div class="row">
  12.                 <div class="col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
  13.                     <div class="big subTitleShortcode" style="text-align:center;">
  14.                         <h2 class="h2">{{ album.title }}</h2>
  15.                         {% if album.description %}
  16.                             <div class="emptySpace20"></div>
  17.                             <p>{{ album.description }}</p>
  18.                         {% endif %}
  19.                     </div>
  20.                 </div>
  21.             </div>
  23.             <div class="emptySpace-xs30 emptySpace60"></div>
  25.             <div class="row" id="gallery-grid">
  26.                 {% for photo in album.photos %}
  27.                 <div class="col-xs-6 col-sm-4 col-md-3" style="margin-bottom:15px;">
  28.                     <a href="{{ asset('uploads/' ~ photo.image) }}" class="gallery-lightbox" data-group="album">
  29.                         <img src="{{ asset('uploads/' ~ photo.image) }}"
  30.                              class="img-responsive"
  31.                              style="width:100%; height:200px; object-fit:cover; border-radius:4px; cursor:pointer; transition: opacity 0.2s;"
  32.                              onmouseover="this.style.opacity='0.85'"
  33.                              onmouseout="this.style.opacity='1'"
  34.                              alt="{{ album.title }}">
  35.                     </a>
  36.                 </div>
  37.                 {% else %}
  38.                 <div class="col-12 text-center">
  39.                     <p>Nema fotografija u ovom albumu.</p>
  40.                 </div>
  41.                 {% endfor %}
  42.             </div>
  44.             <div class="emptySpace30"></div>
  45.             <div class="row">
  46.                 <div class="col-sm-12 text-center">
  47.                     <a href="{{ path('web_gallery') }}" class="btn" style="background:#c9a96e; color:#fff; border-radius:2px; padding:10px 30px; text-transform:uppercase; letter-spacing:1px; font-size:13px;">
  48.                         &larr; Natrag na galeriju
  49.                     </a>
  50.                 </div>
  51.             </div>
  53.             <div class="emptySpace-xs60 emptySpace110"></div>
  54.         </div>
  55.     </div>
  57.     <!-- Lightbox overlay -->
  58.     <div id="lightbox-overlay" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.92); z-index:9999; cursor:pointer;" onclick="closeLightbox()">
  59.         <div style="position:absolute; top:20px; right:30px; color:#fff; font-size:32px; cursor:pointer;" onclick="closeLightbox()">&times;</div>
  60.         <div style="display:flex; align-items:center; justify-content:center; height:100%;">
  61.             <div onclick="event.stopPropagation();" style="position:relative; max-width:90vw; max-height:90vh; display:flex; align-items:center;">
  62.                 <span id="lb-prev" onclick="lbNav(-1)" style="position:absolute; left:-50px; color:#fff; font-size:40px; cursor:pointer; user-select:none;">&#8249;</span>
  63.                 <img id="lightbox-img" src="" style="max-width:88vw; max-height:88vh; object-fit:contain; border-radius:4px;">
  64.                 <span id="lb-next" onclick="lbNav(1)" style="position:absolute; right:-50px; color:#fff; font-size:40px; cursor:pointer; user-select:none;">&#8250;</span>
  65.             </div>
  66.         </div>
  67.         <div id="lb-counter" style="position:absolute; bottom:20px; left:50%; transform:translateX(-50%); color:#fff; font-size:13px; opacity:0.7;"></div>
  68.     </div>
  70. {% endblock %}
  72. {% block javascripts %}
  73.     {{ parent() }}
  75. <script>
  76.     var lbImages = [];
  77.     var lbCurrent = 0;
  79.     document.querySelectorAll('.gallery-lightbox').forEach(function(el, i) {
  80.         lbImages.push(el.getAttribute('href'));
  81.         el.addEventListener('click', function(e) {
  82.             e.preventDefault();
  83.             lbCurrent = i;
  84.             openLightbox();
  85.         });
  86.     });
  88.     function openLightbox() {
  89.         document.getElementById('lightbox-img').src = lbImages[lbCurrent];
  90.         document.getElementById('lb-counter').textContent = (lbCurrent + 1) + ' / ' + lbImages.length;
  91.         document.getElementById('lightbox-overlay').style.display = 'block';
  92.         document.body.style.overflow = 'hidden';
  93.     }
  95.     function closeLightbox() {
  96.         document.getElementById('lightbox-overlay').style.display = 'none';
  97.         document.body.style.overflow = '';
  98.     }
  100.     function lbNav(dir) {
  101.         lbCurrent = (lbCurrent + dir + lbImages.length) % lbImages.length;
  102.         document.getElementById('lightbox-img').src = lbImages[lbCurrent];
  103.         document.getElementById('lb-counter').textContent = (lbCurrent + 1) + ' / ' + lbImages.length;
  104.     }
  106.     document.addEventListener('keydown', function(e) {
  107.         if (document.getElementById('lightbox-overlay').style.display === 'block') {
  108.             if (e.key === 'ArrowRight') lbNav(1);
  109.             if (e.key === 'ArrowLeft') lbNav(-1);
  110.             if (e.key === 'Escape') closeLightbox();
  111.         }
  112.     });
  113. </script>
  114. {% endblock %}