source: spip-zone/_squelettes_/soyezcreateurs_net/trunk/plugins/soyezcreateurs/noisettes/sommaire/sommaire_modeportailcognac.html @ 111139

Last change on this file since 111139 was 111139, checked in by real3t@…, 3 years ago

Possibilité d'afficher les auteurs et la date sur les 2 carrousel du Mode Cognac (Pascale)

File size: 11.8 KB
Line 
1#SET{LargeurContaineur,(#CONFIG{soyezcreateurs_layout/largeurconteneur,960})}
2#SET{LargeurMenuGauche,(#CONFIG{soyezcreateurs_layout/largeurmenugauche,180})}
3#SET{LargeurMenuDroit,(#CONFIG{soyezcreateurs_layout/largeurmenudroit,180})}
4#SET{Largeurcontent_central,(#GET{LargeurContaineur}|moins{#GET{LargeurMenuGauche}}|moins{#GET{LargeurMenuDroit}})}
5#SET{Largeurcontent_extra,(#GET{LargeurContaineur}|moins{#GET{Largeurcontent_central}})}
6<script type="text/javascript">
7        CanceladjustLayout = true;
8</script>
9<main id="main" role="main"><div id="cognac_content">
10<a id="letexte"></a>
11
12<BOUCLE_ZoomSur(ARTICLES) {titre_mot=ZoomSur}{!par date}{0,1}{lang}{doublons}>
13#SET{article_url,#ARTICLE_URL}
14<!-- SLIDER -->
15<div id="diaporama" class="zone-slider">
16        <header>
17                <h1 class="hide">#TITRE</h1>
18        </header>
19        <div class="slider-slick">
20                <BOUCLE_Slider(DOCUMENTS){id_article}{mode=document}{par rang_lien, num titre, titre}{!par date}{media IN image,video}{vu=non}>
21                <div class="slider show-for-medium" role="region" aria-label="Diaporama d'accueil">
22                        <div class="slider-diapo-imgfull">
23                                [(#MEDIA|=={image}|oui)
24                                <a href="#GET{article_url}"[ title="(#_ZoomSur:DESCRIPTIF|attribut_html)"]>
25                                        <img src="[(#FICHIER|copie_locale|image_focus{1920,#CONFIG{soyezcreateurs/hauteur_slider,580}}|extraire_attribut{src})]" alt="" />
26                                </a>]
27                                [(#MEDIA|=={video}|oui)
28                                <a href="#GET{article_url}"[ title="(#_ZoomSur:DESCRIPTIF|attribut_html)"]>
29                                        [(#MIME_TYPE|=={text/oembed}|non)
30                                        <div style="width: 1920px; height: #CONFIG{soyezcreateurs/hauteur_slider,580}px;">
31                                                <video autoplay loop muted preload="true" class="autoplay" style="min-width: 100%; height: auto; top: -50%; position: absolute;">
32                                                        <source src="#FICHIER" type="[(#EXTENSION|in_array{#LISTE{mp4,webm,ogv}}|?{[(#MIME_TYPE|replace{application/,video/})],#MIME_TYPE})]"/>
33                                                </video>
34                                        </div>]
35                                        [(#MIME_TYPE|=={text/oembed}|oui)
36                                        <div style="position: relative; padding-bottom: [(#CONFIG{soyezcreateurs/hauteur_slider,580}|div{1920}|mult{100})%]">
37                                                <div class="mbYTP_wrapper" id="wrapper_mbYTP_bgndVideo" style="position: absolute; z-index: -1; min-width: 100%; min-height: 100%; left: 0; top: 0; overflow: hidden; opacity: 1; -webkit-backface-visibility: hidden;">
38                                                        <iframe id="mbYTP_bgndVideo#ID_DOCUMENT" class="playerBox" style="position: absolute; z-index: -1; width: 2380.8px; height: 1080px; top: 0px; left: 0px; overflow: hidden; opacity: 1; margin-top: -199.5px; margin-left: -230.4px;" frameborder="0" allowfullscreen="1" width="[(#INCLURE{#FICHIER}|extraire_attribut{width})]" height="[(#INCLURE{#FICHIER}|extraire_attribut{height})]" src="[(#INCLURE{#FICHIER}|extraire_attribut{src})]&amp;autoplay=1&amp;loop=1&amp;modestbranding=1&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1&amp;version=3&amp;playerapiid=mbYTP_bgndVideo&amp;allowfullscreen=true&amp;wmode=transparent&amp;iv_load_policy=3&amp;html5=1&amp;mute=1[&amp;playlist=(#INCLURE{#FICHIER}|extraire_attribut{src}|replace{'https:\/\/www\.youtube\.com\/embed\/\(\[^\?]*\).*','$1'}|replace{'\?feature=oembed',''})]"></iframe>
39                                                </div>
40                                        </div>]
41                                </a>]
42                        </div>
43                </div>
44                </BOUCLE_Slider>
45                <div class="slider show-for-medium" role="region" aria-label="Diaporama d'accueil">
46                        <div class="slider-diapo-imgfull">
47                                <a href="#GET{article_url}"[ title="(#_ZoomSur:DESCRIPTIF|attribut_html)"]>
48                                        <img src="[(#CHEMIN{images/placeholder.jpg}|image_focus{1920,#CONFIG{soyezcreateurs/hauteur_slider,580}}|extraire_attribut{src})]" alt="" />
49                                </a>
50                        </div>
51                </div>
52                <//B_Slider>
53        </div>
54        <div id="liens-diaporama">
55                <ul>
56                        <li class="#EDIT{titre}">
57                                <a href="#ARTICLE_URL"[ title="(#DESCRIPTIF|attribut_html)"]>
58                                        <span>#TITRE</span>
59                                        <span class="icon icon-arrow-right2 icon-2x">&#10140;</span>
60                                </a>
61                        </li>
62                        [<li class="hide-for-small-only">(#INCLURE{fond=noisettes/liste_auteurs,id_article,nolink=1})</li>]
63                        [<li class="hide-for-small-only">(#INCLURE{fond=noisettes/aff_datepublication,id_article,lang})</li>]
64                </ul>
65        </div>
66</div>
67<!-- fin SLIDER -->
68</BOUCLE_ZoomSur>
69
70<B_CycloShow>
71<!-- SLIDER -->
72<div id="cycloshow" class="zone-slider">
73        <div class="slider-slick">
74                <BOUCLE_CycloShow(ARTICLES){titre_mot=CycloShow}{par num titre}{!par date}{lang}{doublons}>
75                <div class="slider show-for-medium" role="region" aria-label="Diaporama d'accueil">
76                        <div class="slider-diapo-imgfull">
77                                <a href="#URL_ARTICLE" tabindex="-1">
78                                        <img src="[(#LOGO_ARTICLE_NORMAL|sinon{#CHEMIN{images/placeholder.jpg}}|image_focus{#GET{LargeurContaineur},#CONFIG{soyezcreateurs/hauteur_slider,580}}|extraire_attribut{src})]" alt="">
79                                        <div class="slider-content desc-gauche text-center">
80                                                <h3 class="#EDIT{titre}">#TITRE</h3>
81                                                [<p class="hide-for-small-only #EDIT{descriptif}">(#DESCRIPTIF|ptobr)</p>]
82                                                [<p class="hide-for-small-only">(#INCLURE{fond=noisettes/liste_auteurs,id_article,nodiv=1,nolink=1})</p>]
83                                                [<p class="hide-for-small-only">(#INCLURE{fond=noisettes/aff_datepublication,id_article,lang})</p>]
84                                        </div>
85                                </a>
86                        </div>
87                </div>
88                </BOUCLE_CycloShow>
89        </div>
90</div>
91</B_CycloShow>
92
93<BOUCLE_EDITO(ARTICLES) {titre_mot=EDITO}{!par date}{0,1}{lang}{doublons}>
94
95<!-- EDITO -->
96<div id="edito" class="zone-edito">
97        <header class="titre-sommaire">
98                <h1 class="#EDIT{titre}">[(#TITRE)]</h1>
99        </header>
100        [<img class="editologo" src="(#LOGO_ARTICLE|image_focus{#CONFIG{soyezcreateurs_layout/largeurconteneur,960},200}|extraire_attribut{src}|embarque_fichier)" width="[(#LOGO_ARTICLE|image_focus{#CONFIG{soyezcreateurs_layout/largeurconteneur,960},200}|largeur)]" height="[(#LOGO_ARTICLE|image_focus{#CONFIG{soyezcreateurs_layout/largeurconteneur,960},200}|hauteur)]" alt="" />]
101        <div id="editotexte">
102                <div class="infos">[(#INCLURE{fond=noisettes/liste_auteurs,id_article,virgule=1,nodiv=1})][(#INCLURE{fond=noisettes/aff_datepublication,id_article,lang})]</div>
103                <div>
104                        [<div class="[(#CHAPO*|?{#EDIT{chapo},#EDIT{descriptif}}) ]chapo">(#CHAPO|image_reduire{#CONFIG{soyezcreateurs_layout/largeurconteneur,960},0}|sinon{#DESCRIPTIF})</div>]
105                        [<div class="#EDIT{texte} entry-content">(#TEXTE|image_reduire{#CONFIG{soyezcreateurs_layout/largeurconteneur,960},0})</div>]
106                        [<div class="#EDIT{ps} ps">(#PS|image_reduire{#CONFIG{soyezcreateurs_layout/largeurconteneur,960},0})</div>]
107                        [<div class="notes">(#NOTES)</div>]
108                        [<p class="#EDIT{hyperlien} hyperlien"><:voir_en_ligne:> : <a href="(#URL_SITE)" class="spip_out">[(#NOM_SITE|sinon{[(#URL_SITE|couper{80})]})]</a></p>]
109                        [(#INCLURE{fond=noisettes/galerie,ajax,id_article,env})]
110                </div>
111        </div>
112</div>
113<!-- fin EDITO -->
114</BOUCLE_EDITO>
115
116[<!-- ACTUS -->
117<div id="actualites" class="zone-actus">
118        <header class="titre-sommaire">
119                <h1><:soyezcreateurs:quoideneuf:></h1>
120        </header>
121        <div class="row" id="masonry" role="region" aria-label="Actualités">
122                <div class="grid">
123                        <div class="grid-sizer"></div>
124                        <div class="gutter-sizer"></div>
125                        (#INCLURE{fond=noisettes/sommaire/sommaire_modeportailcognac_quoideneuf})
126                </div>
127        </div>
128        <div class="text-center avec-margin-top avec-margin-bottom">
129                <a class="button texte-blanc triadeA" href="#URL_PAGE{antichrono}"><:soyezcreateurs:actualite_toutes:></a>
130        </div>
131</div>
132<!-- fin ACTUS -->
133]
134<B_DessousBreves>
135<!-- PROJETS -->
136<div id="lesprojets" class="zone-projets">
137        <header class="titre-sommaire">
138                <h1>Les projets</h1>
139        </header>
140        <div id="projets" class="avec-margin-top">
141                <BOUCLE_DessousBreves(RUBRIQUES){titre_mot IN DessousBreves,ZoomSur2}{par num titre}>
142                <div class="projet idprojet#COMPTEUR_BOUCLE #EDIT{titre}"<BOUCLE_RubriqueColoree(HIERARCHIE){id_rubrique}{tout}{type_mot=_CouleurRubrique}{inverse} {0,1}><BOUCLE_CouleurRubrique(MOTS){id_rubrique}{type=_CouleurRubrique}{0,1}>[ style="background-color: #(#TEXTE|textebrut);"]</BOUCLE_CouleurRubrique></BOUCLE_RubriqueColoree>>
143                        <div class="content-projets">
144                                <BOUCLE_articles_plusdun(ARTICLES) {id_rubrique} {1,1}{lang}><a href="#URL_RUBRIQUE"[ title="(#_DessousBreves:DESCRIPTIF|attribut_html)"]></BOUCLE_articles_plusdun><BOUCLE_articles_unseul(ARTICLES) {id_rubrique} {0,1}{lang}><a href="#ARTICLE_URL"[ title="(#_DessousBreves:DESCRIPTIF|attribut_html)"]></BOUCLE_articles_unseul><a href="#URL_RUBRIQUE"[ title="(#_DessousBreves:DESCRIPTIF|attribut_html)"]><//B_articles_unseul><//B_articles_plusdun>
145                                        <h2>#TITRE</h2>
146                                        <div class="suite">
147                                                <span class="icon icon-arrow-right2">&#10140;</span>
148                                        </div>
149                                </a>
150                        </div>
151                </div>
152                </BOUCLE_DessousBreves>
153        </div>
154        <div class="clearfix"></div>
155</div>
156<!-- fin PROJETS -->
157</B_DessousBreves>
158
159<!-- PRATIQUE -->
160<div id="pratique" class="zone-pratique">
161        <BOUCLE_GroupeBlocsDefilants(RUBRIQUES){titre_mot=Goodies}{par num titre}>
162        <B_BlocsDefilants>
163        <header class="titre-sommaire">
164                <h1[ title="(#DESCRIPTIF|attribut_html)"] class="#EDIT{titre}">#TITRE</h1>
165        </header>
166        <div role="region" aria-label="[(#TITRE|attribut_html)]">
167                <div class="slider-pratique">
168                        <BOUCLE_BlocsDefilants(ARTICLES){id_rubrique}{par num titre}{lang}>
169                        <div class="content-pratique #EDIT{titre}">
170                                <a href="#ARTICLE_URL"[ title="(#DESCRIPTIF|attribut_html)"]>
171                                        <img src="[(#LOGO_ARTICLE_SURVOL|sinon{#LOGO_ARTICLE_NORMAL}|sinon{#CHEMIN{images/placeholder.jpg}}|image_focus{280,190}|extraire_attribut{src})]" alt="" />
172                                        <div class="h2"><span class="titre-pratique">#TITRE</span>
173                                                <span class="icon icon-arrow-right2 icon-lg">&#10140;</span></div>
174                                </a>
175                        </div>
176                        </BOUCLE_BlocsDefilants>
177                </div>
178        </div>
179        </B_BlocsDefilants>
180        </BOUCLE_GroupeBlocsDefilants>
181</div>
182<!-- fin PRATIQUE -->
183
184[(#PLUGIN{SOCIALTAGS}|oui)<div id="socialtags"></div>]
185
186</div><!-- cognac_content --></main>
187
188[<script src="(#CHEMIN{javascript/packery.pkgd.min.js})" type="text/javascript"></script>]
189[<script src="(#CHEMIN{javascript/imagesloaded.pkgd.min.js})" type="text/javascript"></script>]
190<script type="text/javascript">
191        // slider Slick
192        $(document).ready(function(){
193                $('#diaporama .slider-slick').slick({
194                  autoplay: true,
195                  pauseOnHover: true,
196                  autoplaySpeed: #CONFIG{soyezcreateurs/vitesse_slider,10000},
197                  fade: true,
198                  cssEase: 'linear',
199                  arrows: false,
200                  dots: true,
201                  centerMode: true,
202                  focusOnSelect: true
203                });
204               
205                $('#cycloshow .slider-slick').slick({
206                  autoplay: true,
207                  pauseOnHover: true,
208                  autoplaySpeed: #CONFIG{soyezcreateurs/vitesse_slider,10000},
209                  fade: true,
210                  cssEase: 'linear',
211                  arrows: true,
212                  dots: true,
213                  centerMode: true,
214                  focusOnSelect: true
215                });
216               
217                // Pour que les éventuelles vidéos soient jouées
218                // Ceci concerne la première vidéo (ou la seule)
219                var vid = $('.slider-slick').find('video');
220                if (vid.length > 0)
221                        $(vid).get(0).play();
222                //  Ceci concerne les autres vidéos
223                $('.slider-slick').on('afterChange', function(event, slick, currentSlide){
224                        var vid = $(slick.$slides[currentSlide]).find('video');
225                        if (vid.length > 0)
226                                $(vid).get(0).play();
227                });
228               
229                $('.slider-pratique').slick({
230                  dots: false,
231                  slidesToShow: [(#GET{LargeurContaineur}|div{304}|intval)],
232                  slidesToScroll: 3,
233                  infinite: true,
234                  variableWidth: true,
235                        responsive: [
236                                {
237                                  breakpoint: [(#GET{LargeurContaineur}|moins{304}|intval)],
238                                  settings: {
239                                        slidesToShow: 2,
240                                        slidesToScroll: 2,
241                                        infinite: true,
242                                        dots: true
243                                  }
244                                },
245                                {
246                                  breakpoint: 640,
247                                  settings: {
248                                        slidesToShow: 1,
249                                        slidesToScroll: 1
250                                  }
251                                }
252                          ]
253                });
254        });
255        // external js: packery.pkgd.js, imagesloaded.pkgd.js
256        // init packery after all images have loaded
257        var $grid = $('.grid').imagesLoaded( function() {
258          $grid.packery({
259                itemSelector: '.grid-item',
260                gutter: '.gutter-sizer',
261                columnWidth: '.grid-sizer',
262                percentPosition: false
263          });
264        });
265</script>
266
267#FILTRE{mini_html}
Note: See TracBrowser for help on using the repository browser.