templates/Accueil/album.html.twig line 1

Open in your IDE?
  1. {#
  2. /*
  3.  * Autheur:Marweni Marwen
  4.  * Email:Marwenimarwen63@gmail.com
  5.  * Date de création :13/1/2020
  6.  * modifier par :Salim abbessi
  7.  * Date de modification:15/01/2020
  8.  * Description: Page 5 sur 5
  9. */#}
  10. {% extends 'Accueil/layoutAccueil.html.twig' %}
  11. {% block LinksCss %}
  12.     {{ parent() }}
  13.     <link href="{{ asset ('css/Parent/css/layoutparent.css')}}" type="text/css" rel="stylesheet" >
  14.     <link href="{{ asset ('Accueil/css/album.css')}}" type="text/css" rel="stylesheet">
  15.     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  16. {% endblock %}
  17. {% block Head %}
  18.     {{ parent() }}
  19. {% endblock %}
  20. {% block Header %}
  21.     {% if app.user %}
  22.         
  23.         {{ render(controller('App\\Controller\\EspaceParentController::headerparenrt')) }}
  24.             <style> 
  25.     @media (max-width: 1200px) {
  26.   .imageLogo {
  27.     width: 145px !important;
  28.     height: 80.7px !important;
  29.     margin-left: 49px !important;
  30.     margin-top: -20px;
  31.     bottom: 0px !important;
  32. }
  33. }</style>
  34.     {% else %}
  35.         {{ render(controller('App\\Controller\\AccueilController::header')) }}
  36.         <style> 
  37.     @media (max-width: 1200px) {
  38.   .imageLogo {
  39.     width: 145px !important;
  40.     height: 80.7px !important;
  41.     margin-left: 49px !important;
  42.     margin-top: -20px;
  43.     bottom: 45px !important;
  44. }
  45. }</style>
  46.     {% endif %}
  47. {% endblock %}
  48. {% block Content %}
  49.     <div class="parent">
  50.         <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"style="z-index: 1000000;">
  51.             <div class="modal-dialog" role="document">
  52.                 <div class="modal-content">
  53.                     <div class="modal-header">
  54.                         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  55.                             <span aria-hidden="true">&times;</span>
  56.                         </button>
  57.                     </div>
  58.                     <div class="modal-body" style="text-align:center;" >
  59.                         <h3 class="textpop"> Veuillez d'abord vous connecter !
  60.                         </h3>
  61.                     </div>
  62.                     <div class="modal-footer" style="text-align:center;" >
  63.                         <a href="/">
  64.                             <button type="button" class="btn-primary">  OK </button> </a>
  65.                     </div>
  66.                 </div>
  67.             </div>
  68.         </div>
  69.         {% for produit in produit %}
  70.             {% if produit.labeleType!="Connexion" %}
  71.                 <div id="{{produit.labeleType|replace({' ': ''})}}" class="carousel slide" data-ride="carousel" style="display: none;">
  72.                     <div class="carousel-inner">
  73.                         <div class="carousel-item activeweb">
  74.                             <div class="row">
  75.                                 <div class="col-xl-6 col-lg-6 col-md-5 col-xs-5 col-sm-5" style="text-align:center">
  76.                                     <span onclick="this.parentElement.style.display = 'none'" class="closebtn" style="display:none">&times;</span>
  77.                                     <img id="expandedImg"  class="photoAlbum" src=" {{(produit.attachements[0].idAttachement.path)}}">
  78.                                     <div id="imgtext"></div>
  79.                                     <div class="row overflow">
  80.                                         {% for prod in produit.attachements  %}
  81.                                             {% if prod.statut=="pageProduit"  %}
  82.                                                
  83.                                                     <div class="column">
  84.                                                         <img src="{{prod.idAttachement.path}}" alt="Nature" style="width:100%" onclick="myFunction(this);">
  85.                                                     </div>
  86.                                                 
  87.                                             {% endif %}
  88.                                         {% endfor %}
  89.                                     </div>
  90.                                 </div>
  91.                                 <div class="col-xl-6 col-lg-6 col-md-7 col-xs-7 col-sm-7 divcont">
  92.                                     <div class="divRight">
  93.                                         <h2 class="titre">
  94.                                             {{ produit.labeleType}}
  95.                                         </h2>
  96.                                         <div class="groupeCarac">
  97.                                             <div class="row no-margin descriptionCarac">
  98.                                                 <img class="caraSVG" src="{{ asset('images/SVG/5sur5-caracteristiques.svg')}}">
  99.                                                 <h4 class="titreCaract">
  100.                                                     Caractéristiques produit
  101.                                                 </h4>
  102.                                             </div>
  103.                                             <div class="infoCarac">
  104.                                                 <p class="paragraphe"><span class="paraSpice">  {% if produit.description %} {{produit.description|nl2br}} {% endif %}</span></p>
  105.                                             </div>
  106.                                         </div>
  107.                                         <div class="groupeCarac">
  108.                                             <div class="row no-margin descriptionCarac">
  109.                                                 <img class="caraSVG" src="{{ asset('images/LesPlus5sur5.svg')}}">
  110.                                                 <h4 class="titreCaract">    Les plus produit  </h4>
  111.                                             </div>
  112.                                             <div class="infoCarac">
  113.                                                 <p class="paragraphe"><span class="paraSpice"> {{ produit.plusDescription|nl2br  }}</span></p>
  114.                                             </div>
  115.                                         </div>
  116.                                         <div class="groupeCarac">
  117.                                             <div class="row no-margin descriptionCarac">
  118.                                                 <img class="caraSVG" src="{{ asset('images/SVG/5sur5-tarifs.svg')}}">
  119.                                                 <h4 class="titreCaract">
  120.                                                     Tarif & Frais de port
  121.                                                 </h4>
  122.                                             </div>
  123.                                             <div class="infoCarac">
  124.                                                 <p class="paragraphe"><span class="paraSpice"> {{ produit.tarifs|nl2br  }}</span></p>
  125.                                             </div>
  126.                                         </div>
  127.                                         {% if app.user %}
  128.                                             {% if is_granted('ROLE_PARENT') %}
  129.                                                 <button  class="btn-primary dispnone"   onclick='location.href = "{{path('projet-Parent')}}";' >Commander</button>
  130.                                             {%endif%}
  131.                                             {% if is_granted('ROLE_ACC') %}
  132.                                                 <button  class="btn-primary dispnone"   onclick='location.href = "{{path('ProjetsAccompagnateur',{'id':sejour.id})}}";' >Commander</button>
  133.                                             {%endif%}
  134.                                         {%endif%}
  135.                                         {% if not app.user %}
  136.                                             <button  class="btn-primary dispnone" data-toggle="modal" data-target="#exampleModal">Commander</button>
  137.                                         {%endif%}
  138.                                     </div>
  139.                                 </div>
  140.                             </div>
  141.                         </div>
  142.                         <a class="carousel-control-prev"  onclick="plusSlides(-1)" role="button" data-slide="prev">
  143.                             <span  aria-hidden="true" ><img class="chev" src="{{ asset('images/300ppi/5sur5-fleche gauche.png')}}"></span>
  144.                         </a>
  145.                         <a class="carousel-control-next" onclick="plusSlides(1)" role="button" data-slide="next">
  146.                             <img class="chev" src="{{ asset('images/300ppi/5sur5-fleche droite.png')}}">
  147.                         </a>
  148.                     </div>
  149.                 </div>
  150.             {% endif %}
  151.         {% endfor %}
  152.         <div class="activemobile">
  153.             <div class="slider autoplay">
  154.                 {% for produit in produit %}
  155.                     {% if produit.labeleType!="Connexion" %}
  156.                         <div class="col-sm-12 col-md-12 no-padding">
  157.                             <div class="card">
  158.                                 <span onclick="this.parentElement.style.display = 'none'" class="closebtn" style="display:none">&times;</span>
  159.                                 <img id="expandedImg2" class="card-img-top" src=" {{(produit.attachements[0].idAttachement.path)}}" >
  160.                                 <div id="imgtext2"></div>
  161.                                 <div class="row overflow">
  162.                                     {% for prod in produit.attachements  %}
  163.                                         {% if prod.statut=="pageProduit"  %}
  164.                                             {% if prod.idAttachement.path != produit.attachements[0].idAttachement.path %}
  165.                                                 <div class="column">
  166.                                                     <img src="{{prod.idAttachement.path}}" alt="Nature" style="width:100%" onclick="myFunction2(this);">
  167.                                                 </div>
  168.                                             {% endif %}
  169.                                         {% endif %}
  170.                                     {% endfor %}
  171.                                 </div>
  172.                                 <div class="card-body">
  173.                                     <div class="descri1">
  174.                                         <h1 class="card-title">
  175.                                             {{ produit.labeleType}}
  176.                                         </h1>
  177.                                         <div class="card-text">
  178.                                             <img class="caraSVG" src="{{ asset('images/SVG/5sur5-caracteristiques.svg')}}">
  179.                                             <h4 class="titreCaract">
  180.                                                 Caracteristiques produit
  181.                                             </h4>
  182.                                             <p class="card-text1">
  183.                                                 <span class="paraSpice"> {% if produit.description %} {{produit.description|nl2br}} {% endif %}</span>
  184.                                             </p>
  185.                                             <div class="card-text">
  186.                                                 <img class="caraSVG"  src="{{ asset('images/LesPlus5sur5.svg')}}">
  187.                                                 <h4 class="titreCaract">
  188.                                                     Les plus produit 
  189.                                                 </h4>
  190.                                                 <p class="card-text1"><span class="paraSpice"> {{ produit.plusDescription|nl2br  }}</span></p>
  191.                                             </div>
  192.                                             <div class="card-text">
  193.                                                 <img class="caraSVG" src="{{ asset('images/SVG/5sur5-tarifs.svg')}}">
  194.                                                 <h4 class="titreCaract">
  195.                                                     Tarif & Frais de port
  196.                                                 </h4>
  197.                                                 <p class="card-text1"><span class="paraSpice">{{ produit.tarifs|nl2br  }}</span></p>
  198.                                                 {% if app.user %}
  199.                                                     {% if is_granted('ROLE_PARENT') %}
  200.                                                         <button  class="dispnone btn-primary"   onclick='location.href = "{{path('projet-Parent')}}";' >Commander</button>
  201.                                                     {%endif%}
  202.                                                     {% if is_granted('ROLE_ACC') %}
  203.                                                         <button  class=" dispnone btn-primary "   onclick='location.href = "{{path('ProjetsAccompagnateur',{'id':sejour.id})}}";' >Commander</button>
  204.                                                     {%endif%}
  205.                                                 {%else%}
  206.                                                     <button  class=" dispnone btn-primary" data-toggle="modal" data-target="#exampleModal">Commander</button>
  207.                                                 {%endif%}           
  208.                                             </div>
  209.                                         </div>
  210.                                     </div>
  211.                                 </div>
  212.                             </div>
  213.                         </div>
  214.                     {% endif %}
  215.                 {% endfor %}
  216.             </div>
  217.         </div>
  218.     </div>
  219. {% endblock %}
  220. {% block Footer %}
  221.     {{ parent() }}
  222. {% endblock %}
  223. {% block javascript %}
  224.     {{ parent() }}
  225.     <script>
  226.         function myFunction(imgs) {
  227.             $(imgs).parent().parent().prev().prev().attr('src', $(imgs).attr('src'));
  228.         {#            var expandImg = document.getElementById("expandedImg");
  229.                     var imgText = document.getElementById("imgtext");
  230.                     expandImg.src = imgs.src;
  231.                     imgText.innerHTML = imgs.alt;
  232.                     expandImg.parentElement.style.display = "block";#}
  233.         }
  234.     </script>
  235.     <script>
  236.         $('.autoplay').slick({
  237.             slidesToShow: 1,
  238.             slidesToScroll: 1,
  239.             autoplay: true,
  240.             autoplaySpeed: 3000,
  241.         });
  242.             </script> 
  243.     <script>
  244.         function myFunction2(imgs) {
  245.             $(imgs).parent().parent().prev().prev().attr('src', $(imgs).attr('src'));
  246.         {# var expandImg = document.getElementById("expandedImg2");
  247.          var imgText = document.getElementById("imgtext2");
  248.          expandImg.src = imgs.src;
  249.          imgText.innerHTML = imgs.alt;
  250.          expandImg.parentElement.style.display = "block";#}
  251.                 }
  252.     </script>
  253.     <script>
  254.         var slideIndex = 1;
  255.         $(document).ready(function ()
  256.         {
  257.         {% if showArt == "ALL" %}
  258.            var slides = document.getElementsByClassName("slide");
  259.            slides[slideIndex - 1].style.display = "block";
  260.         {% else %}
  261.                     $id = "{{showArt|replace({' ': ''})}}";
  262.                     $('.slide').each(function () {
  263.                         $(this).css('display', 'none');
  264.                     })
  265.                     $('#' + $id).css('display', 'block');
  266.         {% endif %}
  267.                 });
  268.                 //
  269.                 //
  270.                 // showSlides(slideIndex);
  271.                 // Next/previous controls
  272.                 function plusSlides(n) {
  273.                     showSlides(slideIndex += n);
  274.                 }
  275.                 // Thumbnail image controls
  276.                 function currentSlide(n) {
  277.                     showSlides(slideIndex = n);
  278.                 }
  279.                 function showSlides(n) {
  280.                     var i;
  281.                     var slides = document.getElementsByClassName("slide");
  282.                     if (n > slides.length) {
  283.                         slideIndex = 1
  284.                     }
  285.                     if (n < 1) {
  286.                         slideIndex = slides.length
  287.                     }
  288.                     for (i = 0; i < slides.length; i++) {
  289.                         slides[i].style.display = "none";
  290.                     }
  291.                     slides[slideIndex - 1].style.display = "block";
  292.                 }
  293.                 function showSlidePreci(n) {
  294.                     console.log(n);
  295.                     var idSLide = "";
  296.                     $('.slide').each(function () {
  297.                         $(this).css('display', 'none');
  298.                         if ($(this).attr('id').indexOf(n) !== -1) {
  299.                             idSLide = $(this).attr('id');
  300.                         }
  301.                         $('#' + idSLide).css('display', 'block');
  302.                     });
  303.                 }
  304.     </script>
  305. {% endblock %}