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">
  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>
  178.                                         {% if concert.id == 1672 %}
  179.                                             <p class="desc mb-3">{{ 'concert_food3'|tr(tr)|raw }}</p>
  180.                                         {% else %}
  181.                                             <p class="desc mb-3">{{ (concert.venueType.food) ? 'concert_food'|tr(tr)|raw : 'concert_nofood'|tr(tr)|raw }}</p>
  182.                                         {% endif %}
  183.                                     </div>
  184.                                 </div>
  185.                             </div>
  186.                         </div>
  187.                         {% if loop.index == 8 and current <= deadline %}
  188.                             <!-- Pour Oktoberfest -->
  189.                             <div class="item col-md-6">
  190.                                 <div class="row mb-5">
  191.                                     <div class="col-6 auto">
  192.                                         <img alt="concert" class="cover" src="{{ asset('front/img/evenements-2024/oktoberfest-min.jpg') }}" />
  193.                                         <a href="#" class="order red load-event" data-id="1439">
  194.                                             {{ 'general_reserver'|tr(tr)|upper|raw }}
  195.                                         </a>
  196.                                     </div>
  197.                                     <div class="col-6">
  198.                                         <div class="description">
  199.                                             <span class="name-title"><span>OKTOBERFEST</span></span>
  200.                                             {% if app.request.locale == 'de' %}
  201.                                                 <p>Donnerstag, 31. Oktober 2024 / 21h </p>
  202.                                             {% elseif app.request.locale == 'en' %}
  203.                                                 <p>Thursday 31 October 2024 / 21h</p>
  204.                                             {% else %}
  205.                                                 <p>Jeudi 31 Octobre 2024 / 21h</p>
  206.                                             {% endif %}
  207.                                             <hr>
  208.                                             <p class="desc mb-3">{{ 'events_2024_spe'|tr(tr)|raw }}</p>
  209.                                             <p class="desc mt-3">*{{ 'menus_tarifs_horsrepas'|tr(tr)|raw }}</p>
  210.                                             <p class="desc mb-3">{{ 'concert_food2'|tr(tr)|raw }}</p>
  211.                                         </div>
  212.                                     </div>
  213.                                 </div>
  214.                             </div>
  215.                             {% set oktoberfest_added = true %}
  216.                         {% endif %}
  217.                     {% endif %}
  218.                 {% endfor %}
  222.                 <div class="item row">
  223.                     <div class="col-6 auto">
  224.                         &nbsp;
  225.                     </div>
  226.                     <div class="col-6">
  227.                         <div class="description">
  228.                             &nbsp;
  229.                         </div>
  230.                     </div>
  231.                 </div>
  232.             </div>
  233.         </div>
  234.     </section>
  239.     <section class="noel slider pt-5 mt-5" id="noel" style="padding-bottom: 110px;">
  240.         <div class="content pt-5 mt-5 pb-5">
  242.             <div class="row">
  243.                 <div class="col-md-4">{#
  244.                     {% if app.request.locale == 'de' %}
  245.                       <img src="/front/img/spectacle-noel-2023-de.jpg" width="100%"  alt="noel" />
  246.                     {% else %}
  247.                       <img src="/front/img/spectacle-noel-2023.jpg" width="100%"  alt="noel" />
  248.                     {% endif %} #}
  250.                     <img src="{{ asset('/front/img/2025/spectacle-enfants.jpg') }}" width="100%"  alt="spectacle enfants" />
  251.                 </div>
  252.                 <div class="col-md-7 offset-md-1">
  253.                     <p class="title">{{ 'spectacle_enfant'|tr(tr)|raw }}</p>
  255.                     <p class="subtitle pt-5">{{ 'spectacle_enfant_subtitle'|tr(tr)|raw }}</p>
  257.                     <p class="description">{{ 'spectacle_enfant_desc'|tr(tr)|raw }}</p>
  258.                     <div class="d-flex flex-column justify-content-between gap-1 w-125px flex-md-row">
  259.                         {#  <a href="/{{app.request.locale}}/housh-ma-housh" class="pointer-event-none">{{ 'reser_event_home'|tr(tr)|upper|raw }}</a> #}
  260.                         <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>
  261.                         {# <button class="cal rounded-5" data-bs-toggle="modal" data-bs-target="#menu-child">{{ 'voir_le_menu'|tr(tr)|upper|raw }}</button> #}
  262.                     </div>
  263.                 </div>
  264.             </div>
  265.         </div>
  267.     </section>
  273.     <section class="espace-content full mt-5 pt-5" id="evenements">
  274.         <div class="content">
  275.             <h2 class="mb-5">{{ 'menu_evenements'|tr(tr)|upper|raw }}</h2>
  276.             <p class="p-0">{{ 'events_title'|tr(tr)|raw }}</p>
  277.         </div>
  278.     </section>
  280.     <section class="evenements slider p-0 mt-5 mb-5">
  282.         <div class="content">
  283.             <div class="row p-0">
  285.                 {#             <div class="item col-md-6 mb-5">
  286.             <div class="row">
  287.               <div class="col-6 auto">
  288.                 <span class="name">{{ 'events_e1_title'|tr(tr)|upper|raw }}</span>
  289.                 <img alt="event" class="cover" src="/front/img/spectacle-event2.jpg" />
  291.                 <a href="#" class="order purple open-cal" data-date="{{ 'now'|date('Y') }}-12-01">{{ 'general_reserver'|tr(tr)|upper|raw }}</a>
  292.               </div>
  293.               <div class="col-6">
  294.                 <div class="description">
  295.                 {{ 'events_e1'|tr(tr)|raw }}
  297.                 </div>
  298.               </div>
  299.             </div>
  300.             </div> #}
  305.                 <div class="item col-md-6 mb-5">
  306.                     <div class="row">
  307.                         <div class="col-6 auto">
  308.                             <span class="name">{{ 'events_2024_e2_title'|tr(tr)|upper|raw }}</span>
  309.                             <img alt="event" class="cover" src="{{ asset('front/img/2025/oktoberfest.png') }}" />
  310.                             <a href="#" class="order purple link load-event" data-id="1946">
  311.                                 {{ 'general_reserver'|tr(tr)|raw }}
  312.                             </a>
  313.                         </div>
  314.                         <div class="col-6">
  315.                             <div class="description">
  316.                                 {{ 'events_2024_e2'|tr(tr)|raw }}
  317.                             </div>
  318.                         </div>
  319.                     </div>
  320.                 </div>
  322.                 <div class="item col-md-6 mb-5">
  323.                     <div class="row">
  324.                         <div class="col-6 auto">
  325.                             <span class="name">Noël D'or</span>
  326.                             <img alt="event" class="cover" src="{{ asset('front/img/2025/noel-or.jpg') }}" />
  327.                             <a href="#" class="order purple open-cal" data-date="2025-11-01">{{ 'general_reserver'|tr(tr)|upper|raw }}</a>
  328.                         </div>
  329.                         <div class="col-6">
  330.                             <div class="description">
  331.                                 {{ 'events_noel'|tr(tr)|raw }}
  332.                             </div>
  333.                         </div>
  334.                     </div>
  335.                 </div>
  336.                                   <div class="item col-md-12 mb-5 py-5">
  337.                     <div class="row">
  338.                         <div class="col-md-3 auto">
  339.                             <span class="name">{{ 'events_e1_title'|tr(tr)|upper|raw }}</span>
  340.                             <img alt="event" class="cover" src="{{ asset('front/img/evenements-2024/st-sylvestre.jpg') }}" />
  341.                             <a href="#" class="order purple open-cal" data-date="2025-12-31">{{ 'general_reserver'|tr(tr)|upper|raw }}</a>
  342.                         </div>
  343.                         <div class="col-md-9 row">
  344.                             <div class=" col-md-6">
  345.                                 <div class="description">
  346.                                     {{ 'events_2024_e3_gala'|tr(tr)|raw }}
  347.                                 </div>
  348.                             </div>
  349.                             <div class=" col-md-6">
  350.                                 <div class="description">
  351.                                     {{ 'events_2024_e3_loung'|tr(tr)|raw }}
  352.                                 </div>
  353.                             </div>
  354.                         </div>
  355.                     </div>
  356.                 </div>
  359.                 <div class="item col-md-6 mb-5">
  360.                     <div class="row">
  361.                         <div class="col-6 auto">
  362.                             <span class="name">{{ 'events_2024_e1_title'|tr(tr)|upper|raw }}</span>
  363.                             <img alt="event" class="cover" src="{{ asset('front/img/evenements-2024/st-valentin.jpg') }}" />
  364.                             <a href="#" class="order purple open-cal" data-date="2026-02-13">{{ 'general_reserver'|tr(tr)|upper|raw }}</a>
  365.                         </div>
  366.                         <div class="col-6">
  367.                             <div class="description">
  368.                                 {{ 'events_2024_e1'|tr(tr)|raw }}
  369.                             </div>
  370.                         </div>
  371.                     </div>
  372.                 </div>
  376.             </div>
  380.         </div>
  383.     </section>
  385.     <!-- Modale pour le menu père noel -->
  386.     <div class="modal fade" id="menu-child" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="MenuChildLabel" aria-hidden="true">
  387.         <div class="modal-dialog modal-dialog-centered">
  388.             <div class="modal-content border-3">
  389.                 <div class="modal-header border-bottom-0">
  390.                     <div class="d-flex justify-content-end space-modale">
  391.                         <h1 class="modal-title fs-5 " id="MenuChildLabel">  {{ 'menu_noel_enfant_title'|tr(tr)|raw }}</h1>
  392.                     </div>
  393.                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  394.                 </div>
  395.                 <div class="modal-body">
  396.                     <div class="d-flex justify-content-center mt-2">
  397.                         {{ 'menu_noel_enfant_content'|tr(tr)|raw }}
  398.                     </div>
  399.                 </div>
  400.             </div>
  401.         </div>
  402.     </div>
  403.     <!-- fin de la modale -->
  404.     <!-- Modale pour le menu saint-sylvestre --->
  405.     <div class="modal fade" id="menu-saint-sylvestre" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="MenuSaintSylvestreLabel" aria-hidden="true">
  406.         <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
  407.             <div class="modal-content border-3">
  408.                 <div class="modal-header border-bottom-0">
  409.                     <div class="d-flex justify-content-end space-modale2">
  410.                         <h1 class="modal-title fs-5 " id="MenuSaintSylvestreLabel">  {{ 'menus_tarifs_ss_title'|tr(tr)|raw }}</h1>
  411.                     </div>
  412.                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  413.                 </div>
  414.                 <div class="modal-body">
  415.                     <div class="d-flex justify-content-center mt-2">
  416.                         {{ 'menu_tarif_ss_home'|tr(tr)|raw }}
  417.                     </div>
  418.                 </div>
  419.             </div>
  420.         </div>
  421.     </div>
  422.     <!-- fin de la modale --->
  424.     {% include 'FrontBundle/Partial/footer.html.twig' %}
  427.     <!-- Root element of PhotoSwipe. Must have class pswp. -->
  428.     <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
  429.         <!-- Background of PhotoSwipe.
  430.           It's a separate element as animating opacity is faster than rgba(). -->
  431.         <div class="pswp__bg"></div>
  432.         <!-- Slides wrapper with overflow:hidden. -->
  433.         <div class="pswp__scroll-wrap">
  434.             <!-- Container that holds slides.
  435.               PhotoSwipe keeps only 3 of them in the DOM to save memory.
  436.               Don't modify these 3 pswp__item elements, data is added later on. -->
  437.             <div class="pswp__container">
  438.                 <div class="pswp__item"></div>
  439.                 <div class="pswp__item"></div>
  440.                 <div class="pswp__item"></div>
  441.             </div>
  442.             <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
  443.             <div class="pswp__ui pswp__ui--hidden">
  444.                 <div class="pswp__top-bar">
  445.                     <!--  Controls are self-explanatory. Order can be changed. -->
  446.                     <div class="pswp__counter"></div>
  447.                     <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
  448.                     <button class="pswp__button pswp__button--share" title="Share"></button>
  449.                     <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
  450.                     <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
  451.                     <!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR -->
  452.                     <!-- element will get class pswp__preloader--active when preloader is running -->
  453.                     <div class="pswp__preloader">
  454.                         <div class="pswp__preloader__icn">
  455.                             <div class="pswp__preloader__cut">
  456.                                 <div class="pswp__preloader__donut"></div>
  457.                             </div>
  458.                         </div>
  459.                     </div>
  460.                 </div>
  461.                 <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
  462.                     <div class="pswp__share-tooltip"></div>
  463.                 </div>
  464.                 <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
  465.                 </button>
  466.                 <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
  467.                 </button>
  468.                 <div class="pswp__caption">
  469.                     <div class="pswp__caption__center"></div>
  470.                 </div>
  471.             </div>
  472.         </div>
  473.     </div>
  476. {% endblock %}
  478. {% block javascripts %}
  480.     <script src="/front/js/owl.carousel.min.js"></script>
  481.     <script src="/plugins/photoswipe/photoswipe.min.js"></script>
  482.     <script src="/plugins/photoswipe/photoswipe-ui-default.min.js"></script>
  485.     <script type="text/javascript">
  487.         $( document ).ready(function() {
  489.             $('.open-date').on('click', function(e){
  490.                 e.preventDefault();
  491.                 loadEvent($(this).data('id'));
  492.             });
  495.             var url_anchor = $(location).attr('href');
  497.             url_anchor_arr = url_anchor.split("#");
  499.             if(url_anchor_arr.length > 1){
  500.                 console.log(url_anchor_arr[1]);
  502.                 setTimeout(function(){ $('.anchor a[href="#'+url_anchor_arr[1]+'"]').click(); }, 1000);
  504.             }
  509.             var owl2 = $('.noel .owl-carousel');
  510.             owl2.owlCarousel({
  511.                 loop: false,
  512.                 mouseDrag: false,
  513.                 touchDrag: false,
  514.                 pullDrag: false,
  515.                 // rewind: true,
  516.                 itemElement: 'figure',
  517.                 autoplay: false,
  518.                 margin:0,
  519.                 nav:true,
  520.                 dots:false,
  521.                 responsive:{
  522.                     0:{
  523.                         items:3
  524.                     },
  525.                     600:{
  526.                         items:3
  527.                     },
  528.                     1920:{
  529.                         items:3
  530.                     }
  531.                 }
  532.             });
  535.             owl.on('changed.owl.carousel', function(event) {
  537.                 var itemsNbr = owl.data()['owl.carousel'].settings.items;
  538.                 var itemsTotal = event.item.count;
  540.                 var itemsIndex = event.item.index;
  542.                 var pagesNbr = itemsTotal - itemsNbr;
  544.                 var horizontalBar = $('.horizontal-bar').outerWidth();
  545.                 var horizontalBarCtrl = $('.horizontal-bar-ctrl').outerWidth();
  547.                 var courseLength = $('.horizontal-bar').outerWidth() - $('.horizontal-bar-ctrl').outerWidth();
  549.                 var left = itemsIndex * 100 / pagesNbr; // percent
  551.                 left = left * courseLength / 100;
  553.                 $('.horizontal-bar-ctrl').css('left', left+'px');
  555.             });
  557.             owl2.on('changed.owl.carousel', function(event) {
  559.                 var itemsNbr = owl2.data()['owl.carousel'].settings.items;
  560.                 var itemsTotal = event.item.count;
  562.                 var itemsIndex = event.item.index;
  564.                 var pagesNbr = itemsTotal - itemsNbr;
  566.                 var horizontalBar = $('.noel .horizontal-bar').outerWidth();
  567.                 var horizontalBarCtrl = $('.noel .horizontal-bar-ctrl').outerWidth();
  569.                 var courseLength = $('.noel .horizontal-bar').outerWidth() - $('.noel .horizontal-bar-ctrl').outerWidth();
  571.                 var left = itemsIndex * 100 / pagesNbr; // percent
  573.                 left = left * courseLength / 100;
  575.                 $('.noel .horizontal-bar-ctrl').css('left', left+'px');
  577.             });
  580.             $('.owl-carousel.images a').each(function(index, value) {
  581.                 img = new Image();
  582.                 size = 0;
  583.                 const ident = $(this).attr('id').toString();
  584.                 img.onload = function() {
  585.                     $('#'+ident).attr('data-size', this.width + 'x' + this.height);
  586.                 }
  587.                 img.src = $(this).attr('source');
  589.             }).promise().done( function(){
  591.                 setTimeout( function(){
  592.                     initPhotoSwipeFromDOM('.my-gallery');
  593.                 }, 1000);
  595.             } );
  597.             $('.owl-carousel.images .owl-stage').addClass('my-gallery');
  598.             $('.owl-carousel.images .owl-stage').attr('itemscope');
  599.             $('.owl-carousel.images .owl-stage').attr('itemtype', 'http://schema.org/ImageGallery');
  601.             $('.owl-carousel.images .owl-item ').attr('itemscope');
  602.             $('.owl-carousel.images .owl-item ').attr('itemprop', 'associatedMedia');
  603.             $('.owl-carousel.images .owl-item ').attr('itemtype', 'http://schema.org/ImageObject');
  606.         });
  610.     </script>
  614.     <script type="text/javascript">
  618.         var initPhotoSwipeFromDOM = function(gallerySelector) {
  620.             // parse slide data (url, title, size ...) from DOM elements
  621.             // (children of gallerySelector)
  622.             var parseThumbnailElements = function(el) {
  624.                 console.log(el.childNodes);
  626.                 var thumbElements = el.childNodes,
  627.                     numNodes = thumbElements.length,
  628.                     items = [
  629.                         // {
  630.                         //   src: 'https://dummyimage.com/1000x1000/ccc/5cac22',
  631.                         //   w: '1024',
  632.                         //   h: '1024'
  633.                         // },
  634.                         // {
  635.                         //   src: 'https://dummyimage.com/1000x1000/5cac22/fff',
  636.                         //   w: '1024',
  637.                         //   h: '1024'
  638.                         // }
  639.                     ],
  640.                     figureEl,
  641.                     linkEl,
  642.                     size,
  643.                     item;
  647.                 for(var i = 0; i < numNodes; i++) {
  649.                     figureEl = thumbElements[i]; // <figure> element
  651.                     // include only element nodes
  652.                     if(figureEl.nodeType !== 1) {
  653.                         continue;
  654.                     }
  656.                     linkEl = figureEl.children[0]; // <a> element
  658.                     size = linkEl.getAttribute('data-size').split('x');
  660.                     // create slide object
  661.                     item = {
  662.                         src: linkEl.getAttribute('href'),
  663.                         w: parseInt(size[0], 10),
  664.                         h: parseInt(size[1], 10)
  665.                     };
  670.                     if(figureEl.children.length > 1) {
  671.                         // <figcaption> content
  672.                         item.title = figureEl.children[1].innerHTML;
  673.                     }
  675.                     if(linkEl.children.length > 0) {
  676.                         // <img> thumbnail element, retrieving thumbnail url
  677.                         item.msrc = linkEl.children[0].getAttribute('src');
  678.                     }
  680.                     item.el = figureEl; // save link to element for getThumbBoundsFn
  681.                     items.push(item);
  682.                 }
  684.                 return items;
  685.             };
  687.             // find nearest parent element
  688.             var closest = function closest(el, fn) {
  689.                 return el && ( fn(el) ? el : closest(el.parentNode, fn) );
  690.             };
  692.             // triggers when user clicks on thumbnail
  693.             var onThumbnailsClick = function(e) {
  694.                 e = e || window.event;
  695.                 e.preventDefault ? e.preventDefault() : e.returnValue = false;
  697.                 var eTarget = e.target || e.srcElement;
  699.                 // find root element of slide
  700.                 var clickedListItem = closest(eTarget, function(el) {
  701.                     return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
  702.                 });
  704.                 if(!clickedListItem) {
  705.                     return;
  706.                 }
  708.                 // find index of clicked item by looping through all child nodes
  709.                 // alternatively, you may define index via data- attribute
  710.                 var clickedGallery = clickedListItem.parentNode,
  711.                     childNodes = clickedListItem.parentNode.childNodes,
  712.                     numChildNodes = childNodes.length,
  713.                     nodeIndex = 0,
  714.                     index;
  716.                 for (var i = 0; i < numChildNodes; i++) {
  717.                     if(childNodes[i].nodeType !== 1) {
  718.                         continue;
  719.                     }
  721.                     if(childNodes[i] === clickedListItem) {
  722.                         index = nodeIndex;
  723.                         break;
  724.                     }
  725.                     nodeIndex++;
  726.                 }
  730.                 if(index >= 0) {
  731.                     // open PhotoSwipe if valid index found
  732.                     openPhotoSwipe( index, clickedGallery );
  733.                 }
  734.                 return false;
  735.             };
  737.             // parse picture index and gallery index from URL (#&pid=1&gid=2)
  738.             var photoswipeParseHash = function() {
  739.                 var hash = window.location.hash.substring(1),
  740.                     params = {};
  742.                 if(hash.length < 5) {
  743.                     return params;
  744.                 }
  746.                 var vars = hash.split('&');
  747.                 for (var i = 0; i < vars.length; i++) {
  748.                     if(!vars[i]) {
  749.                         continue;
  750.                     }
  751.                     var pair = vars[i].split('=');
  752.                     if(pair.length < 2) {
  753.                         continue;
  754.                     }
  755.                     params[pair[0]] = pair[1];
  756.                 }
  758.                 if(params.gid) {
  759.                     params.gid = parseInt(params.gid, 10);
  760.                 }
  762.                 return params;
  763.             };
  765.             var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
  766.                 var pswpElement = document.querySelectorAll('.pswp')[0],
  767.                     gallery,
  768.                     options,
  769.                     items;
  771.                 items = parseThumbnailElements(galleryElement);
  773.                 // define options (if needed)
  774.                 options = {
  776.                     // define gallery index (for URL)
  777.                     galleryUID: galleryElement.getAttribute('data-pswp-uid'),
  779.                     getThumbBoundsFn: function(index) {
  780.                         // See Options -> getThumbBoundsFn section of documentation for more info
  781.                         var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
  782.                             pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
  783.                             rect = thumbnail.getBoundingClientRect();
  785.                         return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
  786.                     }
  788.                 };
  790.                 // PhotoSwipe opened from URL
  791.                 if(fromURL) {
  792.                     if(options.galleryPIDs) {
  793.                         // parse real index when custom PIDs are used
  794.                         // http://photoswipe.com/documentation/faq.html#custom-pid-in-url
  795.                         for(var j = 0; j < items.length; j++) {
  796.                             if(items[j].pid == index) {
  797.                                 options.index = j;
  798.                                 break;
  799.                             }
  800.                         }
  801.                     } else {
  802.                         // in URL indexes start from 1
  803.                         options.index = parseInt(index, 10) - 1;
  804.                     }
  805.                 } else {
  806.                     options.index = parseInt(index, 10);
  807.                 }
  809.                 // exit if index not found
  810.                 if( isNaN(options.index) ) {
  811.                     return;
  812.                 }
  814.                 if(disableAnimation) {
  815.                     options.showAnimationDuration = 0;
  816.                 }
  818.                 // Pass data to PhotoSwipe and initialize it
  819.                 gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
  820.                 gallery.init();
  821.             };
  823.             // loop through all gallery elements and bind events
  824.             var galleryElements = document.querySelectorAll( gallerySelector );
  826.             for(var i = 0, l = galleryElements.length; i < l; i++) {
  827.                 galleryElements[i].setAttribute('data-pswp-uid', i+1);
  828.                 galleryElements[i].onclick = onThumbnailsClick;
  829.             }
  831.             // Parse URL and open gallery if it contains #&pid=3&gid=1
  832.             var hashData = photoswipeParseHash();
  833.             if(hashData.pid && hashData.gid) {
  834.                 openPhotoSwipe( hashData.pid ,  galleryElements[ hashData.gid - 1 ], true, true );
  835.             }
  836.         };
  839.     </script>
  841. {% endblock %}