Changeset 87538 in spip-zone


Ignore:
Timestamp:
Feb 19, 2015, 4:24:28 PM (5 years ago)
Author:
sabatier93@…
Message:

Carousel boostrap entierement repris + modulable

  • mot clé par défaut modifié en "carousel"
  • redimensionnement mieux cadré
  • position du titre vertical/horizontal
  • poignees ou non
  • inclusion des rubriques avec logo
Location:
_squelettes_/galaxie_melusine/melusine/trunk
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • _squelettes_/galaxie_melusine/melusine/trunk/css/style.css

    r87537 r87538  
    7474.diapo_legende.titre_droite{
    7575        right:0px;
     76        text-align:right;
    7677}
    7778.diapo_legende.titre_bloc40{
     
    7980        height:100%;
    8081}
    81 .diapo_legende.titrecentre{
     82.diapo_legende.titre_centre{
    8283        width:100%;
    8384        text-align:center;
  • _squelettes_/galaxie_melusine/melusine/trunk/inclusions/carousel_bs.html

    r87230 r87538  
    1 <BOUCLE_noisette(NOISETTES){id_noisette =#ENV{id_noisette}}>
    2 #SET{hauteur_carousel,#PARAMETRES|unserialize|table_valeur{hauteur_carousel}}
    3 #SET{largeur_carousel,#PARAMETRES|unserialize|table_valeur{largeur_carousel}}
    4 #SET{motclef,#PARAMETRES|unserialize|table_valeur{motclef}}
     1<!-- *********************************************************************** -->
     2<!-- *********************************************************************** -->
     3<!-- MODULE CAROUSEL ******************************************************* -->
     4<!-- *********************************************************************** -->
     5<!-- *********************************************************************** -->
     6
     7
     8<!-- *********************************************************************** -->
     9<!-- RECUPERATION DES DONNEES, INITIALISATION ET VERIFICATION ************** -->
     10<!-- *********************************************************************** -->
     11
     12
     13<BOUCLE_noisette(NOISETTES){id_noisette = #ENV{id_noisette}}>
     14  #SET{motclef,#PARAMETRES|unserialize|table_valeur{motclef}}
     15  #SET{largeur_carousel,#PARAMETRES|unserialize|table_valeur{largeur_carousel}}
     16  #SET{hauteur_carousel,#PARAMETRES|unserialize|table_valeur{hauteur_carousel}}
     17  #SET{titre_vertical,#PARAMETRES|unserialize|table_valeur{titre_vertical}}
     18  #SET{titre_horizontal,#PARAMETRES|unserialize|table_valeur{titre_horizontal}}
     19  #SET{taille,#PARAMETRES|unserialize|table_valeur{taille}}
     20  #SET{poignees,#PARAMETRES|unserialize|table_valeur{poignees}}
    521</BOUCLE_noisette>
    6 [(#GET{hauteur_carousel}|non)#SET{hauteur_carousel,250}]
    7 [(#GET{largeur_carousel}|non)#SET{largeur_carousel,900}]
    8 [(#GET{motclef}|non)#SET{motclef,"diaporama"}]
     22
     23[(#GET{motclef}|non)#SET{motclef,"carousel"}]
     24[(#GET{largeur_carousel}|non)#SET{largeur_carousel,800}]
     25[(#GET{hauteur_carousel}|non)#SET{hauteur_carousel,300}]
     26[(#GET{titre_vertical}|non)#SET{titre_vertical,"titredesc"}]
     27[(#GET{titre_horizontal}|non)#SET{titre_horizontal,"droite40"}]
     28[(#GET{taille}|non)#SET{taille,200}]
     29[(#GET{poignees}|non)#SET{poignees,"oui"}]
     30
    931
    1032<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
     
    1638    <li data-target="#carousel-example-generic" data-slide-to="#EVAL{#COMPTEUR_BOUCLE-1}" class="#GET{active}"></li>
    1739    #SET{active,""}
     40    #SET{nb_articles_parcourus,#COMPTEUR_BOUCLE}
     41  </BOUCLE_indicators>
     42
     43  <BOUCLE_indicators2 (RUBRIQUES){titre_mot=#GET{motclef}}{!par date}>
     44   
     45    <li data-target="#carousel-example-generic" data-slide-to="#EVAL{#GET{nb_articles_parcourus}+#COMPTEUR_BOUCLE-1}" class="#GET{active}"></li>
     46    #SET{active,""}
    1847   
    19   </BOUCLE_indicators>
     48  </BOUCLE_indicators2>
    2049  </ol>
    2150
    2251  <!-- Wrapper for slides -->
    2352 
    24 <div class="carousel-inner" role="listbox">
    25         #SET{active,"active"}
    26   <BOUCLE_articles (ARTICLES){titre_mot=#GET{motclef}}{!par date}>
    27   <div class="item #GET{active}">
    28         #SET{active,""}
    29     <a href=#URL_ARTICLE>
    30       [(#LOGO_ARTICLE||image_recadre{#GET{largeur_carousel},#GET{hauteur_carousel}})]
    31      </a>
    32        <div class="diapo_legende">
    33             <div class="texte_diapo_legende"><h2>#TITRE</h2>
    34               [(#DESCRIPTIF|couper{200})]
    35               <div class="lire_la_suite">
    36                 <a href="#URL_ARTICLE">Lire la suite</a>
    37               </div>
    38             </div>
     53  <div class="carousel-inner" role="listbox">
     54        #SET{active,"active"}
     55    <BOUCLE_articles (ARTICLES){titre_mot=#GET{motclef}}{!par date}>
     56      <div class="item #GET{active}">
     57        #SET{active,""}
     58        <a href=#URL_ARTICLE>
     59          [(#LOGO_ARTICLE|image_passe_partout{#GET{largeur_carousel},#GET{largeur_carousel}}|image_recadre{#GET{largeur_carousel},#GET{hauteur_carousel}})]
     60        </a>
     61           <div class="diapo_legende
     62              [(#GET{titre_horizontal}=={"droite"}|oui) titre_droite ]
     63              [(#GET{titre_horizontal}=={"gauche40"}|oui) titre_bloc40 ]
     64              [(#GET{titre_horizontal}=={"droite40"}|oui) titre_bloc40 titre_droite ]
     65              [(#GET{titre_horizontal}=={"centre"}|oui) titre_centre ]
     66              [(#GET{titre_vertical}=={"titrebas"}|oui) titre_dessous ]
     67              [(#GET{titre_vertical}=={"aucun"}|oui) titre_aucun ]">
    3968           
    40        </div>
    41   </div>
    42    
    43   </BOUCLE_articles>
    44 </div>
     69                <div class="texte_diapo_legende"><h2>#TITRE</h2>
     70                  [(#GET{titre_vertical}=={"titredesc"}|oui) #INTRODUCTION{#GET{taille}}]
     71                </div>
     72           
     73           </div>
     74      </div>
     75     
     76    </BOUCLE_articles>
     77    <BOUCLE_rubrique (RUBRIQUES){titre_mot=#GET{motclef}}{!par date}>
     78      <div class="item #GET{active}">
     79<!--        #SET{active,""} -->
     80        <a href=#URL_RUBRIQUE>
     81          [(#LOGO_RUBRIQUE|image_passe_partout{#GET{largeur_carousel},#GET{largeur_carousel}}|image_recadre{#GET{largeur_carousel},#GET{hauteur_carousel}})]
     82        </a>
     83           <div class="diapo_legende
     84              [(#GET{titre_horizontal}=={"droite"}|oui) titre_droite ]
     85              [(#GET{titre_horizontal}=={"gauche40"}|oui) titre_bloc40 ]
     86              [(#GET{titre_horizontal}=={"droite40"}|oui) titre_bloc40 titre_droite ]
     87              [(#GET{titre_horizontal}=={"centre"}|oui) titre_centre ]
     88              [(#GET{titre_vertical}=={"titrebas"}|oui) titre_dessous ]
     89              [(#GET{titre_vertical}=={"aucun"}|oui) titre_aucun ]">
     90           
     91                <div class="texte_diapo_legende"><h2>#TITRE</h2>
     92                  [(#GET{titre_vertical}=={"titredesc"}|oui) #INTRODUCTION{#GET{taille}}]
     93                </div>
     94           
     95           </div>
     96      </div>
     97    </BOUCLE_rubrique>
     98   </div>
     99 
    45100  <!-- Controls -->
    46   <!--
     101[(#GET{poignees}=={"oui"}|oui)
    47102  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    48103    <span class="glyphicon glyphicon-chevron-left"></span>
     
    53108    <span class="sr-only" >Next</span>
    54109  </a>
    55 -->
     110]
    56111</div>
  • _squelettes_/galaxie_melusine/melusine/trunk/modules/carousel.html

    r87230 r87538  
    1 <BOUCLE_noisette(NOISETTES){id_noisette =#ENV{id_noisette}}>
    2 #SET{fond,#PARAMETRES|unserialize|table_valeur{squelette}}
    3 #SET{motclef,#PARAMETRES|unserialize|table_valeur{motclef}}
     1<!-- *********************************************************************** -->
     2<!-- *********************************************************************** -->
     3<!-- MODULE CAROUSEL ******************************************************* -->
     4<!-- *********************************************************************** -->
     5<!-- *********************************************************************** -->
     6
     7
     8<!-- *********************************************************************** -->
     9<!-- RECUPERATION DES DONNEES, INITIALISATION ET VERIFICATION ************** -->
     10<!-- *********************************************************************** -->
     11
     12
     13<BOUCLE_noisette(NOISETTES){id_noisette = #ENV{id_noisette}}>
     14        #SET{fond,#PARAMETRES|unserialize|table_valeur{squelette}}
     15        #SET{motclef,#PARAMETRES|unserialize|table_valeur{motclef}}
     16        #SET{largeur_carousel,#PARAMETRES|unserialize|table_valeur{largeur_carousel}}
     17        #SET{hauteur_carousel,#PARAMETRES|unserialize|table_valeur{hauteur_carousel}}
     18        #SET{titre_vertical,#PARAMETRES|unserialize|table_valeur{titre_vertical}}
     19        #SET{titre_horizontal,#PARAMETRES|unserialize|table_valeur{titre_horizontal}}
     20        #SET{taille,#PARAMETRES|unserialize|table_valeur{taille}}
     21        #SET{poignees,#PARAMETRES|unserialize|table_valeur{poignees}}
    422</BOUCLE_noisette>
    5 [(#GET{fond}|non)#SET{fond,"carousel_sjcycle"}]
    6 [(#GET{motclef}|non)#SET{motclef,"diaporama"}]
     23
     24[(#GET{fond}|non)#SET{fond,"carousel_bs"}]
     25[(#GET{motclef}|non)#SET{motclef,"carousel"}]
     26[(#GET{largeur_carousel}|non)#SET{largeur_carousel,800}]
     27[(#GET{hauteur_carousel}|non)#SET{hauteur_carousel,300}]
     28[(#GET{titre_vertical}|non)#SET{titre_vertical,"titredesc"}]
     29[(#GET{titre_horizontal}|non)#SET{titre_horizontal,"droite40"}]
     30[(#GET{taille}|non)#SET{taille,200}]
     31[(#GET{poignees}|non)#SET{poignees,"oui"}]
     32
     33
     34<!-- *********************************************************************** -->
     35<!-- LANCEMENT DU MOTEUR DE CAROUSEL BOOTSTRAP OU SJCYCLE ****************** -->
     36<!-- *********************************************************************** -->
     37
    738[(#INCLURE{fond=inclusions/#GET{fond},id_noisette})]
    839
  • _squelettes_/galaxie_melusine/melusine/trunk/modules/carousel.yaml

    r87230 r87538  
    11nom: 'Carousel'
    2 description: "Carousel d’articles"
     2description: "Carousel des articles / rubriques / sites à mettre en avant"
    33contexte:
    44 - 'id_rubrique'
    55 - 'id_article'
    66blocs_autorises:
    7  - 'nav'
    87 - 'header'
    98 - 'breadcrumb'
     9 - 'pre_content'
     10 - 'content'
    1011 - 'extra'
    1112 - 'aside'
    1213 - 'footer'
    13  - 'pre_content'
    1414parametres:
    1515 -
     
    1717    options:
    1818      nom: 'squelette'
    19       label: 'Type de carousel'
    20       defaut: '0'
     19      label: 'Moteur de carousel'
     20      defaut: 'carousel_bs'
    2121      cacher_option_intro: 'oui'
    2222      datas:
     23        'carousel_bs': 'Carousel Bootstrap'
    2324        'carousel_sjcycle': 'Carousel sjcycle'
    24         'carousel_bs': 'Carousel Bootstrap'
    2525 -
    2626    saisie: 'input'
    2727    options:
    2828      nom: 'motclef'
    29       label: 'Mot clé pour sélectionner ce qui va apparaître dans le carousel'
    30       defaut: 'diaporama'
    31       obligatoire: 'oui'
    32       size: 20
    33  -
    34     saisie: 'input'
    35     options:
    36       nom: "hauteur_carousel"
    37       label: "Hauteur du carousel"
    38       defaut: "250"
     29      label: 'Mot-clé de filtrage <br> pour inclure des contenus dans le carousel'
     30      defaut: 'carousel'
    3931      obligatoire: 'oui'
    4032      size: 20
     
    4335    options:
    4436      nom: "largeur_carousel"
    45       label: "Largeur du carousel"
    46       defaut: "900"
     37      label: "Largeur *virtuelle* des images du carousel<br>(résolution maxi du recadrage horizontal)<br>"
     38      defaut: "800"
    4739      obligatoire: 'oui'
    48       size: 20
     40      size: 10
     41 -
     42    saisie: 'input'
     43    options:
     44      nom: "hauteur_carousel"
     45      label: "Hauteur *virtuelle* des images du carousel<br>(fixe le ratio l/h du carousel)<br>"
     46      defaut: "300"
     47      obligatoire: 'oui'
     48      size: 10
     49 -
     50    saisie: 'radio'
     51    options:
     52      nom: "titre_vertical"
     53      label: "Position du texte"
     54      datas:
     55        titredesc: "Titre et descriptif en haut de l’image"
     56        titrehaut: "Titre seul en haut de l’image"
     57        titrebas: "Titre seul en bas sous l’image"
     58        aucun : "Aucun titre ni descriptif"
     59      defaut: "titredesc"
     60 -
     61    saisie: 'radio'
     62    options:
     63      nom: "titre_horizontal"
     64      label: "Alignement du texte"
     65      datas:
     66        gauche: "coin gauche"
     67        droite: "coin droite"
     68        gauche40: "gauche largeur 40%"
     69        droite40: "droite largeur 40%"
     70        centre: "centré pleine largeur"
     71      defaut: "droite40"
     72 -
     73    saisie: 'input'
     74    options:
     75      nom: "taille"
     76      label: "Longueur du descriptif (nombre de caractères)"
     77      defaut: '200'
     78      size: 5
     79 -
     80    saisie: 'radio'
     81    options:
     82      nom: "poignees"
     83      label: "Poignées de défilement"
     84      datas:
     85        oui: "oui"
     86        non: "non"
     87      defaut: "oui"
Note: See TracChangeset for help on using the changeset viewer.