templates/diaporama/diaporama.inc.html.twig line 1

Open in your IDE?
  1. {% if include_header is defined %}
  2.     {% include include_header~'.twig' %}
  3. {% endif %}
  5. <main class="tc-desktop-2_3 tc-phone-1_1">
  7.     <style>
  8.         .tc-gallery > ul > li a {
  9.             border: 3px solid #FFF;
  10.             border-radius: 3px;
  11.             display: block;
  12.             overflow: hidden;
  13.             position: relative;
  14.             float: left;
  15.         }
  16.         .tc-gallery > ul > li a > img {
  17.             -webkit-transition: -webkit-transform 0.15s ease 0s;
  18.             -moz-transition: -moz-transform 0.15s ease 0s;
  19.             -o-transition: -o-transform 0.15s ease 0s;
  20.             transition: transform 0.15s ease 0s;
  21.             -webkit-transform: scale3d(1, 1, 1);
  22.             transform: scale3d(1, 1, 1);
  23.             height: 100%;
  24.             width: 100%;
  25.         }
  26.         .tc-gallery > ul > li a:hover > img {
  27.             -webkit-transform: scale3d(1.1, 1.1, 1.1);
  28.             transform: scale3d(1.1, 1.1, 1.1);
  29.         }
  30.         .tc-gallery > ul > li a:hover .tc-gallery-poster > img {
  31.             opacity: 1;
  32.         }
  34.         .tc-gallery > ul > li a .tc-gallery-poster > img {
  35.             left: 50%;
  36.             margin-left: -10px;
  37.             margin-top: -10px;
  38.             opacity: 0;
  39.             position: absolute;
  40.             top: 50%;
  41.             -webkit-transition: opacity 0.3s ease 0s;
  42.             -o-transition: opacity 0.3s ease 0s;
  43.             transition: opacity 0.3s ease 0s;
  44.         }
  45.         .tc-gallery > ul > li a:hover .tc-gallery-poster {
  46.             background-color: rgba(0, 0, 0, 0.5);
  47.         }
  48.         .tc-gallery .justified-gallery > a > img {
  49.             -webkit-transition: -webkit-transform 0.15s ease 0s;
  50.             -moz-transition: -moz-transform 0.15s ease 0s;
  51.             -o-transition: -o-transform 0.15s ease 0s;
  52.             transition: transform 0.15s ease 0s;
  53.             -webkit-transform: scale3d(1, 1, 1);
  54.             transform: scale3d(1, 1, 1);
  55.             height: 100%;
  56.             width: 100%;
  57.         }
  58.         .tc-gallery .justified-gallery > a:hover > img {
  59.             -webkit-transform: scale3d(1.1, 1.1, 1.1);
  60.             transform: scale3d(1.1, 1.1, 1.1);
  61.         }
  62.     </style>
  64.     <section id="content_diaporama" class="tc-panel">
  65.        <div id="present"  class="tc-panel-header">
  66.            {% if detaildiaporama.title is defined and detaildiaporama.title %}
  67.                <h3 class="titre_diaporama">{{ detaildiaporama.title|raw }}</h3>
  68.            {% endif %}
  69.            {% if detaildiaporama.subtitle is defined and detaildiaporama.subtitle %}
  70.                <h4>{{ detaildiaporama.subtitle|raw }}</h4>
  71.            {% endif %}
  72.            {% if detaildiaporama.deck is defined and detaildiaporama.deck %}
  73.                <div class="chapeau">{{ detaildiaporama.deck|raw }}</div>
  74.            {% endif %}
  75.            {% if detaildiaporama.text is defined and detaildiaporama.text %}
  76.                <div class="texte">{{ detaildiaporama.text|raw }}</div>
  77.            {% endif %}
  78.            {% if detaildiaporama.writer is defined and detaildiaporama.writer %}
  79.                <p class="redacteur">{{ detaildiaporama.writer|raw }} </p>
  80.            {% endif %}
  81.            {% if detaildiaporama.date is defined and detaildiaporama.date %}
  82.                <p class="date">{{ detaildiaporama.date}}</p>
  83.            {% endif %}
  84.        </div>
  85.         <div class=" tc-panel-body">
  86.            <div class="tc-gallery tc-gallery">
  87.                {% if detaildiaporama.files is defined and detaildiaporama.files %}
  88.                <ul id="lightgallery" class="no-bullet list-unstyled row tc-masonry-container">
  89.                    {% for key,value in detaildiaporama.files %}
  90.                    <li class="tc-block tc-tablet-1_4" data-download-url="false" data-src="{{ imgdir }}upload/{{ value.format_1600 }}" data-responsive="{{ imgdir }}{{ value.format_375 }} 375, {{ imgdir }}{{ value.format_480 }} 480, {{ imgdir }}{{ value.extension }}/{{ value.file }} 800" data-sub-html="<h4>{{ value.title }}</h4><p>{{ value.copyright }}</p>" data-pinterest-text="Pin it1" data-tweet-text="share on twitter 1">
  91.                        <a href="">
  92.                            <img class="img-responsive" src="{{ imgdir }}upload/{{ value.vignette }}" alt="{{ value.title }}">
  93.                        </a>
  94.                    </li>
  95.                    {% endfor %}
  96.                </ul>
  97.                {% endif %}
  98.             </div>
  99.         </div>
  100.     </section>
  101. </main>
  103. <aside id="tc-aside" class="tc-desktop-1_3 tc-phone-1_1">
  104.     {% if prefix_url is not defined %}
  105.         {% set prefix_url = '' %}
  106.     {% endif %}
  108.     {% if autrediapo is defined and autrediapo %}
  109.         <section class="tc-panel" id="colonne_deux_article">
  110.             <div class="tc-panel-header">
  111.                 <h3 id="autresdiapo">Les autres galeries</h3>
  112.             </div>
  113.             <div class="tc-panel-body">
  114.                 {% if diaporama.exclure is not defined or (diaporama.exclure is defined and diaporama.exclure == false) %}
  115.                     <div class="tc-gallery tc-masonry-container">
  116.                     {% for iddiaporama,diaporama in diaporamas %}
  117.                         <div class="tc-block">
  118.                            {% if diaporama.vignette_entete is defined and diaporama.vignette_entete %}
  119.                                <figure class="tc-block-body">
  120.                                     <a href="{{ prefix_url }}{{ url_folder }}/enimages/idcontent/{{ diaporama.idcontent }}" title="Voir le diaporama « {{ diaporama.title }} »">
  121.                                         <img src="{{ imgdir }}upload/{{ diaporama.vignette_entete }}" alt="{{ diaporama.title }}" />
  122.                                     </a>
  123.                                     <figcaption>
  124.                                         <a href="{{ prefix_url }}{{ url_folder }}/enimages/idcontent/{{ diaporama.idcontent }}" title="Voir le diaporama « {{ diaporama.title }} »">{{ diaporama.title }}</a>
  125.                                     </figcaption>
  126.                                 </figure>
  127.                             {% endif %}
  128.                         </div>
  129.                    {% endfor %}
  130.                    </div>
  131.                 {% endif %}
  132.            </div>
  133.         </section>
  134.     {% endif %}
  135. </aside>
  137. <script type="text/javascript" charset="utf-8">
  138.     $(document).ready(function(){
  139.         lightGallery(document.getElementById('lightgallery'));
  140.     });
  141. </script>