templates/FrontBundle/Page/spectacles-speciaux2.html.twig line 1

Open in your IDE?
  1. {% extends 'FrontBundle/layout.html.twig' %}
  3. {% block title %}{{ app_sitename }} - {{ page.metaTitle }}{% endblock %}
  4. {% block description %}{{ page.metaDescription }}{% endblock %}
  7. {% block extra_class %}stack{% endblock %}
  8. {% block sub_header %}
  10.     <div class="sub-header anchor">
  11.         <ul>
  12.             <li><a href="#concerts">{{ 'menu_concerts'|tr(tr)|raw }}</a></li>
  13.             <li><a href="#noel">{{ 'menu_noel'|tr(tr)|raw }}</a></li>
  14.             <li><a href="#evenements">{{ 'menu_evenements'|tr(tr)|raw }}</a></li>
  16.         </ul>
  17.     </div>
  19. {% endblock %}
  21. {% block stylesheets %}
  22.     <link href="/front/css/owl.carousel.min.css" rel="stylesheet">
  23.     <link href="/front/css/owl.theme.default.min.css" rel="stylesheet">
  24.     <link href="/plugins/photoswipe/photoswipe.css" rel="stylesheet">
  25.     <link href="/plugins/photoswipe/default-skin/default-skin.css" rel="stylesheet" type="text/css"/>
  26.     <link href="/front/css/carousel.css" rel="stylesheet">
  28.     <style>
  29.         .espace-content h2 {
  30.             font-size: 28px;
  31.         }
  32.         .pointer-event-none{
  33.             pointer-events: none !important;
  34.             font-size: 15px;
  35.             text-transform: uppercase;
  36.             border-radius: 20px;
  37.             transition: 0.3s ease;
  38.             color: var(--purple);
  39.             border: 1px solid var(--purple);
  40.             text-decoration: none;
  41.             padding: 8px 16px;
  42.             width: max-content;
  43.             opacity: 0.5;
  44.             float: left;
  45.         }
  47.         span.name-title{
  48.             font-size: 17px;
  49.             letter-spacing: 3px;
  50.             width: 80%;
  51.             text-align: left;
  52.             display: block;
  53.             text-transform: uppercase;
  54.             color: #1A1A1A;
  55.             font-weight: 600;
  56.         }
  58.         .page_spectacles-speciaux .concerts .description .desc {
  59.             font-size: 14px;
  60.         }
  62.         strong.head {
  63.             font-size: 18px;
  64.             font-style: italic;
  65.         }
  67.         @media screen and (min-width: 1200px) {
  68.             .page_spectacles-speciaux .evenements .description {
  69.                 font-size: 15px;
  70.                 line-height: 20px;
  71.                 color: #707070;
  72.                 padding-left: calc(var(--bs-gutter-x)* .5* 2);
  73.                 display: flex;
  74.                 flex-direction: column;
  75.                 justify-content: center;
  76.                 height: 100%;
  77.                 align-items: center;
  78.             }
  80.             /**
  81.            Ppur la gestion de la modale du menu
  82.             */
  83.             .span-custom {
  84.                 display: flex !important;
  85.                 justify-content: center !important;
  86.             }
  88.             li.custom-liste {
  89.                 text-align: center !important;
  90.                 font-size: 13px;
  91.             }
  93.             li.custom-liste .boisson{
  94.                 font-style: italic;
  95.                 color: var(--gold);
  96.             }
  98.             .space-modale {
  99.                 margin-left: 5.5rem !important;
  100.             }
  102.             .space-modale2 {
  103.                 margin-left: 7.3rem !important;
  104.             }
  106.             @media screen and (max-width: 450px) {
  107.                 li.custom-liste {
  108.                     font-size: 0.85rem !important;
  109.                     text-align: center;
  110.                 }
  112.                 .space-modale h1 {
  113.                     font-size: 1rem !important;
  114.                 }
  116.                 .space-modale {
  117.                     margin-left: 3.5rem !important;
  118.                 }
  120.                 .space-modale2 {
  121.                     margin-left: 2.5rem !important;
  122.                 }
  123.             }
  124.         /**
  125.         fin
  126.          */
  127.     </style>
  128. {% endblock %}
  130. {% block body %}
  132.     {% include 'FrontBundle/Partial/calendar.html.twig' %}
  135.     <section class="espace-content full" id="concerts" style="margin-top: 160px;">
  136.         <div class="content">
  137.             <h1>{{ 'spectacle_h1'|tr(tr)|upper|raw }}</h1>
  138.             <h2 class="mb-5 mt-5">{{ 'menu_concerts'|tr(tr)|upper|raw }}</h2>
  139.             <p class="p-0">{{ 'concert_title'|tr(tr)|raw }}</p>
  140.         </div>
  141.     </section>
  143.     <section class="concerts slider p-0 mt-5 mb-5">
  144.         <div class="content">
  145.             <div class="p-0 row">
  146.                 {% set deadline = "2030-10-31 21:00:00" %}
  147.                 {% set current = "now" | date("Y-m-d H:i:s") %}
  148.                 {% set oktoberfest_added = false %}
  150.                 {% for concert in concerts %}
  151.                     {% if concert.concert is not null and concert.start.timestamp > date().timestamp %}
  153.                         <div class="item col-md-6" concert-id="{{ concert.id }}">
  154.                             <div class="row mb-5">
  155.                                 <div class="col-6 auto">
  157.                                     <img alt="concert" class="cover" src="{{ concert.concert.thumbnail }}" />
  158.                                     <a href="#" class="order red load-event {{ (concert.isfull) ? 'btn-isfull' : '' }}" data-id="{{ concert.id }}">
  159.                                         {{ (concert.isfull) ? 'general_full'|tr(tr)|upper|raw : 'general_reserver'|tr(tr)|upper|raw }}
  160.                                     </a>
  161.                                 </div>
  162.                                 <div class="col-6">
  163.                                     <div class="description">
  164.                                         <span class="name-title"><span>{{ concert.concert.titleLocale(app.request.locale) }}</span></span>
  165.                                         {% if app.request.locale == 'de' %}
  166.                                             <p>{{ concert.strStartDe }}</p>
  167.                                         {% elseif app.request.locale == 'en' %}
  168.                                             <p>{{ concert.strStartEn }}</p>
  169.                                         {% else %}
  170.                                             <p>{{ concert.strStart }}</p>
  171.                                         {% endif %}
  172.                                         <hr>
  173.                                         <p class="desc mb-3">{{ concert.concert.description(app.request.locale)|replace({'Animation:':'<br><br>Animation:','Entertainment:':'<br><br>Entertainment:'})|raw }}</p>
  174.                                         <span class="price">{{ 'menus_tarifs_spectacle_pn'|tr(tr)|ucfirst|raw }} : {{ concert.concert.info('pn') }} €*</span>
  175.                                         <span class="price premium">{{ 'menus_tarifs_spectacle_ph'|tr(tr)|ucfirst|raw }} : {{ concert.concert.info('ph') }} €*</span>
  176.                                         <span class="price purple">{{ 'menus_tarifs_spectacle_vip'|tr(tr)|ucfirst|raw }} : {{ concert.concert.info('vip') }} €*</span>
  177.                                         <p class="desc mt-3">*{{ 'menus_tarifs_horsrepas'|tr(tr)|raw }}</p>
  179.                                         {% if concert.start|date('H') > 16 %}
  180.                                             <p class="desc mb-3">{{ 'concert_food3'|tr(tr)|raw }}</p>
  181.                                         {% else %}
  182.                                             {% set food_str = (concert.venueType.food) ? 'concert_food'|tr(tr)|raw : 'concert_nofood'|tr(tr)|raw  %}
  184.                                             {% if concert.id in [1814, 1850] %}
  185.                                                 {% if app.request.locale == 'de' %}
  186.                                                     {% set food_str = 'Mittagessen möglich um 11:30 Uhr' %}
  187.                                                 {% elseif app.request.locale == 'en' %}
  188.                                                     {% set food_str = 'Lunch available at 11:30 AM' %}
  189.                                                 {% else %}
  190.                                                     {% set food_str = 'Possibilité de déjeuner à 11h30' %}
  191.                                                 {% endif %}
  193.                                             {% endif %}
  194.                                             <p class="desc mb-3">{{ food_str }}</p>
  195.                                         {% endif %}
  196.                                     </div>
  197.                                 </div>
  198.                             </div>
  199.                         </div>
  200.                         {% if loop.index == 8 and current <= deadline %}
  201.                             <!-- Pour Oktoberfest -->
  202.                             <div class="item col-md-6">
  203.                                 <div class="row mb-5">
  204.                                     <div class="col-6 auto">
  205.                                         <img alt="concert" class="cover" src="{{ asset('front/img/evenements-2024/oktoberfest-min.jpg') }}" />
  206.                                         <a href="#" class="order red load-event" data-id="1439">
  207.                                             {{ 'general_reserver'|tr(tr)|upper|raw }}
  208.                                         </a>
  209.                                     </div>
  210.                                     <div class="col-6">
  211.                                         <div class="description">
  212.                                             <span class="name-title"><span>OKTOBERFEST</span></span>
  213.                                             {% if app.request.locale == 'de' %}
  214.                                                 <p>Donnerstag, 31. Oktober 2024 / 21h </p>
  215.                                             {% elseif app.request.locale == 'en' %}
  216.                                                 <p>Thursday 31 October 2024 / 21h</p>
  217.                                             {% else %}
  218.                                                 <p>Jeudi 31 Octobre 2024 / 21h</p>
  219.                                             {% endif %}
  220.                                             <hr>
  221.                                             <p class="desc mb-3">{{ 'events_2024_spe'|tr(tr)|raw }}</p>
  222.                                             <p class="desc mt-3">*{{ 'menus_tarifs_horsrepas'|tr(tr)|raw }}</p>
  223.                                             <p class="desc mb-3">{{ 'concert_food2'|tr(tr)|raw }}</p>
  224.                                         </div>
  225.                                     </div>
  226.                                 </div>
  227.                             </div>
  228.                             {% set oktoberfest_added = true %}
  229.                         {% endif %}
  230.                     {% endif %}
  231.                 {% endfor %}
  235.                 <div class="item row">
  236.                     <div class="col-6 auto">
  237.                         &nbsp;
  238.                     </div>
  239.                     <div class="col-6">
  240.                         <div class="description">
  241.                             &nbsp;
  242.                         </div>
  243.                     </div>
  244.                 </div>
  245.             </div>
  246.         </div>
  247.     </section>
  252.     <section class="noel slider pt-5 mt-5" id="noel" style="padding-bottom: 110px;">
  253.         <div class="content pt-5 mt-5 pb-5">
  255.             <div class="row">
  256.                 <div class="col-md-4">{#
  257.                     {% if app.request.locale == 'de' %}
  258.                       <img src="/front/img/spectacle-noel-2023-de.jpg" width="100%"  alt="noel" />
  259.                     {% else %}
  260.                       <img src="/front/img/spectacle-noel-2023.jpg" width="100%"  alt="noel" />
  261.                     {% endif %} #}
  263.                     <img src="{{ asset('/front/img/2025/spectacle-enfants.jpg') }}" width="100%"  alt="spectacle enfants" />
  264.                 </div>
  265.                 <div class="col-md-7 offset-md-1">
  266.                     <p class="title">{{ 'spectacle_enfant'|tr(tr)|raw }}</p>
  268.                     <p class="subtitle pt-5">{{ 'spectacle_enfant_subtitle'|tr(tr)|raw }}</p>
  270.                     <p class="description">{{ 'spectacle_enfant_desc'|tr(tr)|raw }}</p>
  271.                     <div class="d-flex flex-column justify-content-between gap-1 w-125px flex-md-row">
  272.                         {#  <a href="/{{app.request.locale}}/housh-ma-housh" class="pointer-event-none">{{ 'reser_event_home'|tr(tr)|upper|raw }}</a> #}
  273.                         <a href="#" class="cal open-cal" data-date="{{ 'now'|date('Y') }}-{{ ('now'|date('m')|number_format == 12) ? '12' : '11' }}-01">{{ 'general_reserver2'|tr(tr)|upper|raw }}</a>
  274.                         {# <button class="cal rounded-5" data-bs-toggle="modal" data-bs-target="#menu-child">{{ 'voir_le_menu'|tr(tr)|upper|raw }}</button> #}
  275.                     </div>
  276.                 </div>
  277.             </div>
  278.         </div>
  280.     </section>
  286.     <section class="espace-content full mt-5 pt-5" id="evenements">
  287.         <div class="content">
  288.             <h2 class="mb-5">{{ 'menu_evenements'|tr(tr)|upper|raw }}</h2>
  289.             <p class="p-0">{{ 'events_title'|tr(tr)|raw }}</p>
  290.         </div>
  291.     </section>
  293.     <section class="evenements slider p-0 mt-5 mb-5">
  295.         <div class="content">
  296.             <div class="row p-0">
  298.                 {#             <div class="item col-md-6 mb-5">
  299.             <div class="row">
  300.               <div class="col-6 auto">
  301.                 <span class="name">{{ 'events_e1_title'|tr(tr)|upper|raw }}</span>
  302.                 <img alt="event" class="cover" src="/front/img/spectacle-event2.jpg" />
  304.                 <a href="#" class="order purple open-cal" data-date="{{ 'now'|date('Y') }}-12-01">{{ 'general_reserver'|tr(tr)|upper|raw }}</a>
  305.               </div>
  306.               <div class="col-6">
  307.                 <div class="description">
  308.                 {{ 'events_e1'|tr(tr)|raw }}
  310.                 </div>
  311.               </div>
  312.             </div>
  313.             </div> #}
  318.                 <div class="item col-md-6 mb-5">
  319.                     <div class="row">
  320.                         <div class="col-6 auto">
  321.                             <span class="name">{{ 'events_2024_e2_title'|tr(tr)|upper|raw }}</span>
  322.                             <img alt="event" class="cover" src="{{ asset('front/img/2025/oktoberfest.png') }}" />
  323.                             <a href="#" class="order purple link load-event" data-id="1946">
  324.                                 {{ 'general_reserver'|tr(tr)|raw }}
  325.                             </a>
  326.                         </div>
  327.                         <div class="col-6">
  328.                             <div class="description">
  329.                                 {{ 'events_2024_e2'|tr(tr)|raw }}
  330.                             </div>
  331.                         </div>
  332.                     </div>
  333.                 </div>
  335.                 <div class="item col-md-6 mb-5">
  336.                     <div class="row">
  337.                         <div class="col-6 auto">
  338.                             <span class="name">Noël D'or</span>
  339.                             <img alt="event" class="cover" src="{{ asset('front/img/2025/noel-or.jpg') }}" />
  340.                             <a href="#" class="order purple open-cal" data-date="2025-11-01">{{ 'general_reserver'|tr(tr)|upper|raw }}</a>
  341.                         </div>
  342.                         <div class="col-6">
  343.                             <div class="description">
  344.                                 {{ 'events_noel'|tr(tr)|raw }}
  345.                             </div>
  346.                         </div>
  347.                     </div>
  348.                 </div>
  349.                                   <div class="item col-md-12 mb-5 py-5">
  350.                     <div class="row">
  351.                         <div class="col-md-3 auto">
  352.                             <span class="name">{{ 'events_e1_title'|tr(tr)|upper|raw }}</span>
  353.                             <img alt="event" class="cover" src="{{ asset('front/img/evenements-2024/st-sylvestre.jpg') }}" />
  354.                             <a href="#" class="order purple open-cal" data-date="2025-12-31">{{ 'general_reserver'|tr(tr)|upper|raw }}</a>
  355.                         </div>
  356.                         <div class="col-md-9 row">
  357.                             <div class=" col-md-6">
  358.                                 <div class="description">
  359.                                     {{ 'events_2024_e3_gala'|tr(tr)|raw }}
  360.                                 </div>
  361.                             </div>
  362.                             <div class=" col-md-6">
  363.                                 <div class="description">
  364.                                     {{ 'events_2024_e3_loung'|tr(tr)|raw }}
  365.                                 </div>
  366.                             </div>
  367.                         </div>
  368.                     </div>
  369.                 </div>
  372.                 <div class="item col-md-6 mb-5">
  373.                     <div class="row">
  374.                         <div class="col-6 auto">
  375.                             <span class="name">{{ 'events_2024_e1_title'|tr(tr)|upper|raw }}</span>
  376.                             <img alt="event" class="cover" src="{{ asset('front/img/evenements-2024/st-valentin.jpg') }}" />
  377.                             <a href="#" class="order purple open-cal" data-date="2026-02-13">{{ 'general_reserver'|tr(tr)|upper|raw }}</a>
  378.                         </div>
  379.                         <div class="col-6">
  380.                             <div class="description">
  381.                                 {{ 'events_2024_e1'|tr(tr)|raw }}
  382.                             </div>
  383.                         </div>
  384.                     </div>
  385.                 </div>
  389.             </div>
  393.         </div>
  396.     </section>
  398.     <!-- Modale pour le menu père noel -->
  399.     <div class="modal fade" id="menu-child" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="MenuChildLabel" aria-hidden="true">
  400.         <div class="modal-dialog modal-dialog-centered">
  401.             <div class="modal-content border-3">
  402.                 <div class="modal-header border-bottom-0">
  403.                     <div class="d-flex justify-content-end space-modale">
  404.                         <h1 class="modal-title fs-5 " id="MenuChildLabel">  {{ 'menu_noel_enfant_title'|tr(tr)|raw }}</h1>
  405.                     </div>
  406.                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  407.                 </div>
  408.                 <div class="modal-body">
  409.                     <div class="d-flex justify-content-center mt-2">
  410.                         {{ 'menu_noel_enfant_content'|tr(tr)|raw }}
  411.                     </div>
  412.                 </div>
  413.             </div>
  414.         </div>
  415.     </div>
  416.     <!-- fin de la modale -->
  417.     <!-- Modale pour le menu saint-sylvestre --->
  418.     <div class="modal fade" id="menu-saint-sylvestre" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="MenuSaintSylvestreLabel" aria-hidden="true">
  419.         <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
  420.             <div class="modal-content border-3">
  421.                 <div class="modal-header border-bottom-0">
  422.                     <div class="d-flex justify-content-end space-modale2">
  423.                         <h1 class="modal-title fs-5 " id="MenuSaintSylvestreLabel">  {{ 'menus_tarifs_ss_title'|tr(tr)|raw }}</h1>
  424.                     </div>
  425.                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  426.                 </div>
  427.                 <div class="modal-body">
  428.                     <div class="d-flex justify-content-center mt-2">
  429.                         {{ 'menu_tarif_ss_home'|tr(tr)|raw }}
  430.                     </div>
  431.                 </div>
  432.             </div>
  433.         </div>
  434.     </div>
  435.     <!-- fin de la modale --->
  437.     {% include 'FrontBundle/Partial/footer.html.twig' %}
  440.     <!-- Root element of PhotoSwipe. Must have class pswp. -->
  441.     <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
  442.         <!-- Background of PhotoSwipe.
  443.           It's a separate element as animating opacity is faster than rgba(). -->
  444.         <div class="pswp__bg"></div>
  445.         <!-- Slides wrapper with overflow:hidden. -->
  446.         <div class="pswp__scroll-wrap">
  447.             <!-- Container that holds slides.
  448.               PhotoSwipe keeps only 3 of them in the DOM to save memory.
  449.               Don't modify these 3 pswp__item elements, data is added later on. -->
  450.             <div class="pswp__container">
  451.                 <div class="pswp__item"></div>
  452.                 <div class="pswp__item"></div>
  453.                 <div class="pswp__item"></div>
  454.             </div>
  455.             <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
  456.             <div class="pswp__ui pswp__ui--hidden">
  457.                 <div class="pswp__top-bar">
  458.                     <!--  Controls are self-explanatory. Order can be changed. -->
  459.                     <div class="pswp__counter"></div>
  460.                     <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
  461.                     <button class="pswp__button pswp__button--share" title="Share"></button>
  462.                     <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
  463.                     <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
  464.                     <!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR -->
  465.                     <!-- element will get class pswp__preloader--active when preloader is running -->
  466.                     <div class="pswp__preloader">
  467.                         <div class="pswp__preloader__icn">
  468.                             <div class="pswp__preloader__cut">
  469.                                 <div class="pswp__preloader__donut"></div>
  470.                             </div>
  471.                         </div>
  472.                     </div>
  473.                 </div>
  474.                 <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
  475.                     <div class="pswp__share-tooltip"></div>
  476.                 </div>
  477.                 <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
  478.                 </button>
  479.                 <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
  480.                 </button>
  481.                 <div class="pswp__caption">
  482.                     <div class="pswp__caption__center"></div>
  483.                 </div>
  484.             </div>
  485.         </div>
  486.     </div>
  489. {% endblock %}
  491. {% block javascripts %}
  493.     <script src="/front/js/owl.carousel.min.js"></script>
  494.     <script src="/plugins/photoswipe/photoswipe.min.js"></script>
  495.     <script src="/plugins/photoswipe/photoswipe-ui-default.min.js"></script>
  498.     <script type="text/javascript">
  500.         $( document ).ready(function() {
  502.             $('.open-date').on('click', function(e){
  503.                 e.preventDefault();
  504.                 loadEvent($(this).data('id'));
  505.             });
  508.             var url_anchor = $(location).attr('href');
  510.             url_anchor_arr = url_anchor.split("#");
  512.             if(url_anchor_arr.length > 1){
  513.                 console.log(url_anchor_arr[1]);
  515.                 setTimeout(function(){ $('.anchor a[href="#'+url_anchor_arr[1]+'"]').click(); }, 1000);
  517.             }
  522.             var owl2 = $('.noel .owl-carousel');
  523.             owl2.owlCarousel({
  524.                 loop: false,
  525.                 mouseDrag: false,
  526.                 touchDrag: false,
  527.                 pullDrag: false,
  528.                 // rewind: true,
  529.                 itemElement: 'figure',
  530.                 autoplay: false,
  531.                 margin:0,
  532.                 nav:true,
  533.                 dots:false,
  534.                 responsive:{
  535.                     0:{
  536.                         items:3
  537.                     },
  538.                     600:{
  539.                         items:3
  540.                     },
  541.                     1920:{
  542.                         items:3
  543.                     }
  544.                 }
  545.             });
  548.             owl.on('changed.owl.carousel', function(event) {
  550.                 var itemsNbr = owl.data()['owl.carousel'].settings.items;
  551.                 var itemsTotal = event.item.count;
  553.                 var itemsIndex = event.item.index;
  555.                 var pagesNbr = itemsTotal - itemsNbr;
  557.                 var horizontalBar = $('.horizontal-bar').outerWidth();
  558.                 var horizontalBarCtrl = $('.horizontal-bar-ctrl').outerWidth();
  560.                 var courseLength = $('.horizontal-bar').outerWidth() - $('.horizontal-bar-ctrl').outerWidth();
  562.                 var left = itemsIndex * 100 / pagesNbr; // percent
  564.                 left = left * courseLength / 100;
  566.                 $('.horizontal-bar-ctrl').css('left', left+'px');
  568.             });
  570.             owl2.on('changed.owl.carousel', function(event) {
  572.                 var itemsNbr = owl2.data()['owl.carousel'].settings.items;
  573.                 var itemsTotal = event.item.count;
  575.                 var itemsIndex = event.item.index;
  577.                 var pagesNbr = itemsTotal - itemsNbr;
  579.                 var horizontalBar = $('.noel .horizontal-bar').outerWidth();
  580.                 var horizontalBarCtrl = $('.noel .horizontal-bar-ctrl').outerWidth();
  582.                 var courseLength = $('.noel .horizontal-bar').outerWidth() - $('.noel .horizontal-bar-ctrl').outerWidth();
  584.                 var left = itemsIndex * 100 / pagesNbr; // percent
  586.                 left = left * courseLength / 100;
  588.                 $('.noel .horizontal-bar-ctrl').css('left', left+'px');
  590.             });
  593.             $('.owl-carousel.images a').each(function(index, value) {
  594.                 img = new Image();
  595.                 size = 0;
  596.                 const ident = $(this).attr('id').toString();
  597.                 img.onload = function() {
  598.                     $('#'+ident).attr('data-size', this.width + 'x' + this.height);
  599.                 }
  600.                 img.src = $(this).attr('source');
  602.             }).promise().done( function(){
  604.                 setTimeout( function(){
  605.                     initPhotoSwipeFromDOM('.my-gallery');
  606.                 }, 1000);
  608.             } );
  610.             $('.owl-carousel.images .owl-stage').addClass('my-gallery');
  611.             $('.owl-carousel.images .owl-stage').attr('itemscope');
  612.             $('.owl-carousel.images .owl-stage').attr('itemtype', 'http://schema.org/ImageGallery');
  614.             $('.owl-carousel.images .owl-item ').attr('itemscope');
  615.             $('.owl-carousel.images .owl-item ').attr('itemprop', 'associatedMedia');
  616.             $('.owl-carousel.images .owl-item ').attr('itemtype', 'http://schema.org/ImageObject');
  619.         });
  623.     </script>
  627.     <script type="text/javascript">
  631.         var initPhotoSwipeFromDOM = function(gallerySelector) {
  633.             // parse slide data (url, title, size ...) from DOM elements
  634.             // (children of gallerySelector)
  635.             var parseThumbnailElements = function(el) {
  637.                 console.log(el.childNodes);
  639.                 var thumbElements = el.childNodes,
  640.                     numNodes = thumbElements.length,
  641.                     items = [
  642.                         // {
  643.                         //   src: 'https://dummyimage.com/1000x1000/ccc/5cac22',
  644.                         //   w: '1024',
  645.                         //   h: '1024'
  646.                         // },
  647.                         // {
  648.                         //   src: 'https://dummyimage.com/1000x1000/5cac22/fff',
  649.                         //   w: '1024',
  650.                         //   h: '1024'
  651.                         // }
  652.                     ],
  653.                     figureEl,
  654.                     linkEl,
  655.                     size,
  656.                     item;
  660.                 for(var i = 0; i < numNodes; i++) {
  662.                     figureEl = thumbElements[i]; // <figure> element
  664.                     // include only element nodes
  665.                     if(figureEl.nodeType !== 1) {
  666.                         continue;
  667.                     }
  669.                     linkEl = figureEl.children[0]; // <a> element
  671.                     size = linkEl.getAttribute('data-size').split('x');
  673.                     // create slide object
  674.                     item = {
  675.                         src: linkEl.getAttribute('href'),
  676.                         w: parseInt(size[0], 10),
  677.                         h: parseInt(size[1], 10)
  678.                     };
  683.                     if(figureEl.children.length > 1) {
  684.                         // <figcaption> content
  685.                         item.title = figureEl.children[1].innerHTML;
  686.                     }
  688.                     if(linkEl.children.length > 0) {
  689.                         // <img> thumbnail element, retrieving thumbnail url
  690.                         item.msrc = linkEl.children[0].getAttribute('src');
  691.                     }
  693.                     item.el = figureEl; // save link to element for getThumbBoundsFn
  694.                     items.push(item);
  695.                 }
  697.                 return items;
  698.             };
  700.             // find nearest parent element
  701.             var closest = function closest(el, fn) {
  702.                 return el && ( fn(el) ? el : closest(el.parentNode, fn) );
  703.             };
  705.             // triggers when user clicks on thumbnail
  706.             var onThumbnailsClick = function(e) {
  707.                 e = e || window.event;
  708.                 e.preventDefault ? e.preventDefault() : e.returnValue = false;
  710.                 var eTarget = e.target || e.srcElement;
  712.                 // find root element of slide
  713.                 var clickedListItem = closest(eTarget, function(el) {
  714.                     return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
  715.                 });
  717.                 if(!clickedListItem) {
  718.                     return;
  719.                 }
  721.                 // find index of clicked item by looping through all child nodes
  722.                 // alternatively, you may define index via data- attribute
  723.                 var clickedGallery = clickedListItem.parentNode,
  724.                     childNodes = clickedListItem.parentNode.childNodes,
  725.                     numChildNodes = childNodes.length,
  726.                     nodeIndex = 0,
  727.                     index;
  729.                 for (var i = 0; i < numChildNodes; i++) {
  730.                     if(childNodes[i].nodeType !== 1) {
  731.                         continue;
  732.                     }
  734.                     if(childNodes[i] === clickedListItem) {
  735.                         index = nodeIndex;
  736.                         break;
  737.                     }
  738.                     nodeIndex++;
  739.                 }
  743.                 if(index >= 0) {
  744.                     // open PhotoSwipe if valid index found
  745.                     openPhotoSwipe( index, clickedGallery );
  746.                 }
  747.                 return false;
  748.             };
  750.             // parse picture index and gallery index from URL (#&pid=1&gid=2)
  751.             var photoswipeParseHash = function() {
  752.                 var hash = window.location.hash.substring(1),
  753.                     params = {};
  755.                 if(hash.length < 5) {
  756.                     return params;
  757.                 }
  759.                 var vars = hash.split('&');
  760.                 for (var i = 0; i < vars.length; i++) {
  761.                     if(!vars[i]) {
  762.                         continue;
  763.                     }
  764.                     var pair = vars[i].split('=');
  765.                     if(pair.length < 2) {
  766.                         continue;
  767.                     }
  768.                     params[pair[0]] = pair[1];
  769.                 }
  771.                 if(params.gid) {
  772.                     params.gid = parseInt(params.gid, 10);
  773.                 }
  775.                 return params;
  776.             };
  778.             var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
  779.                 var pswpElement = document.querySelectorAll('.pswp')[0],
  780.                     gallery,
  781.                     options,
  782.                     items;
  784.                 items = parseThumbnailElements(galleryElement);
  786.                 // define options (if needed)
  787.                 options = {
  789.                     // define gallery index (for URL)
  790.                     galleryUID: galleryElement.getAttribute('data-pswp-uid'),
  792.                     getThumbBoundsFn: function(index) {
  793.                         // See Options -> getThumbBoundsFn section of documentation for more info
  794.                         var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
  795.                             pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
  796.                             rect = thumbnail.getBoundingClientRect();
  798.                         return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
  799.                     }
  801.                 };
  803.                 // PhotoSwipe opened from URL
  804.                 if(fromURL) {
  805.                     if(options.galleryPIDs) {
  806.                         // parse real index when custom PIDs are used
  807.                         // http://photoswipe.com/documentation/faq.html#custom-pid-in-url
  808.                         for(var j = 0; j < items.length; j++) {
  809.                             if(items[j].pid == index) {
  810.                                 options.index = j;
  811.                                 break;
  812.                             }
  813.                         }
  814.                     } else {
  815.                         // in URL indexes start from 1
  816.                         options.index = parseInt(index, 10) - 1;
  817.                     }
  818.                 } else {
  819.                     options.index = parseInt(index, 10);
  820.                 }
  822.                 // exit if index not found
  823.                 if( isNaN(options.index) ) {
  824.                     return;
  825.                 }
  827.                 if(disableAnimation) {
  828.                     options.showAnimationDuration = 0;
  829.                 }
  831.                 // Pass data to PhotoSwipe and initialize it
  832.                 gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
  833.                 gallery.init();
  834.             };
  836.             // loop through all gallery elements and bind events
  837.             var galleryElements = document.querySelectorAll( gallerySelector );
  839.             for(var i = 0, l = galleryElements.length; i < l; i++) {
  840.                 galleryElements[i].setAttribute('data-pswp-uid', i+1);
  841.                 galleryElements[i].onclick = onThumbnailsClick;
  842.             }
  844.             // Parse URL and open gallery if it contains #&pid=3&gid=1
  845.             var hashData = photoswipeParseHash();
  846.             if(hashData.pid && hashData.gid) {
  847.                 openPhotoSwipe( hashData.pid ,  galleryElements[ hashData.gid - 1 ], true, true );
  848.             }
  849.         };
  852.     </script>
  854. {% endblock %}