templates/galleries/show.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block stylesheets %}
  4.     <link rel="stylesheet" href="/assets/css/mdb/bootstrap.min.css">
  5.     <link rel="stylesheet" href="/assets/css/mdb/mdb.min.css">
  6.     <link rel="stylesheet" type="text/css" href="/assets/css/galleries.css" />
  7.     <style>
  8.         .lightbox {
  9.             position: fixed;
  10.             top: 0; left: 0; right: 0; bottom: 0;
  11.             background-color: rgba(0,0,0,0.75);
  12.             opacity: 0;
  13.             pointer-events: none;
  14.             z-index: 1055;
  15.             background-size: contain;
  16.             background-repeat: no-repeat;
  17.             background-position: center center;
  18.             font-size: 30px;
  19.         }
  21.         .lightbox .left, .lightbox .right {
  22.             display: flex;
  23.             align-items: center;
  24.             cursor: pointer;
  25.             color: white;
  26.             font-weight: bold;
  27.             opacity: 0.5;
  28.         }
  29.         .lightbox .right {
  30.             flex-direction: row-reverse;
  31.         }
  32.         .lightbox .close {
  33.             display: flex;
  34.             font-weight: bold;
  35.             color: white;
  36.             float: none;
  37.             opacity: 0.5;
  38.             flex-direction: row-reverse;
  39.         }
  40.         .lightbox .close .btn {
  41.             cursor: pointer;
  42.             font-size: 30px;
  43.             border-radius: 5px;
  44.             border: 1px solid white;
  45.             padding: 0 12px;
  46.             box-shadow: 0 0 5px white;
  47.         }
  48.         .lightbox .left:hover,
  49.         .lightbox .right:hover {
  50.             opacity: 1;
  51.             color:white;
  52.         }
  53.         .lightbox .close .btn:hover {
  54.             opacity: 1;
  55.             color:black;
  56.             background-color: ghostwhite;
  57.         }
  58.         .img-fluid {
  59.             cursor: pointer;
  60.         }
  61.         .hidebackground {
  62.             position: fixed;
  63.             top:0;left:0;right:0;bottom:0;
  64.             background: black;
  65.             opacity: 0;
  66.             pointer-events: none;
  67.         }
  68.         .info-background {
  69.             position: fixed;
  70.             bottom:0;
  71.             left:0;right:0;
  72.             padding: 15px;
  73.         }
  74.         .comment, .tags {
  75.             color:white;
  76.             margin: 0;
  77.         }
  78.     </style>
  79. {% endblock %}
  81. {% block background %}{% endblock %}
  83. {% block body %}
  84.     <div class="page galleries">
  85.         <div class="wrap">
  86.             <div class="container-fluid">
  88.                 <div class="row">
  89.                     <div class="col-sm-12 col-md-8">
  90.                         {% for gallery in galleries %}
  91.                         <div class="row">
  92.                             <div class="col col-12">
  93.                                 <h1>{{ gallery.machineName }}</h1>
  94.                             </div>
  95.                         </div>
  96.                         <div class="row">
  97.                             <div class="col col-12">
  98.                                 <p>{{ gallery.description }}</p>
  99.                             </div>
  100.                         </div>
  101.                         <div class="gallery" id="gallery">
  102.                             {% for img in gallery.pictures %}
  103.                             <div class="mb-3 pics animation all 2">
  104.                                 <img class="img-fluid"
  105.                                      src="/galleries/{{ gallery.id }}/{{ img.photo }}"
  106.                                      alt="{{ img.comment }}"
  107.                                      data-comment="{{ img.comment }}"
  108.                                      data-tags="{{ img.tags }}"
  109.                                      width="100%" />
  110.                             </div>
  111.                             {% endfor %}
  112.                         </div>
  113.                         {% endfor %}
  114.                         <div class="lightbox container-fluid">
  115.                             <div class="info-background">
  116.                                 <p class="comment"></p>
  117.                                 <p class="tags"></p>
  118.                             </div>
  119.                             <div class="hidebackground"></div>
  120.                             <div class="row" style="height: 100vh">
  121.                                 <div class="col col-6 left">&lt;</div>
  122.                                 <div class="col col-6 right">&gt;</div>
  123.                             </div>
  124.                             <div class="row" style="position: absolute;top:0;left:0;right:0;">
  125.                                 <div class="col-12 close">
  126.                                     <button class="btn">&times;</button>
  127.                                 </div>
  128.                             </div>
  129.                         </div>
  130.                     </div>
  131.                     <div class="col-sm-12 col-md-4">
  132.                         <div class="grid-varosok">
  133.                             <ul>
  134.                                 {% for gallery in gallery_list %}
  135.                                     <a href="/galleries/{{ gallery.id }}/" rel="bookmark" class="varos {{ gallery.machineName }}"><li>{{ gallery.machineName }}</li></a>
  136.                                 {% endfor %}
  137.                             </ul>
  138.                         </div>
  139.                     </div>
  140.                 </div>
  142.             </div>
  143.         </div>
  144.     </div>
  145. {% endblock %}
  147. {% block javascripts %}
  148.         <script type="text/javascript" src="/assets/js/mdb/popper.min.js"></script>
  149.         <script type="text/javascript" src="/assets/js/mdb/bootstrap.min.js"></script>
  150.         <script type="text/javascript" src="/assets/js/mdb/mdb.min.js"></script>
  151.     <script language="JavaScript">
  152.         $(document).ready(function(){
  153.             var images = $('.img-fluid');
  154.             var box = $('.lightbox');
  155.             var left = $('.lightbox .left');
  156.             var right = $('.lightbox .right');
  157.             var close = $('.lightbox .close .btn');
  158.             var bg = $('.lightbox .hidebackground');
  159.             var bg_info = $('.lightbox .info-background');
  160.             var lastSrc = '', lastComment = '', lastTags = '';
  161.             images.on('click', function(){
  162.                 lastSrc = $(this).attr('src');
  163.                 lastComment = $(this).attr('data-comment');
  164.                 lastTags = $(this).attr('data-tags');
  165.                 setImage();
  166.             });
  167.             left.click(function(){
  168.                 bg.animate({'opacity':1},300,function(){
  169.                     var found = getImage();
  170.                     if (found > -1) {
  171.                         var prev = images[(found - 1) < 0 ? (images.length - 1) : (found - 1)];
  172.                         lastSrc = $(prev).attr('src');
  173.                         lastComment = $(prev).attr('data-comment');
  174.                         lastTags = $(prev).attr('data-tags');
  175.                         setImage();
  176.                     }
  177.                 });
  178.             });
  179.             right.click(function(){
  180.                 bg.animate({'opacity':1},300,function() {
  181.                     var found = getImage();
  182.                     if (found > -1) {
  183.                         var next = images[(found + 1) > images.length - 1 ? 0 : (found + 1)];
  184.                         lastSrc = $(next).attr('src');
  185.                         lastComment = $(next).attr('data-comment');
  186.                         lastTags = $(next).attr('data-tags');
  187.                         setImage();
  188.                     }
  189.                 });
  190.             });
  191.             close.click(function(){
  192.                 bg.animate({'opacity':1},300,function() {
  193.                     box.css({
  194.                         'opacity': 0,
  195.                         'pointer-events': 'none'
  196.                     });
  197.                 });
  198.             });
  200.             function setImage() {
  201.                 box.css({
  202.                     'background-image': 'url('+lastSrc+')',
  203.                     'opacity': 1,
  204.                     'pointer-events': 'all'
  205.                 });
  206.                 bg_info.find('.comment').css({'display': lastComment.trim().length > 0 ? 'block' : 'none'}).html(lastComment);
  207.                 bg_info.find('.tags').css({'display': lastTags.trim().length > 0 ? 'block' : 'none'}).html(lastTags);
  208.                 setTimeout(function(){
  209.                     bg.animate({'opacity': 0}, 500);
  210.                 },100);
  211.             }
  213.             function getImage() {
  214.                 var found = -1;
  215.                 images.each(function(index, img) {
  216.                     if ($(img).attr('src') == lastSrc) {
  217.                         found = index;
  218.                     }
  219.                 });
  220.                 return found;
  221.             }
  222.         });
  223.     </script>
  224. {% endblock %}