Changeset 111983 in spip-zone for _plugins_/owlcarousel


Ignore:
Timestamp:
Oct 13, 2018, 7:25:53 AM (5 weeks ago)
Author:
arnaud.berard@…
Message:

Ajout d'exemples d'utilisation intégration des noisettes/skels
quelques astuces au passage en attendant de faire un article ou de l'intégrer à la doc actuelle

+z

Location:
_plugins_/owlcarousel/trunk
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/owlcarousel/trunk/README.md

    r111254 r111983  
    2323## Utilisation
    2424
     25### Un video player avec oembed
    2526
    26 ### Afficher le portfolio d'un article
     27Dans un squelette :
     28
     29Exemple d'utilisation avec le plugin sélections éditoriales et oEmbed.
     30
     31
     32```
     33<div class="selection selection_video">
     34                #SET{id_document,#ARRAY}
     35                <BOUCLE_sommaire_selection_4(SELECTIONS){identifiant=sommaire_selection_4}>
     36                        [<h2 class="selection-title[ (#EDIT{titre})]">(#TITRE)</h2>]
     37                        <BOUCLE_listContenus_sommaire_selection_4(SELECTIONS_CONTENUS){id_selection}{par rang, num titre, titre}>
     38                                #SET{id_document,#GET{id_document}|push{#ID_OBJET}}
     39                        </BOUCLE_listContenus_sommaire_selection_4>
     40                </BOUCLE_sommaire_selection_4>
     41
     42                <INCLURE{fond=noisettes/owl-video-player}
     43                                                {id_document=#GET{id_document}}
     44                                                {dots=non}
     45                                                {afficher_thumbnails=oui}
     46                                                {env} />
     47
     48</div>
     49```
     50
     51
     52### Afficher le portfolio d'un objet
    2753
    2854Exemple d'affichage du portfolio d'un article avec passage de breakpoints/mediaqueries
     
    4268}|json_encode})]
    4369
    44 <INCLURE{fond=noisettes/owlcarousel-article-portfolio}
    45                 {id_article=28}
     70<INCLURE{fond=noisettes/owlcarousel-objet-portfolio}
     71                {objet=article}
     72                {id_objet=28}
    4673                {id-carousel=sommaire_hero}
    4774                {navigation=false}
     
    85112```
    86113
    87 ## TRAVAUX :
     114### Utiliser un carousel uniquement en mode mobile
    88115
    89 Sat Oct 14 08:48:25 2017 :
     116Pour optimiser l'espace et la navigation en mode mobile, et profiter du mode touch, on propose pour les petits écran un carousel.
    90117
    91 *       maj de la lib owl.carousel
     118```javascript
     119
     120var documentWidth = $(window).width();
     121
     122var owl = $('.js-carousel'), owlOptions = {
     123                                                                loop: true,
     124                                                                margin: 10,
     125                                                                nav: false,
     126                                                                responsive:{
     127                                                                                0:{
     128                                                                                                items:1,
     129                                                                                                nav: false,
     130                                                                                                lazyLoad:true,
     131                                                                                }
     132                                                                }
     133                                                };
     134
     135if(documentWidth <= 430){
     136                var owlActive = owl.toggleClass('owl-carousel owl-theme').owlCarousel(owlOptions);
     137}else{
     138                owl.addClass('off');
     139};
     140
     141$(window).resize(function() {
     142                var documentWidth = $(window).width();
     143                if(documentWidth <= 430){
     144                                if( owl.hasClass('off') ){
     145                                                var owlActive = owl.owlCarousel(owlOptions);
     146                                                owl.removeClass('off').toggleClass('owl-carousel owl-theme');
     147                                }
     148                }else{
     149                                if(! owl.hasClass('off')){
     150                                                owl.addClass('off')
     151                                                                .toggleClass('owl-carousel owl-theme')
     152                                                                .trigger('destroy.owl.carousel');
     153                                }
     154                }
     155});
     156
     157```
     158
    92159
    93160
  • _plugins_/owlcarousel/trunk/paquet.xml

    r111830 r111983  
    22        prefix="owlcarousel"
    33        categorie="multimedia"
    4         version="1.0.15"
     4        version="1.0.16"
    55        schema="0.0.1"
    66        etat="test"
Note: See TracChangeset for help on using the changeset viewer.