Ignore:
Timestamp:
Jul 27, 2018, 7:03:44 AM (3 years ago)
Author:
riedel.nobuyuki@…
Message:

Passage du sommaire du mode cognac vers un positionnement des éléments par le plugin noizetier.
Par défaut l'ordre et celui d'avant la modification

File:
1 copied

Legend:

Unmodified
Added
Removed
  • _squelettes_/soyezcreateurs_net/trunk/plugins/soyezcreateurs/noisettes/sommaire_modeportailcognac_zoomsur.html

    r111204 r111212  
    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>
    111
    122<BOUCLE_ZoomSur(ARTICLES) {titre_mot=ZoomSur}{!par date}{0,1}{lang}>
     
    6858</BOUCLE_ZoomSur>
    6959
    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}>
    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}>
    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 <B_GroupeBlocsDefilants>
    160 <!-- PRATIQUE -->
    161 <div id="pratique" class="zone-pratique">
    162         <BOUCLE_GroupeBlocsDefilants(RUBRIQUES){titre_mot=Goodies}{par num titre}>
    163         <B_BlocsDefilants>
    164         <header class="titre-sommaire">
    165                 <h1[ title="(#DESCRIPTIF|attribut_html)"] class="#EDIT{titre}">#TITRE</h1>
    166         </header>
    167         <div role="region" aria-label="[(#TITRE|attribut_html)]">
    168                 <div class="slider-pratique">
    169                         <BOUCLE_BlocsDefilants(ARTICLES){id_rubrique}{par num titre}{lang}>
    170                         <div class="content-pratique #EDIT{titre}">
    171                                 <a href="#ARTICLE_URL"[ title="(#DESCRIPTIF|attribut_html)"]>
    172                                         <img src="[(#LOGO_ARTICLE_SURVOL|sinon{#LOGO_ARTICLE_NORMAL}|sinon{#CHEMIN{images/placeholder.jpg}}|image_focus{280,190}|extraire_attribut{src})]" alt="" />
    173                                         <div class="h2"><span class="titre-pratique">#TITRE</span>
    174                                                 <span class="icon icon-arrow-right2 icon-lg">&#10140;</span></div>
    175                                 </a>
    176                         </div>
    177                         </BOUCLE_BlocsDefilants>
    178                 </div>
    179         </div>
    180         </B_BlocsDefilants>
    181         </BOUCLE_GroupeBlocsDefilants>
    182 </div>
    183 <!-- fin PRATIQUE -->
    184 </B_GroupeBlocsDefilants>
    185 
    186 [(#PLUGIN{SOCIALTAGS}|oui)<div id="socialtags"></div>]
    187 
    188 </div><!-- cognac_content --></main>
    189 
    190 [<script src="(#CHEMIN{javascript/packery.pkgd.min.js})" type="text/javascript"></script>]
    191 [<script src="(#CHEMIN{javascript/imagesloaded.pkgd.min.js})" type="text/javascript"></script>]
    192 <script type="text/javascript">
    193         // slider Slick
    194         $(document).ready(function(){
    195                 $('#diaporama .slider-slick').slick({
    196                   autoplay: true,
    197                   pauseOnHover: true,
    198                   autoplaySpeed: #CONFIG{soyezcreateurs/vitesse_slider,10000},
    199                   fade: true,
    200                   cssEase: 'linear',
    201                   arrows: false,
    202                   dots: true,
    203                   centerMode: true,
    204                   focusOnSelect: true
    205                 });
    206                
    207                 $('#cycloshow .slider-slick').slick({
    208                   autoplay: true,
    209                   pauseOnHover: true,
    210                   autoplaySpeed: #CONFIG{soyezcreateurs/vitesse_slider,10000},
    211                   fade: true,
    212                   cssEase: 'linear',
    213                   arrows: true,
    214                   dots: true,
    215                   centerMode: true,
    216                   focusOnSelect: true
    217                 });
    218                
    219                 // Pour que les éventuelles vidéos soient jouées
    220                 // Ceci concerne la première vidéo (ou la seule)
    221                 var vid = $('.slider-slick').find('video');
    222                 if (vid.length > 0)
    223                         $(vid).get(0).play();
    224                 //  Ceci concerne les autres vidéos
    225                 $('.slider-slick').on('afterChange', function(event, slick, currentSlide){
    226                         var vid = $(slick.$slides[currentSlide]).find('video');
    227                         if (vid.length > 0)
    228                                 $(vid).get(0).play();
    229                 });
    230                
    231                 $('.slider-pratique').slick({
    232                   dots: false,
    233                   slidesToShow: [(#GET{LargeurContaineur}|div{304}|intval)],
    234                   slidesToScroll: 3,
    235                   infinite: true,
    236                   variableWidth: true,
    237                         responsive: [
    238                                 {
    239                                   breakpoint: [(#GET{LargeurContaineur}|moins{304}|intval)],
    240                                   settings: {
    241                                         slidesToShow: 2,
    242                                         slidesToScroll: 2,
    243                                         infinite: true,
    244                                         dots: true
    245                                   }
    246                                 },
    247                                 {
    248                                   breakpoint: 640,
    249                                   settings: {
    250                                         slidesToShow: 1,
    251                                         slidesToScroll: 1
    252                                   }
    253                                 }
    254                           ]
    255                 });
    256         });
    257         // external js: packery.pkgd.js, imagesloaded.pkgd.js
    258         // init packery after all images have loaded
    259         var $grid = $('.grid').imagesLoaded( function() {
    260           $grid.packery({
    261                 itemSelector: '.grid-item',
    262                 gutter: '.gutter-sizer',
    263                 columnWidth: '.grid-sizer',
    264                 percentPosition: false
    265           });
    266         });
    267 </script>
    268 
    26960#FILTRE{mini_html}
Note: See TracChangeset for help on using the changeset viewer.