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_sc_edito.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>
    11 
    12 <BOUCLE_ZoomSur(ARTICLES) {titre_mot=ZoomSur}{!par date}{0,1}{lang}>
    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}>
    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>
    921
    932<BOUCLE_EDITO(ARTICLES) {titre_mot=EDITO}{!par date}{0,1}{lang}>
     
    11423</BOUCLE_EDITO>
    11524
    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 
    26925#FILTRE{mini_html}
Note: See TracChangeset for help on using the changeset viewer.