templates/galerie/detail.html.twig line 1

Open in your IDE?
  2. {% extends 'base.html.twig' %}
  3. {% block title %}{% endblock %}
  4. {% block stylesheets %}
  5.          <link rel="stylesheet" href="{{ asset('/css/detail-galerie.css') }}">  
  6.          <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"/> 
  8.         {% endblock %} 
  9. {% block body %}
  10.             <main class="section-services" style="z-index:-1">  </main>
  12.     <div class="section-gallery">
  13.     <div class="container">
  14.       <div class="row pb-5">
  15.         <div class="col-md-12 text-center">
  16.           <h5> {{galerie.titre}} </h5>
  17.           
  18.         </div>
  19.       </div>
  20.       <input type="hidden" id="path-img" value="{{asset('upload/galerie/images/')}}"/>
  21.       
  22.   <div id="accordion">
  23.   
  24.   <div class="card">
  25.   
  26.     <div class="card-header {{ app.request.locale == 'ar_TN' ? 'form_direction_rtl' : 'form_direction_ltr' }}" id="headingOne">
  27.     
  28.     <p>{{galerie.description}}</p>
  29.       <h5> 
  30.         <button class="btn btn-link" style="margin-top: 10px !important;" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
  31.         <span id="flesh"> > </span> {% trans  %} detail_galerie.Images{% endtrans %}   
  32.         </button>
  33.       </h5>
  34.     </div>
  36.     <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
  37.     
  38.       <div class="card-body">
  39.       
  40.       <div class="box">
  41.       
  42.       {% set lastImageId = 0 %}
  43.         {% for image in galerie.images %}
  44.           {% if loop.index <= 2 %}
  45.           
  46.             
  47.             <div class="dream" onclick="showImg('{{image.image}}')" style="border-radius: 15px;background-image : url('{{asset('upload/galerie/images/')}}{{image.image}}')" id="dream-img">
  48.             </div>
  49.             {% set lastImageId = image.id %}
  50.             
  51.           {% endif %}
  52.         {% endfor %}
  54.         <input type="hidden" id="gallery-last-image-id" value="{{ lastImageId }}">
  55.            <button  id='gallery-more-images' type="button" class="btn btn-success" style="position: absolute;bottom: 6px;right: 6px;">{% trans  %} detail_galerie.Voir Plus {% endtrans %}</button>
  57.       </div>
  58.       </div>
  59.     </div>
  60.   </div>
  61.   <div class="card" >
  62.     <div class="card-header" id="headingTwo">
  63.       <h5 class="mb-0" >
  64.         <button class="btn btn-link  collapsed"  style="margin-top: 0px ;color: white; !important;"data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
  65.        <span id="flesh"> > </span> {% trans  %} detail_galerie.Videos {% endtrans %}   
  66.         </button>
  67.       </h5>
  68.     </div>
  69.     <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
  70.       <div class="card-body">
  71.  
  72.       <div class="box" >
  73.       {% set lastVideoId = 0 %}
  74.         {% for video in galerie.videos %}
  75.           {% if loop.index <= 2 %}
  76.             <div class="dream" id="dream-img" >
  77.               <video src="/upload/galerie/videos/{{video.video}}" width="100%" controls autostart="false">  </video> 
  78.             </div> 
  79.             {% set lastVideoId = video.id %}
  80.           {% endif %}
  81.         {% endfor %}
  82.         <input type="hidden" id="gallery-last-video-id" value="{{ lastVideoId }}">
  83.            <button id='gallery-more-videos' type="button" class="btn btn-success" style="position: absolute;bottom: 6px;right: 6px;;">{% trans  %} detail_galerie.Voir Plus {% endtrans %} </button>
  85.       </div>
  86.       </div>
  87.     </div>
  88.   </div>
  89. </div>
  90.       <div id="myModal" class="modal">
  91.         
  92.         <div class="modal-content" id="img01" style="height: 100%; background-size: contain; background-repeat: no-repeat; background-position: center center;"></div>
  93.         <span class="close">&times;</span>
  94.       </div>
  95.      
  96.     </div>
  97.   </div>
  101. <script>
  102.   // Get the modal
  103. var modal = document.getElementById("myModal");
  105. // Get the image and insert it inside the modal - use its "alt" text as a caption
  106. var img = document.getElementById("dream-img");
  107. var modalImg = document.getElementById("img01");
  109. var pathImg = document.getElementById("path-img").value;
  110. {# img.onclick = function(){
  111.   modal.style.display = "block";
  112.   modalImg.style.backgroundImage = this.backgroundImage;
  113. } #}
  114. function showImg(img){
  115.     var img = pathImg + img;
  116.     modalImg.style.backgroundImage = 'url('+img+')';
  117.     modal.style.display = "block";
  118. }
  119. // Get the <span> element that closes the modal
  120. var span = document.getElementsByClassName("close")[0];
  122. // When the user clicks on <span> (x), close the modal
  123. modal.onclick = function() { 
  124.   modal.style.display = "none";
  125.   console.log('waaaa')
  126. }
  127. </script>
  129.   {% endblock %}
  130.   {% block javascripts %}
  131.   {{ parent() }}
  132. <script>
  133.   $('#gallery-more-images').click(function(){
  134.     {# alert( $('#gallery-last-image-id').val() ); #}
  135.     jQuery.ajax({
  136.         url: "{{ path('gallerie_image_list', { id : galerie.id } ) }}",
  137.         data: { lastImageId : $('#gallery-last-image-id').val() },
  138.         type: "GET",
  139.         success: function (response) {
  140.           if(response.data != " "){
  141.           $( response.data ).insertBefore( $( "#gallery-more-images" )  );
  142.           $('#gallery-last-image-id').val(response.lastId);
  143.           }
  144.         }
  145.     });
  146.   });
  148.   $('#gallery-more-videos').click(function(){
  149.     {# alert( $('#gallery-last-video-id').val() ); #}
  150.     jQuery.ajax({
  151.         url: "{{ path('gallerie_video_list', { id : galerie.id } ) }}",
  152.         data: { lastVideoId : $('#gallery-last-video-id').val() },
  153.         type: "GET",
  154.         success: function (response) {
  155.           if(response.data != " "){
  156.           $( response.data ).insertBefore( $( "#gallery-more-videos" )  );
  157.           $('#gallery-last-video-id').val(response.lastId);
  158.           }
  159.         }
  160.     });
  161.   });
  162. </script>
  163.   {% endblock %}