templates/FrontBundle/Page/spectacle-le-parfum-des-etoiles.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 %}
  6. {% block extra_class %}native page_spectacle{% endblock %}
  7. {% block menu_min %}931{% endblock %}
  8. {# {% block menu_max %}3076{% endblock %} #}
  11. {% block sub_header %}
  13.     <div class="sub-header anchor">
  14.         <ul>
  15.             <li><a href="#spectacle">GRAND AMOUR</a></li>
  16.             <li><a href="#artistes">{{ 'spectacle_artistes'|tr(tr)|raw }}</a></li>
  17.             <li><a href="#coulisses">{{ 'spectacle_coulisses'|tr(tr)|raw }}</a></li>
  18.         </ul>
  19.     </div>
  21. {% endblock %}
  24. {% block stylesheets %}
  25.     <link href="/front/css/owl.carousel.min.css" rel="stylesheet">
  26.     <link href="/front/css/owl.theme.default.min.css" rel="stylesheet">
  27.     <link href="/plugins/photoswipe/photoswipe.css" rel="stylesheet">
  28.     <link href="/plugins/photoswipe/default-skin/default-skin.css" rel="stylesheet" type="text/css"/>
  29.     <link href="/front/css/carousel.css" rel="stylesheet">
  30.     <style>
  31.         .menus-tarifs-callendar {
  32.             background-image: url('/front/img/2025/background-parfum-etoiles.jpg');
  33.         }
  35.         @media (max-width: 1024px)
  36.         {
  37.             .menus-tarifs-callendar {
  38.                 background-image: url('/front/img/2025/background-parfum-etoiles-mobile.jpg') !important;
  39.             }
  40.         }
  42.         @media (max-width: 768px)
  43.         {
  44.             .page_spectacle .slider p.desc {
  45.                 width: 240px;
  46.                 left: calc(50% - 120px);
  47.             }
  48.         }
  50.         section.slider .item .desc {
  51.             display: none;
  52.         }
  54.         .page_spectacle .mini-suites .name {
  55.             bottom: 170px;
  56.         }
  58.         .page_spectacle #spectacle {
  59.             background-image: none;
  60.         }
  62.         .home:before {
  63.             background: rgba(0, 0, 0, 0.2);
  64.         }
  65. </style>
  66. {% endblock %}
  68. {% block body %}
  69.     {#
  71.     <section class="info-header2 anchor">
  72.       <ul>
  73.         <li><a href="#spectacle">Frénésie</a></li>
  74.         <li><a href="#artistes">Artistes</a></li>
  75.         <li><a href="#coulisses">Coulisses</a></li>
  76.       </ul>
  77.     </section>
  79.     #}
  81.     <section class="menus-tarifs-callendar espace-header spectacle-header p-0 home">
  82.         {# <video class="video-slide active" src="/front/videos/palace3.mp4" autoplay muted loop playsinline></video> #}
  83.         <div class="content pt-0 hide">
  84.             {#<p>
  85.                 <img src="/front/img/spectacle-title-line.svg" alt="line" class="page_spectacle_logo_line" />
  86.                 <img src="/front/img/grand-amour-w.svg" alt="line" class="page_spectacle_logo" />
  87.                 <img src="/front/img/spectacle-title-line.svg" alt="line" class="page_spectacle_logo_line"  />
  88.             </p>#}
  89.             <h1>Parfum d'étoiles</h1>
  90.             <p class="sub-title mb-0">{{ 'grandamour_title'|tr(tr)|raw }}</p>
  91.             <p class="desc mt-5 pt-2 mb-0">{{ 'grandamour_subtitle'|tr(tr)|raw }}</p>
  92.         </div>
  94.         <a href="/{{app.request.locale }}/{{ 'reservation'|getUrl(app.request.locale) }}?event=main" class="order-btn">{{ 'general_reserver'|tr(tr)|raw }}</a>
  96.         <a href="#spectacle" class="arrow-btn"><img src="/front/img/spectacle-header-arrow-b.svg" alt="next" width="20px" /></a>
  98.         {% set cata_link = '/front/2025_Royal_Palace_Le_Parfum_Des_Etoiles_fr.pdf' %}
  99.         {% if app.request.locale == 'de' %}
  100.             {% set cata_link = '/front/2025_Royal_Palace_Le_Parfum_Des_Etoiles_de.pdf' %}
  101.         {% endif %}
  102.         <a href="{{cata_link}}" class="cata-btn" target="_blank">{{ 'spectacle_cata'|tr(tr)|raw }} <img src="/front/img/espaces-down-link.svg" alt="dowload" width="33px" /></a>
  105.         <ul>
  106.             <li class="active"><a href="#spectacle">Parfum d'étoiles</a></li>
  107.             <li><a href="#artistes">{{ 'spectacle_artistes'|tr(tr)|raw }}</a></li>
  108.             <li><a href="#coulisses">{{ 'spectacle_coulisses'|tr(tr)|raw }}</a></li>
  109.         </ul>
  111.     </section>
  114. {% if app.request.locale == 'fr' %}
  115.     <section id="spectacle" class="espace-content full pt-5 mt-5 overflow-h overflow-y-h">
  116.         <div class="content">
  117.             <h1 class="pt-5 mb-3 no-bar" style="text-transform: uppercase;">SPECTACLE Parfum d'étoiles<span class="full-bar"></span></h1>
  119.             <h5 class="mb-3 mt-5">LE ROYAL PALACE fête ses 45 ans de Cabaret !</h5>
  120.             <p class="p-0">Quarante-cinq années de passion, de créativité et de spectacles inoubliables !<br>
  121.             C’est grâce à vous, notre précieux public, que nous avons pu atteindre
  122.             ce jalon et propulser notre Music-Hall à la deuxième place en France.<br>
  123.             En s'entourant des meilleurs spécialistes dans le domaine artistique, au fil des
  124.             années, nous avons conçu des spectacles audacieux et contemporains, toujours
  125.             en phase avec notre temps, ravissant ainsi un public de tous âges.<br>
  126.             Pour marquer cet événement exceptionnel, nous vous
  127.             présentons un spectacle à la hauteur de cette célébration !<br>
  128.                 Découvrez notre nouveau spectacle : </p>
  131.             <h5 class="mb-3 mt-5">PARFUM D'ÉTOILES !</h5>
  132.             <p class="p-0">
  133.                 «Après une pluie d’étoiles, la Terre s’est métamorphosée : faune, flore et humains
  134.                 ont fusionné en créatures fantastiques et envoûtantes. Evy, jeune parfumeuse,
  135.                 s’élance dans une quête sensorielle à travers des paysages oniriques, mêlant
  136.                 amour et poésie, à la recherche des senteurs oubliées et du parfum des étoiles…»<br><br>
  137.                 Cette nouvelle production captivante vous promet des performances envoûtantes,
  138.                 des surprises et une multitude d’émotions. Une sélection d’artistes remarquables
  139.                 et spectaculaires vous émerveillera sur scène, accompagnée d’un investissement
  140.                 scénique conséquent et de costumes éblouissants.<br>
  141.                 Préparez-vous à vivre un spectacle riche en couleurs
  142.                 qui met à l’honneur la magie du cabaret.<br>
  143.                 Célébrons ensemble ces 45 années de passion et d’engagement !<br><br>
  144.                 Production exclusive : ROYAL SHOW PRODUCTIONS</p>
  148. {#            <h5 class="mb-3 mt-5">{{ 'grandamour_s1_title'|tr(tr)|raw }}</h5>
  149.             <p class="p-0">{{ 'grandamour_s1'|tr(tr)|raw }}</p>#}
  151. {#            <div class="pre-carousel pt-3 mt-3">
  152.                 <a href="#" class="active photo">{{ 'spectacle_photos'|tr(tr)|raw }}<span>12</span></a>
  153.                 <a href="#" class="video">{{ 'spectacle_video'|tr(tr)|raw }}<span>1</span></a>
  154.             </div>
  156.             <div class="carousel"></div>
  158.             <div class="owl-dots">
  159.                 <button role="button" class="owl-dot"><span></span></button>
  160.                 <button role="button" class="owl-dot"><span></span></button>
  161.                 <button role="button" class="owl-dot"><span></span></button>
  162.                 <button role="button" class="owl-dot"><span></span></button>
  163.                 <button role="button" class="owl-dot"><span></span></button>
  164.             </div>
  166.             <div class="yt">
  167.                 <iframe width="560" height="315" src="https://www.youtube.com/embed/HcDfortoJtU?si=A7z3NFxBwg-Pwb7-" allow="autoplay" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  170.             </div>#}
  173.         </div>
  174.     </section>
  175. {% endif %}
  176.     {% if app.request.locale == 'de' %}
  177.         <section id="spectacle" class="espace-content full pt-5 mt-5 overflow-h overflow-y-h">
  178.             <div class="content">
  179.                 <h1 class="pt-5 mb-3 no-bar" style="text-transform: uppercase;">SHOW PARFUM D'ETOILES<span class="full-bar"></span></h1>
  181.                 <h5 class="mb-3 mt-5">DER ROYAL PALACE feiert 45 Jahre Kabarett!</h5>
  182.                 <p class="p-0">Fünfundvierzig Jahre voller Leidenschaft, Kreativität und unvergesslicher Shows!<br>
  183.                     Dank euch, unserem geschätzten Publikum, haben wir diesen Meilenstein erreicht und unseren Music-Hall auf den zweiten Platz in Frankreich gebracht.<br>
  184.                     Mit den besten Experten im künstlerischen Bereich an unserer Seite haben wir im Laufe der Jahre mutige und moderne Shows kreiert, die stets am Puls der Zeit sind und Zuschauer jeden Alters begeistern.<br>
  185.                     Um dieses außergewöhnliche Ereignis zu feiern, präsentieren wir Ihnen eine Show, die diesem Anlass gerecht wird!<br>
  186.                     Entdecken Sie unsere neue Show:</p>
  188.                 <h5 class="mb-3 mt-5">PARFUM D'ETOILES !</h5>
  189.                 <p class="p-0">
  190.                     „Nach einem Sternenregen hat sich die Erde verwandelt: Fauna, Flora und Menschen sind zu fantastischen, bezaubernden Wesen verschmolzen. Evy, eine junge Parfümeurin, begibt sich auf eine sinnliche Reise durch traumhafte Landschaften, in denen sich Liebe und Poesie verbinden – auf der Suche nach vergessenen Düften und dem Parfum der Sterne…“<br><br>
  191.                     Diese fesselnde neue Produktion verspricht bezaubernde Darbietungen, Überraschungen und viele Emotionen. Eine Auswahl bemerkenswerter und spektakulärer Künstler wird Sie auf der Bühne verzaubern – mit aufwändiger Inszenierung und prachtvollen Kostümen.<br>
  192.                     Freuen Sie sich auf eine farbenfrohe Show, die die Magie des Kabaretts zelebriert.<br>
  193.                     Feiern wir gemeinsam 45 Jahre Leidenschaft und Engagement!<br><br>
  194.                     Exklusive Produktion: ROYAL SHOW PRODUCTIONS</p>
  199.             </div>
  200.         </section>
  201.     {% endif %}
  202.     {% if app.request.locale == 'en' %}
  203.         <section id="spectacle" class="espace-content full pt-5 mt-5 overflow-h overflow-y-h">
  204.             <div class="content">
  205.                 <h1 class="pt-5 mb-3 no-bar" style="text-transform: uppercase;">SHOW PARFUM D'ETOILES<span class="full-bar"></span></h1>
  207.                 <h5 class="mb-3 mt-5">THE ROYAL PALACE celebrates 45 years of Cabaret!</h5>
  208.                 <p class="p-0">Forty-five years of passion, creativity, and unforgettable performances!<br>
  209.                     Thanks to you, our precious audience, we have reached this milestone and brought our Music Hall to the second place in France.<br>
  210.                     By surrounding ourselves with the best experts in the artistic field, we have created bold and contemporary shows over the years, always in tune with the times, delighting audiences of all ages.<br>
  211.                     To mark this exceptional event, we present a show worthy of the celebration!<br>
  212.                     Discover our new show:</p>
  214.                 <h5 class="mb-3 mt-5">PARFUM D'ETOILES !</h5>
  215.                 <p class="p-0">
  216.                     "After a shower of stars, the Earth transformed: fauna, flora and humans merged into fantastic, enchanting creatures. Evy, a young perfumer, embarks on a sensory journey through dreamlike landscapes, blending love and poetry, in search of forgotten scents and the fragrance of stars..."<br><br>
  217.                     This captivating new production promises mesmerizing performances, surprises, and a wide range of emotions. A cast of remarkable and spectacular artists will amaze you on stage, supported by a significant stage design and dazzling costumes.<br>
  218.                     Get ready for a colorful show celebrating the magic of cabaret.<br>
  219.                     Let’s celebrate together these 45 years of passion and dedication!<br><br>
  220.                     Exclusive production: ROYAL SHOW PRODUCTIONS</p>
  225.             </div>
  226.         </section>
  227.     {% endif %}
  229.     <section id="artistes" class="espace-content full mt-5 pt-5 overflow-h">
  230.         <div class="content">
  231.             <h2 class="pt-5 mt-0 mb-3 no-bar"><span>{{ 'spectacle_artistes2'|tr(tr)|upper|raw }}<span class="full-bar"></span></h2>
  232.             <h5 class="mb-5 mt-5"><span>&nbsp;</span></h5>
  233.         </div>
  234.     </section>
  236.     <section class="slider p-0">
  237.         <div class="slider-after"></div>
  238.         <div class="content overflow-h" style="height:620px;">
  239.             <div class="owl-carousel mini-suites">
  243.                 <div class="item" data-link="#">
  244.                     <div class="img" style="background-image: url('/front/img/2025/hermanos-acero.jpg?v=1');">
  245.                         <div class="gradient"></div>
  246.                         <p class="name">Hermanos Acero</p>
  247.                         <p class="subname">{{ 'grandamour_a2'|tr(tr)|upper|raw }}</p>
  248.                     </div>{#
  249.                     <a href="https://www.instagram.com/houschmahousch/" target="_blank" class="ig"><img alt="instagram" src="/front/img/spectacle-ig.svg" /></a>
  250.                     #}
  252.                     <p class="desc">{{ 'grandamour_a2_desc'|tr(tr)|raw }}</p>
  253.                 </div>
  255.                 <div class="item" data-link="#">
  256.                     <div class="img" style="background-image: url('/front/img/2025/sarita.jpg');">
  257.                         <div class="gradient"></div>
  258.                         <p class="name">Sarita</p>
  259.                         <p class="subname">{{ 'grandamour_a3'|tr(tr)|upper|raw }}</p>
  260. {#
  261.                         <a href="https://www.instagram.com/wanderlustdancer/" target="_blank" class="ig"><img alt="instagram" src="/front/img/spectacle-ig.svg" /></a>
  262. #}
  263.                     </div>
  264.                     <p class="desc">{{ 'grandamour_a3_desc'|tr(tr)|raw }}</p>
  265.                 </div>
  267.                 <div class="item" data-link="#">
  268.                     <div class="img" style="background-image: url('/front/img/2025/skokov.jpg?v=1');">
  269.                         <div class="gradient"></div>
  270.                         <p class="name">Skokov</p>
  271.                         <p class="subname">{{ 'grandamour_a4'|tr(tr)|upper|raw }}</p>
  272. {#
  273.                         <a href="https://www.instagram.com/art_of_robots/" target="_blank" class="ig"><img alt="instagram" src="/front/img/spectacle-ig.svg" /></a>
  274. #}
  275.                     </div>
  276.                     <p class="desc">{{ 'grandamour_a4_desc'|tr(tr)|raw }}</p>
  277.                 </div>
  279.                 <div class="item" data-link="#">
  280.                     <div class="img" style="background-image: url('/front/img/2025/viviana-rossi.jpg?v=1');">
  281.                         <div class="gradient"></div>
  282.                         <p class="name">VIVIANA ROSSI</p>
  283.                         <p class="subname">{{ 'grandamour_a5'|tr(tr)|upper|raw }}</p>
  284. {#
  285.                         <a href="https://www.instagram.com/caiyong1112/" target="_blank" class="ig"><img alt="instagram" src="/front/img/spectacle-ig.svg" /></a>
  286. #}
  287.                     </div>
  288.                     <p class="desc">{{ 'grandamour_a5_desc'|tr(tr)|raw }}</p>
  289.                 </div>
  291.                 <div class="item" data-link="#">
  292.                     <div class="img" style="background-image: url('/front/img/2025/jonathan-rossi.jpg?v=1');">
  293.                         <div class="gradient"></div>
  294.                         <p class="name">JONATHAN ROSSI</p>
  295.                         <p class="subname">{{ 'grandamour_a6'|tr(tr)|upper|raw }}</p>
  296. {#
  297.                         <a href="https://www.instagram.com/shakirov_oleg/" target="_blank" class="ig"><img alt="instagram" src="/front/img/spectacle-ig.svg" /></a>
  298. #}
  299.                     </div>
  300.                     <p class="desc">{{ 'grandamour_a6_desc'|tr(tr)|raw }}</p>
  301.                 </div>
  303.                 <div class="item" data-link="#">
  304.                     <div class="img" style="background-image: url('/front/img/2025/elisa-cussadie.jpg?v=1');">
  305.                         <div class="gradient"></div>
  306.                         <p class="name">elisa cussadie</p>
  307.                         <p class="subname">{{ 'grandamour_a7'|tr(tr)|upper|raw }}</p>
  308. {#
  309.                         <a href="https://www.instagram.com/lyubanevych/" target="_blank" class="ig"><img alt="instagram" src="/front/img/spectacle-ig.svg" /></a>
  310. #}
  311.                     </div>
  312.                     <p class="desc">{{ 'grandamour_a7_desc'|tr(tr)|raw }}</p>
  313.                 </div>
  315.                 <div class="item" data-link="#">
  316.                     <div class="img" style="background-image: url('/front/img/2025/cristina-garcia.jpg?v=1');">
  317.                         <div class="gradient"></div>
  318.                         <p class="name">cristina garcia</p>
  319.                         <p class="subname">{{ 'grandamour_a1'|tr(tr)|upper|raw }}</p>
  320. {#
  321.                         <a href="https://www.instagram.com/lyubanevych/" target="_blank" class="ig"><img alt="instagram" src="/front/img/spectacle-ig.svg" /></a>
  322. #}
  323.                     </div>
  324.                     <p class="desc">{{ 'grandamour_a1_desc'|tr(tr)|raw }}</p>
  325.                 </div>
  327.             </div>
  328.             <p class="desc">{{ 'frenesie_a3_desc'|tr(tr)|raw }}</p>
  330.         </div>
  332.         <div class="buttons hide">
  333.             <a href="#infos" class="artist-link">Découvrez prochainement l'artiste</a>
  334.         </div>
  336.         <div class="red-bar"></div>
  338.     </section>
  341.     <section id="coulisses" class="espace-content full mt-2 pt-5 overflow-h">
  342.         <div class="content">
  343.             <h2 class="pt-5 mt-5 mb-3 no-bar"><span>{{ 'spectacle_coulisses2'|tr(tr)|upper|raw }}<span class="full-bar"></span></h2>
  344.             <p class="p-0 mt-5">{{ 'grandamour_s2'|tr(tr)|raw }}</p>
  345.         </div>
  346.     </section>
  350.     <section class="coulisses-slider p-0 mt-5 pt-5 overflow-h" style="margin-bottom: 180px;">
  351.         {#
  352.         <div class="content fluid">
  353.           <div class="owl-carousel">
  355.             <div class="item">
  356.               <div class="img" style="background-image: url('/front/img/spectacle-coulisses1.jpg');"> </div>
  357.               <div class="img" style="background-image: url('/front/img/spectacle-coulisses2.jpg');"> </div>
  358.             </div>
  360.             <div class="item">
  361.               <div class="img" style="background-image: url('/front/img/spectacle-coulisses3.jpg');"> </div>
  362.               <div class="img" style="background-image: url('/front/img/spectacle-coulisses4.jpg');"> </div>
  363.             </div>
  365.             <div class="item">
  366.               <div class="img" style="background-image: url('/front/img/spectacle-coulisses5.jpg');"> </div>
  367.               <div class="img" style="background-image: url('/front/img/spectacle-coulisses6.jpg');"> </div>
  368.             </div>
  370.             <div class="item">
  371.               <div class="img" style="background-image: url('/front/img/spectacle-coulisses7.jpg');"> </div>
  372.               <div class="img" style="background-image: url('/front/img/spectacle-coulisses8.jpg');"> </div>
  373.             </div>
  375.             <div class="item">
  376.               <div class="img" style="background-image: url('/front/img/spectacle-coulisses9.jpg');"> </div>
  377.               <div class="img" style="background-image: url('/front/img/spectacle-coulisses10.jpg');"> </div>
  378.             </div>
  380.             <div class="item">
  381.               <div class="img" style="background-image: url('/front/img/spectacle-coulisses11.jpg');"> </div>
  382.               <div class="img" style="background-image: url('/front/img/spectacle-coulisses12.jpg');"> </div>
  383.             </div>
  385.             <div class="item">
  386.               <div class="img" style="background-image: url('/front/img/spectacle-coulisses13.jpg');"> </div>
  387.               <div class="img" style="background-image: url('/front/img/spectacle-coulisses14.jpg');"> </div>
  388.             </div>
  390.             <div class="item">
  391.               <div class="img" style="background-image: url('/front/img/spectacle-coulisses15.jpg');"> </div>
  392.               <div class="img" style="background-image: url('/front/img/spectacle-coulisses16.jpg');"> </div>
  393.             </div>
  395.             <div class="item">
  396.               <div class="img" style="background-image: url('/front/img/spectacle-coulisses17.jpg');"> </div>
  397.               <div class="img" style="background-image: url('/front/img/spectacle-coulisses18.jpg');"> </div>
  398.             </div>
  400.           </div>
  401.         </div> #}
  403.         <div class="content fluid">
  404.             <div class="owl-carousel images">
  407.                 {% for i in 1..24 %}
  408.                     {% if i is odd %}
  409.                         <div class="item">
  410.                     {% endif %}
  411.                     <a id="{{'now'|date('U')}}_{{i}}" href="/front/img/spectacle-coulisses/spectacle-coulisses{{i}}.jpg" itemprop="contentUrl" data-size="" class="img " style="background-image: url('/front/img/spectacle-coulisses/spectacle-coulisses{{i}}.jpg');" source="{{ app.request.getSchemeAndHttpHost() }}/front/img/spectacle-coulisses/spectacle-coulisses{{i}}.jpg">
  412.                         <img src="/front/img/spectacle-coulisses/spectacle-coulisses{{i}}.jpg" style="display:none;" itemprop="thumbnail" alt="album" />
  413.                     </a>
  414.                     </a>
  415.                     {% if i is even %}
  416.                         </div>
  417.                     {% endif %}
  419.                 {% endfor %}
  422.             </div>
  423.         </div>
  426.         <div class="horizontal-bar-container">
  427.             <div class="horizontal-bar"></div>
  428.             <div class="horizontal-bar-ctrl"></div>
  429.         </div>
  431.     </section>
  435.     {% include 'FrontBundle/Partial/footer.html.twig' %}
  438.     <!-- Root element of PhotoSwipe. Must have class pswp. -->
  439.     <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
  440.         <!-- Background of PhotoSwipe.
  441.           It's a separate element as animating opacity is faster than rgba(). -->
  442.         <div class="pswp__bg"></div>
  443.         <!-- Slides wrapper with overflow:hidden. -->
  444.         <div class="pswp__scroll-wrap">
  445.             <!-- Container that holds slides.
  446.               PhotoSwipe keeps only 3 of them in the DOM to save memory.
  447.               Don't modify these 3 pswp__item elements, data is added later on. -->
  448.             <div class="pswp__container">
  449.                 <div class="pswp__item"></div>
  450.                 <div class="pswp__item"></div>
  451.                 <div class="pswp__item"></div>
  452.             </div>
  453.             <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
  454.             <div class="pswp__ui pswp__ui--hidden">
  455.                 <div class="pswp__top-bar">
  456.                     <!--  Controls are self-explanatory. Order can be changed. -->
  457.                     <div class="pswp__counter"></div>
  458.                     <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
  459.                     <button class="pswp__button pswp__button--share" title="Share"></button>
  460.                     <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
  461.                     <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
  462.                     <!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR -->
  463.                     <!-- element will get class pswp__preloader--active when preloader is running -->
  464.                     <div class="pswp__preloader">
  465.                         <div class="pswp__preloader__icn">
  466.                             <div class="pswp__preloader__cut">
  467.                                 <div class="pswp__preloader__donut"></div>
  468.                             </div>
  469.                         </div>
  470.                     </div>
  471.                 </div>
  472.                 <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
  473.                     <div class="pswp__share-tooltip"></div>
  474.                 </div>
  475.                 <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
  476.                 </button>
  477.                 <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
  478.                 </button>
  479.                 <div class="pswp__caption">
  480.                     <div class="pswp__caption__center"></div>
  481.                 </div>
  482.             </div>
  483.         </div>
  484.     </div>
  486. {% endblock %}
  488. {% block javascripts %}
  490.     <script src="/front/js/owl.carousel.min.js"></script>
  491.     <script src="/plugins/photoswipe/photoswipe.min.js"></script>
  492.     <script src="/plugins/photoswipe/photoswipe-ui-default.min.js"></script>
  495.     <script type="text/javascript">
  498.         'use strict';
  500.         class Carousel {
  501.             constructor(el) {
  502.                 this.el = el;
  503.                 this.carouselOptions = ['previous','play','next'];
  504.                 this.carouselData = [
  505.                     {% for i in 1..7 %}
  506.                     {
  507.                         'id': '{{i}}',
  508.                         'src': '/front/img/spectacle-slider-2024-{{i}}.jpg?v=1',
  509.                     },
  510.                     {% endfor %}
  511.                 ];
  512.                 this.carouselInView = [1, 2, 3, 4, 5];
  513.                 this.carouselContainer;
  514.                 this.carouselPlayState;
  515.             }
  519.             mounted() {
  520.                 this.setupCarousel();
  521.                 this.play()
  522.             }
  524.             // Build carousel html
  525.             setupCarousel() {
  526.                 const container = document.createElement('div');
  527.                 const controls = document.createElement('div');
  529.                 // Add container for carousel items and controls
  530.                 this.el.append(container, controls);
  531.                 container.className = 'carousel-container';
  532.                 controls.className = 'carousel-controls';
  534.                 // Take dataset array and append items to container
  535.                 this.carouselData.forEach((item, index) => {
  536.                     const carouselItem = item.src ? document.createElement('img') : document.createElement('div');
  538.                     container.append(carouselItem);
  540.                     // Add item attributes
  541.                     carouselItem.className = `carousel-item carousel-item-${index + 1}`;
  542.                     carouselItem.src = item.src;
  543.                     carouselItem.setAttribute('loading', 'lazy');
  544.                     // Used to keep track of carousel items, infinite items possible in carousel however min 5 items required
  545.                     carouselItem.setAttribute('data-index', `${index + 1}`);
  546.                 });
  548.                 this.carouselOptions.forEach((option) => {
  549.                     const btn = document.createElement('button');
  550.                     const axSpan = document.createElement('span');
  552.                     // Add accessibilty spans to button
  553.                     axSpan.innerText = option;
  554.                     axSpan.className = 'ax-hidden';
  555.                     btn.append(axSpan);
  557.                     // Add button attributes
  558.                     btn.className = `carousel-control carousel-control-${option}`;
  559.                     btn.setAttribute('data-name', option);
  561.                     // Add carousel control options
  562.                     controls.append(btn);
  563.                 });
  565.                 // After rendering carousel to our DOM, setup carousel controls' event listeners
  566.                 this.setControls([...controls.children]);
  568.                 // Set container property
  569.                 this.carouselContainer = container;
  571.             %}
  573.             setControls(controls) {
  574.                 controls.forEach(control => {
  575.                     control.onclick = (event) => {
  576.                         event.preventDefault();
  578.                         // Manage control actions, update our carousel data first then with a callback update our DOM
  579.                         this.controlManager(control.dataset.name);
  580.                     };
  581.                 });
  582.             }
  584.             controlManager(control) {
  585.                 if (control === 'previous') return this.previous();
  586.                 if (control === 'next') return this.next();
  587.                 if (control === 'add') return this.add();
  588.                 if (control === 'play') return this.play();
  590.                 return;
  591.             }
  593.             getIndex(inView) {
  594.                 var inViewArr = {
  595.                     'i1': 4,
  596.                     'i2': 3,
  597.                     'i3': 2,
  598.                     'i4': 1,
  599.                     'i5': 5,
  600.                 };
  602.                 var inViewArr = {
  603.                     'i1': 0,
  604.                     'i2': 4,
  605.                     'i3': 3,
  606.                     'i4': 2,
  607.                     'i5': 1,
  608.                 };
  610.                 // console.log (inViewArr['i'+inView] );
  612.                 $('#spectacle .owl-dots .owl-dot').removeClass('active');
  613.                 $('#spectacle .owl-dots .owl-dot:eq('+inViewArr['i'+inView]+')').addClass('active');
  614.             }
  616.             previous() {
  618.                 // console.log('prev');
  619.                 this.getIndex(exampleCarousel.carouselInView[0])
  621.                 // Update order of items in data array to be shown in carousel
  622.                 this.carouselData.unshift(this.carouselData.pop());
  624.                 // Push the first item to the end of the array so that the previous item is front and center
  625.                 this.carouselInView.push(this.carouselInView.shift());
  627.                 // Update the css class for each carousel item in view
  628.                 this.carouselInView.forEach((item, index) => {
  629.                     this.carouselContainer.children[index].className = `carousel-item carousel-item-${item}`;
  630.                 });
  632.                 // Using the first 5 items in data array update content of carousel items in view
  633.                 this.carouselData.slice(0, 5).forEach((data, index) => {
  634.                     document.querySelector(`.carousel-item-${index + 1}`).src = data.src;
  635.                 });
  636.             }
  638.             next() {
  640.                 // console.log('next');
  641.                 this.getIndex(exampleCarousel.carouselInView[0])
  643.                 // Update order of items in data array to be shown in carousel
  644.                 this.carouselData.push(this.carouselData.shift());
  646.                 // Take the last item and add it to the beginning of the array so that the next item is front and center
  647.                 this.carouselInView.unshift(this.carouselInView.pop());
  649.                 // Update the css class for each carousel item in view
  650.                 this.carouselInView.forEach((item, index) => {
  651.                     this.carouselContainer.children[index].className = `carousel-item carousel-item-${item}`;
  652.                 });
  654.                 // Using the first 5 items in data array update content of carousel items in view
  655.                 this.carouselData.slice(0, 5).forEach((data, index) => {
  656.                     document.querySelector(`.carousel-item-${index + 1}`).src = data.src;
  657.                 });
  658.             }
  660.             add() {
  661.                 const newItem = {
  662.                     'id': '',
  663.                     'src': '',
  664.                 };
  665.                 const lastItem = this.carouselData.length;
  666.                 const lastIndex = this.carouselData.findIndex(item => item.id == lastItem);
  668.                 // Assign properties for new carousel item
  669.                 Object.assign(newItem, {
  670.                     id: `${lastItem + 1}`,
  671.                     src: `http://fakeimg.pl/300/?text=${lastItem + 1}`
  672.                 });
  674.                 // Then add it to the "last" item in our carouselData
  675.                 this.carouselData.splice(lastIndex + 1, 0, newItem);
  677.                 // Shift carousel to display new item
  678.                 this.next();
  679.             }
  681.             play() {
  682.                 const playBtn = document.querySelector('.carousel-control-play');
  683.                 const startPlaying = () => this.next();
  685.                 if (playBtn.classList.contains('playing')) {
  686.                     // Remove class to return to play button state/appearance
  687.                     playBtn.classList.remove('playing');
  689.                     // Remove setInterval
  690.                     clearInterval(this.carouselPlayState);
  691.                     this.carouselPlayState = null;
  692.                 } else {
  693.                     // Add class to change to pause button state/appearance
  694.                     playBtn.classList.add('playing');
  696.                     // First run initial next method
  697.                     this.next();
  699.                     // Use play state prop to store interval ID and run next method on a 1.5 second interval
  700.                     this.carouselPlayState = setInterval(startPlaying, 3000);
  701.                 };
  702.             }
  704.         }
  706.         // Refers to the carousel root element you want to target, use specific class selectors if using multiple carousels
  707.         const el = document.querySelector('.carousel');
  708.         // Create a new carousel object
  709.         const exampleCarousel = new Carousel(el);
  710.         // Setup carousel and methods
  711.         exampleCarousel.mounted();
  715.     </script>
  719.     <script type="text/javascript">
  721.         $( document ).ready(function() {
  724. /*            if(window.innerWidth > 1047 ){
  725.                 $('.menus-tarifs-callendar .content').before('<video class="video-slide active" src="/front/videos/Teaser-Grand-Amour.mp4" autoplay muted loop playsinline></video>');
  726.             }*/
  730.             $(document).scroll(function(){
  732.                 $('.info-header2 li').removeClass('active');
  733.                 $('.info-header2 li:eq(0)').addClass('active');
  735.                 if( $(window).scrollTop() > $('#artistes').position().top ){
  736.                     $('.info-header2 li').removeClass('active');
  737.                     $('.info-header2 li:eq(1)').addClass('active');
  738.                 }
  740.                 if( $(window).scrollTop() > $('#coulisses').position().top ){
  741.                     $('.info-header2 li').removeClass('active');
  742.                     $('.info-header2 li:eq(2)').addClass('active');
  743.                 }
  745.             });
  749.             $('.spectacle-header').css('height', window.innerHeight+'px');
  751.             $('.slider .owl-carousel').owlCarousel({
  752.                 loop:true,
  753.                 margin:80,
  754.                 nav:true,
  755.                 dots:false,
  756.                 responsive:{
  757.                     0:{
  758.                         items:1
  759.                     },
  760.                     1024:{
  761.                         items:1
  762.                     },
  763.                     1025:{
  764.                         items:3
  765.                     },
  766.                     1920:{
  767.                         items:3
  768.                     }
  769.                 }
  770.             });
  772.             var owl = $('.coulisses-slider .owl-carousel');
  773.             owl.owlCarousel({
  774.                 loop:false,
  775.                 margin:42,
  776.                 nav:true,
  777.                 itemElement: 'figure',
  778.                 dots:false,
  779.                 responsive:{
  780.                     0:{
  781.                         items:2
  782.                     },
  783.                     868:{
  784.                         items:3
  785.                     },
  786.                     1000:{
  787.                         items:3
  788.                     },
  789.                     1280:{
  790.                         items:4
  791.                     },
  792.                     1475:{
  793.                         items:5
  794.                     },
  795.                     1920:{
  796.                         items:6
  797.                     }
  798.                 }
  799.             });
  801.             $('.artist-link').click(function(){
  802.                 window.location.href = $('.owl-item.active ~ .owl-item.active .item').data('link');
  803.             });
  805.             $('.arrow-btn').click(function(e){
  806.                 e.preventDefault();
  807.                 $([document.documentElement, document.body]).animate({
  808.                     scrollTop: $( $('#spectacle') ).offset().top - 130
  809.                 }, 100);
  810.             });
  812.             $('#spectacle .video').click(function(e){
  813.                 e.preventDefault();
  814.                 $('#spectacle .carousel').hide();
  815.                 $('#spectacle .yt').fadeIn();
  816.                 $('#spectacle .owl-dots').hide();
  817.                 $('#spectacle .photo').removeClass('active');
  818.                 $('#spectacle .video').addClass('active');
  819.             });
  821.             $('#spectacle .photo').click(function(e){
  822.                 e.preventDefault();
  823.                 $('#spectacle .yt').hide();
  824.                 $('#spectacle .carousel').fadeIn();
  825.                 $('#spectacle .owl-dots').fadeIn();
  826.                 $('#spectacle .video').removeClass('active');
  827.                 $('#spectacle .photo').addClass('active');
  828.             });
  830.             $('#spectacle .yt .hover').click(function(e){
  831.                 e.preventDefault();
  832.                 console.log('ssss');
  833.                 window.open('https://youtu.be/RbHIzbo522o', '_blank');
  835.             });
  837.             owl.on('changed.owl.carousel', function(event) {
  839.                 var itemsNbr = owl.data()['owl.carousel'].settings.items;
  840.                 var itemsTotal = event.item.count;
  842.                 var itemsIndex = event.item.index;
  844.                 var pagesNbr = itemsTotal - itemsNbr;
  846.                 var horizontalBar = $('.horizontal-bar').outerWidth();
  847.                 var horizontalBarCtrl = $('.horizontal-bar-ctrl').outerWidth();
  849.                 var courseLength = $('.horizontal-bar').outerWidth() - $('.horizontal-bar-ctrl').outerWidth();
  851.                 var left = itemsIndex * 100 / pagesNbr; // percent
  853.                 left = left * courseLength / 100;
  855.                 $('.horizontal-bar-ctrl').css('left', left+'px');
  857.             });
  860.             $('.owl-carousel.images a').each(function(index, value) {
  861.                 img = new Image();
  862.                 size = 0;
  863.                 const ident = $(this).attr('id').toString();
  864.                 img.onload = function() {
  865.                     $('#'+ident).attr('data-size', this.width + 'x' + this.height);
  866.                 }
  867.                 img.src = $(this).attr('source');
  869.             }).promise().done( function(){
  871.                 setTimeout( function(){
  872.                     initPhotoSwipeFromDOM('.my-gallery');
  873.                 }, 1000);
  875.             } );
  878.             $('.owl-carousel.images .owl-stage').addClass('my-gallery');
  879.             $('.owl-carousel.images .owl-stage').attr('itemscope');
  880.             $('.owl-carousel.images .owl-stage').attr('itemtype', 'http://schema.org/ImageGallery');
  882.             $('.owl-carousel.images .owl-item ').attr('itemscope');
  883.             $('.owl-carousel.images .owl-item ').attr('itemprop', 'associatedMedia');
  884.             $('.owl-carousel.images .owl-item ').attr('itemtype', 'http://schema.org/ImageObject');
  886.         });
  888.     </script>
  891.     <script type="text/javascript">
  895.         var initPhotoSwipeFromDOM = function(gallerySelector) {
  897.             // parse slide data (url, title, size ...) from DOM elements
  898.             // (children of gallerySelector)
  899.             var parseThumbnailElements = function(el) {
  901.                 console.log(el.childNodes);
  903.                 var thumbElements = el.childNodes,
  904.                     numNodes = thumbElements.length,
  905.                     items = [
  906.                         // {
  907.                         //   src: 'https://dummyimage.com/1000x1000/ccc/5cac22',
  908.                         //   w: '1024',
  909.                         //   h: '1024'
  910.                         // },
  911.                         // {
  912.                         //   src: 'https://dummyimage.com/1000x1000/5cac22/fff',
  913.                         //   w: '1024',
  914.                         //   h: '1024'
  915.                         // }
  916.                     ],
  917.                     figureEl,
  918.                     linkEl,
  919.                     size,
  920.                     item;
  924.                 for(var i = 0; i < numNodes; i++) {
  926.                     figureEl = thumbElements[i]; // <figure> element
  928.                     // include only element nodes
  929.                     if(figureEl.nodeType !== 1) {
  930.                         continue;
  931.                     }
  933.                     linkEl = figureEl.children[0] // <a> element
  936.                     // console.log('linkEl')
  937.                     // console.log(linkEl.children[0])
  938.                     // console.log(linkEl.children[1])
  941.                     for(var j = 0; j < 2; j++) {
  943.                         size = linkEl.children[j].getAttribute('data-size').split('x');
  945.                         // create slide object
  946.                         item = {
  947.                             src: linkEl.children[j].getAttribute('href'),
  948.                             w: parseInt(size[0], 10),
  949.                             h: parseInt(size[1], 10)
  950.                         };
  955.                         if(figureEl.children.length > 1) {
  956.                             // <figcaption> content
  957.                             item.title = figureEl.children[1].innerHTML;
  958.                         }
  960.                         if(linkEl.children.length > 0) {
  961.                             // <img> thumbnail element, retrieving thumbnail url
  962.                             item.msrc = linkEl.children[0].getAttribute('src');
  963.                         }
  965.                         item.el = figureEl; // save link to element for getThumbBoundsFn
  966.                         items.push(item);
  968.                     }
  969.                 }
  971.                 return items;
  972.             };
  974.             // find nearest parent element
  975.             var closest = function closest(el, fn) {
  976.                 return el && ( fn(el) ? el : closest(el.parentNode, fn) );
  977.             };
  979.             // triggers when user clicks on thumbnail
  980.             var onThumbnailsClick = function(e) {
  981.                 e = e || window.event;
  982.                 e.preventDefault ? e.preventDefault() : e.returnValue = false;
  984.                 var eTarget = e.target || e.srcElement;
  986.                 // find root element of slide
  987.                 var clickedListItem = closest(eTarget, function(el) {
  988.                     return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
  989.                 });
  991.                 if(!clickedListItem) {
  992.                     return;
  993.                 }
  995.                 // find index of clicked item by looping through all child nodes
  996.                 // alternatively, you may define index via data- attribute
  997.                 var clickedGallery = clickedListItem.parentNode,
  998.                     childNodes = clickedListItem.parentNode.childNodes,
  999.                     numChildNodes = childNodes.length,
  1000.                     nodeIndex = 0,
  1001.                     index;
  1003.                 for (var i = 0; i < numChildNodes; i++) {
  1004.                     if(childNodes[i].nodeType !== 1) {
  1005.                         continue;
  1006.                     }
  1008.                     if(childNodes[i] === clickedListItem) {
  1009.                         index = nodeIndex;
  1010.                         break;
  1011.                     }
  1012.                     nodeIndex++;
  1013.                 }
  1017.                 if(index >= 0) {
  1018.                     // open PhotoSwipe if valid index found
  1019.                     openPhotoSwipe( index, clickedGallery );
  1020.                 }
  1021.                 return false;
  1022.             };
  1024.             // parse picture index and gallery index from URL (#&pid=1&gid=2)
  1025.             var photoswipeParseHash = function() {
  1026.                 var hash = window.location.hash.substring(1),
  1027.                     params = {};
  1029.                 if(hash.length < 5) {
  1030.                     return params;
  1031.                 }
  1033.                 var vars = hash.split('&');
  1034.                 for (var i = 0; i < vars.length; i++) {
  1035.                     if(!vars[i]) {
  1036.                         continue;
  1037.                     }
  1038.                     var pair = vars[i].split('=');
  1039.                     if(pair.length < 2) {
  1040.                         continue;
  1041.                     }
  1042.                     params[pair[0]] = pair[1];
  1043.                 }
  1045.                 if(params.gid) {
  1046.                     params.gid = parseInt(params.gid, 10);
  1047.                 }
  1049.                 return params;
  1050.             };
  1052.             var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
  1053.                 var pswpElement = document.querySelectorAll('.pswp')[0],
  1054.                     gallery,
  1055.                     options,
  1056.                     items;
  1058.                 items = parseThumbnailElements(galleryElement);
  1060.                 // define options (if needed)
  1061.                 options = {
  1063.                     // define gallery index (for URL)
  1064.                     galleryUID: galleryElement.getAttribute('data-pswp-uid'),
  1066.                     getThumbBoundsFn: function(index) {
  1067.                         // See Options -> getThumbBoundsFn section of documentation for more info
  1068.                         var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
  1069.                             pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
  1070.                             rect = thumbnail.getBoundingClientRect();
  1072.                         return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
  1073.                     }
  1075.                 };
  1077.                 // PhotoSwipe opened from URL
  1078.                 if(fromURL) {
  1079.                     if(options.galleryPIDs) {
  1080.                         // parse real index when custom PIDs are used
  1081.                         // http://photoswipe.com/documentation/faq.html#custom-pid-in-url
  1082.                         for(var j = 0; j < items.length; j++) {
  1083.                             if(items[j].pid == index) {
  1084.                                 options.index = j;
  1085.                                 break;
  1086.                             }
  1087.                         }
  1088.                     } else {
  1089.                         // in URL indexes start from 1
  1090.                         options.index = parseInt(index, 10) - 1;
  1091.                     }
  1092.                 } else {
  1093.                     options.index = parseInt(index, 10);
  1094.                 }
  1096.                 // exit if index not found
  1097.                 if( isNaN(options.index) ) {
  1098.                     return;
  1099.                 }
  1101.                 if(disableAnimation) {
  1102.                     options.showAnimationDuration = 0;
  1103.                 }
  1105.                 // Pass data to PhotoSwipe and initialize it
  1106.                 gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
  1107.                 gallery.init();
  1108.             };
  1110.             // loop through all gallery elements and bind events
  1111.             var galleryElements = document.querySelectorAll( gallerySelector );
  1113.             for(var i = 0, l = galleryElements.length; i < l; i++) {
  1114.                 galleryElements[i].setAttribute('data-pswp-uid', i+1);
  1115.                 galleryElements[i].onclick = onThumbnailsClick;
  1116.             }
  1118.             // Parse URL and open gallery if it contains #&pid=3&gid=1
  1119.             var hashData = photoswipeParseHash();
  1120.             if(hashData.pid && hashData.gid) {
  1121.                 openPhotoSwipe( hashData.pid ,  galleryElements[ hashData.gid - 1 ], true, true );
  1122.             }
  1123.         };
  1125.         // // execute above function
  1126.         // initPhotoSwipeFromDOM('.my-gallery');
  1130.     </script>
  1132. {% endblock %}