Owl Carousel 2

Owl Carousel est un diaporama jQuery adaptable aux différentes tailles d’écran, qu’on peut actionner par glisser, il utilise CSS3 mais il est compatible avec les vieux navigateurs, et il est aussi paramétrable.
Le présent plugin permet d’utiliser facilement Owl Carousel dans SPIP.

Lien de référence : https://owlcarousel2.github.io/OwlCarousel2/

Installation

Comme tous les plugins.

Configuration

Vous pouvez activer l’insertion des styles et javascript du plugin dans l’espace public et dans l’espace privé de spip sur la page de configuration du plugin.

Exemples

Des exemples utilisables dans vos squelettes se trouvent dans le dossier “noisettes” du plugin. Ce répertoire est plus un outil pour squelette, et destiné plus particulièrement aux intégrateurs.
Les noisettes fournies peuvent servir de point de départ et ne conviendront certainement pas à tous les cas d’utilisation en l’état.
Il faut plus les considérer comme des extraits de code facilitant l’intégration à votre projet.

Modèle

Un modèle est tout prêt pour afficher les documents d’un article de type jpg, gif ou png dans un diaporama insérable de cette manière :
<articleX|owl>
où “X” est l’id de l’article, pour afficher toutes les images de cet article.
Quelques paramètres permettent de modifier quelques réglages, et se définissent de cette manière lors de l’inclusion du modèle :
<articleX|owl|parametre=valeur>


Paramètres

  • id-carousel=unikid : id unique du carousel, doit être renseigné si plusieurs carousels dans la même page.
  • caption=oui : afficher la description de l’image
  • tri=titre : (rang_lien par defaut) spécifier l’ordre de tri des documents
  • dots=false (true par defaut) : affiche les points pour changer d’image
  • navigation=true (false par defaut) : afficher les boutons précédents/suivants
  • items=2 (1 par défaut) : pour afficher plusieurs images en même temps
  • margin=10 : pour ajouter une marge entre chaque image, en pixels
  • docs=1,2,3 : affiche uniquement les documents 1, 2 et 3. Dans ce cas, le numéro identifiant de l’article est optionnel, vous pouvez donc écrire <article|owl|docs=1,2,3> pour afficher ce diaporama n’importe où dans le site, tant que les documents existent dans la médiathèque
  • caption_css=monstyle : ajouter des css sur la description (par exemple : invisible)
  • autoHeight=true : pour que la hauteur soit adaptée à chaque diapositive
  • autoplay=true (false par défaut) : le carousel démarre automatiquement
  • autoplayHoverPause=true (false par défaut) : pause au survol en mode autoplay
  • autoplayTimeout=6500 (5000 par défaut, en milliseconde) : durée d’affichage d’une diapositive
  • lazyLoad=true (false par défaut) : ne charge que les images visibles pour optimiser le chargement.
  • animateIn= une classe css animation CSS3. par défaut seul fadeOut est proposé par le plugin.
  • animateOut= une classe css animation CSS3. par défaut seul fadeOut est proposé par le plugin.
  • URLhashListener=true : pour suivre le diaporama dans l’historique de navigation.
  • largeur=200 : redimenssionne les images à 200px de large.
  • left|center|right : alignement du diaporama à gauche, au centre ou à droite.

Particularité

Avec le paramètre docs=1,2,3,4 et dans le cas où on n’utilise pas un numéro d’article, exemple : <article|owl|docs=1,2,3,4>
alors il faut ajouter le paramètre |tri=titre :
<article|owl|docs=1,2,3,4|tri=titre>
(le tri sur rang_lien ne peut exister s’il n’y a pas de numéro d’article)

Discussion

23 discussions

  • 6

    Bonjour,

    j’ai essayé de bidouiller un carrousel en page sommaire (adapté de Owl Rubrique Article), avec une image (il s’agit d’articles de galeries de photos) désignée comme “couverture” par un mot de passe technique (je n’ai pas trouvé comment utiliser un logo en — grand — format original d’image), et le titre de l’article, avec lien pointant sur ledit article. Mon problème : le lien ne fonctionne pas (aucune activation au survol, comme si la balise “a” n’existait pas), ce que je trouve relativement ennuyeux.
    J’ai désactivé le css au cas où et le problème persiste, je reste donc à me demander si c’est un problème dans mes paramétrages du carrousel, ou un problème de syntaxe des boucles ?

    Votre aide me serait d’un grand secours, et désolée si jamais le code vous tire des larmes, je débute ^^

    #SET{container,#ENV{container,}}
    <BOUCLE_kelRub(RUBRIQUES){id_rubrique=#ENV{id_rubrique}}>
    #SET{id_owl,#ENV{id-carousel,owl-rub-art-#ID_RUBRIQUE}}
    <div class="#GET{container}" id="mon_monde">
      <div class="fond_gris">
        <h2>Bienvenue dans mon monde...</h2>
      </div>
          <B_listArticles>
            <a href="#URL_RUBRIQUE">#TITRE</a>
      <div[ id="(#GET{id_owl})" ]class="rubrique owl-carousel owl-theme[ (#ENV{css}|attribut_html)]">
          <BOUCLE_listArticles(ARTICLES){id_rubrique}{!par id_article}{par #ENV{tri}}>
              <article class="contenu">
                <div class="couv-photo" style="background-image:url(<BOUCLE_couv_photo(DOCUMENTS spip_documents_liens){mots_liens.id_mot=8} {id_article}{mode=document}{extension==jpg|png|gif}>#URL_DOCUMENT</BOUCLE_couv_photo>);">
                    <div class="contenu-content">
                      <a href="#URL_ARTICLE" class="btn">#TITRE</a>
                  </div>
                </div>
              </article>
     
          </BOUCLE_listArticles>
      </div>
      </B_listArticles>
    </div>
    <script>
    jQuery(function($){
        $("[#(#ENV{id-carousel,owl-rub-art-#ID_RUBRIQUE})]").owlCarousel({
          loop:true,[
          items: (#ENV{items, 1}),][
          margin:(#ENV{margin}),][
          dots:(#ENV{dots, false}),][
          nav:(#ENV{navigation, true}),][
          autoplay: (#ENV{autoplay, true}),][
          autoplayHoverPause: (#ENV{autoplayHoverPause, true}),][
          lazyLoad: (#ENV{lazyLoad}),][
          animateIn:'(#ENV{animateIn})',][
          animateOut:'(#ENV{animateOut})',][
          autoplayTimeout: (#ENV{autoplayTimeout}),][
          autoHeight: (#ENV{autoHeight}),][
          URLhashListener:(#ENV{URLhashListener}),
          startPosition: 'URLHash',]
          navText : ['<span class="icon icon-chevron-thin-left" aria-hidden="true"></span><span class="icon visuallyhidden"><:owlcarousel:prec:></span>','<span class="icon icon-chevron-thin-right" aria-hidden="true"></span><span class="icon visuallyhidden"><:owlcarousel:suiv:></span>'],
          responsive:{
            0:{
             items:1
            }[,
              640:{
               items:(#ENV{items})
            }]
          }
        });
    });
    </script>
    </BOUCLE_kelRub>
    • Bonjour,

      Je viens de tester, en tous cas la boucle et le js fonctionne sur le squelette livré avec spip (dist) et avec insertion des css.
      J’ai bien un lien sur la rubrique et un autre sur chacun des articles.

      Passez vous bien l’identifiant de la rubrique en paramètre de l’inclusion ainsi :

      <INCLURE{fond=modeles/owl_modele_perso,id_rubrique=7,env,ajax} />

      Pour ce qui est de l’affichage du document plutot que de faire une boucle dans la balise style, je vous conseille plutot d’utiliser les balise #SET et #GET comme dans l’exemple ci-dessous. Plus d’info sur SET et GET ici

      Vous pouvez rajouter des filtres a la suite de #FICHIER comme image_recadre, image_reduire

      <style media="screen">
      #mon_monde .owl-carousel .couv-photo{
        background-size: cover;
        height: 15rem;
      }
      </style>
      #SET{container,#ENV{container}}
      <BOUCLE_kelRub(RUBRIQUES){id_rubrique=#ENV{id_rubrique}}>
      #SET{id_owl,#ENV{id-carousel,owl-rub-art-#ID_RUBRIQUE}}
      <div class="#GET{container}" id="mon_monde">
        <div class="fond_gris">
          <h2>Bienvenue dans mon monde...</h2>
        </div>
            <B_listArticles>
              <a href="#URL_RUBRIQUE">#TITRE</a>
              <div[ id="(#GET{id_owl})" ]class="rubrique owl-carousel owl-theme[ (#ENV{css}|attribut_html)]">
            <BOUCLE_listArticles(ARTICLES){id_rubrique}{!par id_article}{par #ENV{tri}}>
                <article class="contenu">
                  <BOUCLE_couv_photo(DOCUMENTS spip_documents_liens){id_article}{mode=document}{extension==jpg|png|gif}>
                      #SET{media, #FICHIER }
                  </BOUCLE_couv_photo>
                  <div class="couv-photo" style="background-image:url(#GET{media});">
                      <div class="contenu-content">
                        <a href="#URL_ARTICLE" class="btn">#TITRE</a>
                      </div>
                  </div>
                </article>
            </BOUCLE_listArticles>
        </div>
        </B_listArticles>
      </div>
      <script>
      jQuery(function($){
          $("[#(#ENV{id-carousel,owl-rub-art-#ID_RUBRIQUE})]").owlCarousel({
            loop:true,[
            items: (#ENV{items, 1}),][
            margin:(#ENV{margin}),][
            dots:(#ENV{dots, false}),][
            nav:(#ENV{navigation, true}),][
            autoplay: (#ENV{autoplay, true}),][
            autoplayHoverPause: (#ENV{autoplayHoverPause, true}),][
            lazyLoad: (#ENV{lazyLoad}),][
            animateIn:'(#ENV{animateIn})',][
            animateOut:'(#ENV{animateOut})',][
            autoplayTimeout: (#ENV{autoplayTimeout}),][
            autoHeight: (#ENV{autoHeight}),][
            URLhashListener:(#ENV{URLhashListener}),
            startPosition: 'URLHash',]
            navText : ['<span class="icon icon-chevron-thin-left" aria-hidden="true"></span><span class="icon visuallyhidden"><:owlcarousel:prec:></span>','<span class="icon icon-chevron-thin-right" aria-hidden="true"></span><span class="icon visuallyhidden"><:owlcarousel:suiv:></span>'],
            responsive:{
              0:{
               items:1
              }[,
                640:{
                 items:(#ENV{items})
              }]
            }
          });
      });
      </script>
      </BOUCLE_kelRub>

      Voila © chez moi ce modèle marche ^^, j’ai juste supprimé le paramètre mot_clef de la boucle pour le test.

      Après tout dépend de ce que vous souhaitez faire, mais généralement dans le cas de squelette ou dans une page sommaire j’utilise plutôt selection éditoriales pour gérer les contenus, que les mots-clefs.

    • Merci pour cette réponse et sa rapidité !!

      J’ai essayé le code que vous m’avez transmis, mais apparemment aucun changement, j’y perds le peu de repères. Merci en tous cas pour les améliorations. Je vais me pencher dessus, histoire de retrouver en couverture l’image en particulier que j’avais désignée pour cet usage dans chaque article.
      J’avais essayé avec les sélections éditoriales (owl), mais étais passée à côté du plugin dédié, sur lequel je suis tombée aujourd’hui en faisant mes recherches :p, et pensais que je n’avais pas le niveau pour cette option (évidemment avec le plugin c’est plus parlant !).

      En désespoir de cause, peut-être est-ce alors mon css ? Comme je souhaite que mon h2 soit fixe au-dessus d’un fond gris, mais que le titre (et le lien ! grrr) de l’article passe aussi en carrousel sur ce même fond gris, j’ai tenté de jouer avec les z-index, peut-être fort maladroitement. Bon après, je crains qu’on sorte du sujet du carrousel...

      Bon, au cas où...

      #mon_monde {position: relative; top: 0;}
        #mon_monde .fond_gris {position: absolute; top: 30vh; left: 0; z-index: 750; min-width: 300px; width: 43%; min-height: 100px; height: 35vh; padding: 1em 2em;  margin: 0 auto; margin-left: 45%; text-align: center;  color: white;}
        #mon_monde .fond_gris h2 {font-variant: small-caps; font-size: 2em;}
        #mon_monde .rubrique {position: relative; top: 0 !important; left: 0; padding:0;  margin: 0;}
        #mon_monde .couv-photo {width: 100%; height: 100vh; background: no-repeat 50% 50%; background-size: cover; background-clip: border-box; overflow: hidden; z-index: 1000;}
        #mon_monde .contenu-content {position: absolute; top: 30vh; left: 0; min-width: 300px; width: 43%; min-height: 100px; height: 35vh; padding: 1em 2em;  margin: 0 auto; margin-left: 45%; text-align: center; background-color: rgba(0,0,0,0.5); color: white;}
        #mon_monde  a {position: absolute; top: 5vh; left: 0; min-width: 300px; width: 100%; font-variant: none; font-size: 3.5em; z-index: 1500 !important; padding: 1.5em 2em;  margin: 0 auto; color: white; line-height: 1em; text-align: center; font-family: @font2; }
       
       
        #mon_monde .owl-nav {clear: both; width: 100%; height: 100vh; position: absolute; top: 0;margin-top: 0;}
        #mon_monde .owl-nav button.owl-prev , .owl-nav button.owl-next {max-width: 150px; height: 200px; padding: 2px 2px !important; text-align: center; background-color: rgba(0,0,0,0); color: rgba(255,255,255,.8) !important; font-size: 29px !important; position: absolute; top: 45%;}
        #mon_monde .owl-nav button.owl-prev {position: absolute; left: 5px;}
        #mon_monde .owl-nav button.owl-next {position: absolute; right: 5px;}
    • Bonjour ,

      Effectivement c’est bien un problème de css, en fait votre bloc owl_nav
      passe au dessus de votre lien, et comme vous lui donnez la hauteur de la page (100vh) il viens couvrir le bloc de contenu.

      Aussi quand vous positionnez en absolue, vérifiez bien que le conteneur est en relatif, plus on a de calques imbriqués. plus il est complexe de gérer les niveaux et les flottants.

      J’extrapole en lisant les css que vous souhaitez réaliser un carousel en fullscreen, car vous utilisez l’unitée vH ou wW qui est relative a la taille de l’écran (si ce n’est pas le cas et que le carousel est imbriqué dans un bloc ça n’est pas le bon choix, utilisez les % ou rem).

      Un exemple ici de carousel fullscreen avec owl que j’avais noté de coté pour l’intégrer en exemple de squelette, mais pas eut encore le temps.

      https://codepen.io/ingvi/pen/gaOzYe

    • Grand merci pour ces éclaircissements !

      Oui, vous avez bien extrapolé, je souhaite faire un carrousel fullscreen, avec en fond l’image de couverture de l’article, un cadre semi-transparent avec dessus le titre “mon monde” fixe, et le titre avec lien de l’article qui bouge en même temps que l’image... J’aime bien les choses simples et faciles ^_^
      Je vais me re-pencher sur la copie.

      Merci encore et bonne journée.

    • J’apporte mon grain de sel ... peut être après la bataille ...
      N’oublions pas qu’il y a une façon assez simple d’utiliser le modèle article|owl dans une squelette, c’est de publier un article (avec date=0000 pour ne pas le voir dans le fil) dans lequel on appelle le modèle avec tous les paramètres qu’on veut. Et puis dans le squelette, où on veut (ex. sommaire.html), insérer une boucle ARTICLES (avec {id_article=le id de l'article ci-dessus} et dans la boucle juste la balise [(#TEXTE)] avec les crochets et parenthèses pour que spip recalcule l’appel au modèle.
      ENORME avantage, on peut changer les paramètres dans l’article sans modifier le code html du squelette :-))
      Enjoy !

    • Bonjour,

      Après quelques nouveaux essais ça fonctionne comme je voulais ! =)

      je vous transmets donc le css, certainement à élaguer et nettoyer (je laisse ça aux plus aguerris que moi). La solution que j’ai trouvée consiste en effet à passer le z-index de owl-carousel à 1000, et la hauteur de owl-nav à 0 pour éviter que cette div ne passe sur le lien.

      J’ai donc un carrousel en pleine page avec une image de l’article en fullwidth, un cadre dans lequel le titre de l’article suit le carrousel, et un titre fixe nommant la catégorie.
      En revanche, le responsive relève encore du bidouillage fin avec les positionnements absolute...

      #mon_monde {position: relative; top: 0;}
        #mon_monde .cadre_titre {position: absolute; top: 30vh; left: 0; z-index: 1500; min-width: 300px; width: 43%; min-height: 100px; height: 100px; padding: 1em 2em;  margin: 0 auto; margin-left: 45%; text-align: center;  color: white;}
        #mon_monde .cadre_titre h2 {font-variant: small-caps; font-size: 2em; z-index: 1700;}
        #mon_monde .rubrique {position: relative; top: 0 !important; left: 0; padding:0;  margin: 0;}
        #mon_monde .owl-carousel {z-index: 1000;}
        #mon_monde .couv-photo {width: 100%; height: 100vh; background: no-repeat 50% 50%; background-size: cover; background-clip: border-box; overflow: hidden; z-index: 1000;}
        #mon_monde .contenu-content {position: absolute; top: 30vh; left: 0; min-width: 300px; width: 43%; min-height: 100px; height: 36vh; padding: 1em 2em;  margin: 0 auto; margin-left: 45%; text-align: center; background-color: rgba(0,0,0,0.5); color: white;}
        #mon_monde  a {position: absolute; top: 6vh; left: 0; min-width: 300px; width: 100%; font-variant: none; font-size: 3.5em; z-index: 2000 !important; padding: 1.5em 2em;  margin: 1px auto; color: white; line-height: 1em; text-align: center; font-family: @font2; }
        #mon_monde  a#series {position: absolute; top: 49vh; left: 0; margin-left: 58%; min-width: 300px; width: 35vw;z-index: 1500 !important; padding: 1em;}
       
       
        #mon_monde .owl-nav {clear: both; width: 100%; height: 0; position: absolute; top: 48vh;margin-top: 0; }
        #mon_monde .owl-nav button.owl-prev , .owl-nav button.owl-next {max-width: 150px; height: 50px; padding: 2px 2px !important; text-align: center; background-color: rgba(0,0,0,0); color: rgba(255,255,255,.8) !important; font-size: 45px !important; position: absolute; top: 45%;}
        #mon_monde .owl-nav button.owl-prev {position: absolute; left: 5px; font-size: 45px !important;}
        #mon_monde .owl-nav button.owl-next {position: absolute; right: 0px; font-size: 45px !important;}
        #mon_monde .owl-nav button.owl-prev:hover, .owl-nav button.owl-next:hover {background-color: rgba(0,0,0,0) !important;color: rgba(0,0,0,1) !important;}

      Merci pour votre aide précieuse et à bientôt !

    Reply to this message

  • 3

    Bonsoir,
    Encore moi :-)
    Je ne sais pas si c’est un petit bug, certainement plutôt une mauvaise compréhension de ma part, concernant le fichier modeles/article_owl.html. Pour ma part, je l’utilise comme miniatures et j’appelle la mediabox pour l’aperçu en grand. Je paramètre donc la ligne 40 à 5 items et ça fonctionne très bien :-) !
    Ligne 55, je vois “responsive”, je me dis “chouette !” et je demande donc 3 items, par exemple, à la ligne 57. Mais je me retrouve avec seulement 3 items partout, à toutes les résolutions, y compris supérieures à 640 px.
    Qu’est-ce qui m’a échappé ici ?
    Bonne soirée

    Reply to this message

  • 4

    Bonjour,

    De retour sur ce carousel, avec cette fois l’idée d’appeler les articles contenus dans une rubrique, j’en appelle donc à la noisette owlcarousel-selections_editoriales mais je n’arrive pas à l’adapter comme il faut, j’ai un retour d’erreur qui me dit :
    critère inconnu =
    sur la boucle _listSelection (de la ligne 29… 1ère ligne du code adapté comme ci-dessous).

    Aucun résultat ne s’affiche d’ailleurs… J’appelle la noisette de la façon suivante sur le sommaire :

    <INCLURE{fond=noisettes/owlcarousel-selections_editoriales,
              objet=rubrique,
              id_objet=13,
              animateOut=fadeOut, env, ajax }/>

    Quelqu’un peut-il m’aider à trouver ce qui ne va pas ?

    <BOUCLE_listSelections(RUBRIQUES){identifiant=#GET{identifiant}}>
        <B_listContenus>
        <div class="rubrique js-cover-carousel owl-carousel owl-theme[ (#CHAMP_SQL{css}|attribut_html)]">
            <BOUCLE_listContenus(ARTICLES){id_rubrique}{par #GET{tri}}>
                <article  class="contenu[ (#CHAMP_SQL{css}|attribut_html)]">
                        [<div class="contenu-thumbnail">(#LOGO_ARTICLES)</div>]
                        <div class="contenu-content entry article hentry">
                            <div class="title entry-title">
                                [(#GET{link_title}|=={true}|oui)<a href="#URL"]
                                <h2[ class="(#EDIT{titre})"]>[(#TITRE)]</h2>
                                [(#GET{link_title}|=={true}|oui)</a>]
                            </div>
                            [<div class="descriptif [(#EDIT{descriptif}) ]entry-content">
                                (#DESCRIPTIF)
                            </div>][(#GET{link_title}|!={true}|oui)
                            <a href="#URL" class="#GET{link_class, cover-link}">
                                <span>#GET{link_txt, voir : #TITRE }</span>
                            </a>]
                        </div>
                </article>
            </BOUCLE_listContenus>
        </div>
    </B_listContenus>
    </BOUCLE_listSelections> 
    • Bonjour,

      Ceci devrait mieux fonctionner,
      si on souhaite afficher les articles d’une rubrique sous forme de carousel

      par exemple pour une noisette/modele a inclure, nommé
      owlcarousel-rubrique_articles

      <BOUCLE_kelRub(RUBRIQUES){id_rubrique=#ENV{id_rubrique}}>
          [<h2>(#TITRE)</h2>]
          <B_listArticles>
          <div[ id="(#ENV{id-carousel,owl-rub-art-#ID_RUBRIQUE})" ]class="rubrique owl-carousel owl-theme[ (#ENV{css}|attribut_html)]">
              <BOUCLE_listArticles(ARTICLES){id_rubrique}{par #ENV{tri}}>
                  <article class="contenu">
                      [<div class="contenu-thumbnail">(#LOGO_ARTICLE)</div>]
                      <div class="contenu-content">
                          <h2 class="title[ (#EDIT{titre})]">[(#TITRE)]</h2>
                          [<div class="descriptif[ (#EDIT{descriptif})]">
                              (#DESCRIPTIF)
                          </div>]
                          <a href="#URL_ARTICLE" class="btn">#TITRE</a>
                      </div>
                  </article>
              </BOUCLE_listArticles>
          </div>
      </B_listArticles>
      <script>
      jQuery(function($){
          $("[#(#ENV{id-carousel,owl-rub-art-#ID_RUBRIQUE})]").owlCarousel({
              [navigation : (#ENV{navigation,true}),]
              slideSpeed : 300,
              paginationSpeed : 400,
              items : 1[,
              autoplay :(#ENV{autoplay,false}),][
              autoplayHoverPause : (#ENV{autoplayHoverPause,false}),][
              lazyLoad : (#ENV{lazyLoad,false}),]
              navText : ["<:owlcarousel:prec:>","<:owlcarousel:suiv:>"]
          });
      });
      </script>
      </BOUCLE_kelRub>

      a appeler dans un squelette ainsi

      <INCLURE{fond=noisettes/owlcarousel-rubrique_articles,id_rubrique=7,env,ajax} />

      je corrige aussi la noisette à laquelle il manquait le js (a force de surcharger on passe à coté ^^)
      et j’ajouterais certainement celle ci …

    • Bonsoir Arnaud,

      Merci, ça fonctionne à merveille ainsi ! Et merci à nouveau pour votre réactivité :-)

      Le JS était bien dans la noisette, mais en dehors de la boucle… ça fait une différence ?

      De toute façon mon adaptation du code n’était pas la bonne semble-t-il, et même, le choix de la noisette… À quoi est réellement destinée la noisette owlcarousel-selections_editoriales ? Je ne suis pas sûre d’avoir compris son usage du coup !

      Encore un grand merci :-)

    • Bonjour,

      Pour la noisette selection_editoriales elle fonctionne avec le plugin homonyme :

      https://contrib.spip.net/Selections-editoriales

      assez pratique pour gérer un sommaire

      (oui le js était dedans je devais pas être bien réveillé )

      Bonne semaine

    • Bonjour,

      C’est noté, je creuserai ce plugin du coup pour d’autres usages…
      Merci encore pour le coup de main.

      Bonne semaine également

    Reply to this message

  • 10

    Bonjour,

    D’abord un grand merci pour ce plugin que je découvre et qui a l’air génial !

    Je rencontre cependant 2 problèmes que je ne parviens pas à régler :

    1/ c’est incompréhensible, il m’affiche un total d’image bien supérieur à la réalité. Par exemple, si j’ai 5 images dans un portfolio d’un article, il me met un total de 11 (voire 14 ou 15 si dans le modèle, je modifie le nombre d’items affichés pour en demander 5 au lieu d’1 seul…). Pour un article où j’en ai 23, il m’en affiche 69, ou 71, ou 72… Il me présente donc mes images plusieurs fois ! Personne ne semble avoir rencontré ce problème ?

    2/ La légende disparaît dans l’image agrandie dansla Mediabox…???

    D’avance merci pour votre aide.

    • PS : Je précise que le nombre de miniature est correct… c’est lorsqu’on agrandie les images dans la mediabox que le nombre est largement augmenté par rapport à la réalité… et ce, sans aucune modification du modèle…

    • J’ai fini par trouver : c’est loop:true qui pose problème dans le modèle, mais je ne comprends pas pourquoi ? En le passant à false, le total est bon… donc ça va, à condition de ne pas vouloir de boucle :-)

      Je ne trouve toujours pas comment conserver la légende dans la colorbox…

      …ni comment conserver les réglages de max-height / max-width de la config de ladite colorbor, ni de mon css… Mes images s’affichent bien en grand mais elles débordent et n’ont pas leur légende.

      En fait, c’est comme s’il y avait une surcouche quelque part et je n’arrive pas à trouver quoi / où malgré des heures de recherche (j’avais priorisé le problème de total et gardé ça pour plus tard, et voilà ;p !)

      J’avais oublié de préciser : SPIP 3.2.0 !!

    • Bonjour,

      Effectivement l’option loop de owl carousel permet de simuler un défilement infini et recopiant les slides avant et après.

      Pour la colorbox c’est celle livrée avec spip qui est utilisée, il y’a une discussion ouverte sur le GitHub de l’auteur a ce sujet , et des pistes : https://github.com/jackmoore/colorbox/issues/158

    • Bonjour, et merci pour cette réponse rapide !

      Ok pour la boucle, même si ça paraît bizarre ces totaux qui ne correspondent pas à la réalité :-)

      En revanche, pour la Colorbox, je sais bien qu’elle est livrée dans SPIP depuis un moment, je l’utilise sur tous les sites que je produis, depuis des années et sans aucun souci, que je la customize ou non.

      Ce que je ne comprends pas, c’est que dès lors que Owl est actif, un clic sur une des images appelle bien l’agrandissement via la Mediabox, mais la légende disparaît et l’image est affichée à sa taille réelle sans prendre en compte les réglages de la config mediabox ni mon css. Donc elle déborde rapidement de l’écran si elle est un peu plus grande.

      Je précise que j’ai essayé sur un SPIP 3.2.0 vierge après avoir rencontré le problème sur mon propre site. Je me sers des images affichées dans le carousel comme miniatures pour les agrandir via la Mediabox… Ça ressemble plus à un bug, non ?

      D’avance merci pour votre aide.

    • Dans les modèles du plugin on appel colorbox par la class js-colorbox (voir le js du modèle).

      pour rétablir le comportement de spip il faut remplacer par la class mediabox et d’ajouter l’attribut title sur le lien, ce qui affiche bien le titre du document ensuite quand on ouvre la popup.

      Ceci résout le problème des images aussi et utilisant les paramètres définis dans la configuration de spip.

      Je reporte ça sur les modèles du plugin, merci du signalement.

    • Mille mercis Mist. GraphX ! Je n’ai pas eu le temps de tester, mais dès que possible, et je ferai un meilleur retour… :-)

    • J’ai enfin eu le temps de tester ce soir… Merci ! C’est magique :-) !

      … Ou presque : je constate un autre problème (pas pour moi car je ne vais pas me servir de la boucle), mais lorsque on est en loop:true, mettons avec 3 images, il fait un total de 7 (ce que j’avais rapporté plus haut), et donc il ouvre sur la 3, en taille parfaite et avec la légende, puis enchaîne sur la 4 (la seconde) et la 5 (la troisième) de la même façon – parfaite – puis il continue sur la boucle comme avant pour les 6, 7, 1 et 2, avec l’image qui déborde et sans la légende, donc j’imagine qu’il retourne sur la classe js-colorbox et non mediabox pour continuer la boucle ? Ensuite il revient sur la 4, 5 et 6 comme il faut.

      D’ailleurs, sur cette boucle, la 7 et la 1 sont les mêmes ??
      Ça n’est pas un problème pour moi car je ne vais pas utiliser la boucle, mais c’est juste pour vous rapporter ce comportement :-)

      Enfin dernière chose et après j’arrête de vous embêter : dans la liste des articles, sur une rubrique, s’il n’y a que la galerie et pas de texte, ce qui est rapporté comme extrait de l’article donne :
      #demo .owl-slide > .caption z-index : 100 ; position : absolute ; left:55% ; width : 40% ; bottom:5% ; #demo .owl-slide > .caption > .title background : #000 ; color : #FFF ; padding : 5px ; width : auto ; #demo .owl-slide > .caption > p background-color : rgba(88, 88, 88, 0.75) ; /*float : right ;*/ color : #FFF ; padding : 5px ; (...)

      … Enfin seulement quand on appelle la galerie avec le raccourci SPIP <articlexx|owl>, ce qui n’est pas mon cas, car j’appelle le modèle directement dans le squelette et là, pas de souci :-)

      Malgré ces remontées, je trouve ce plugin fantastique, ça fait très longtemps que j’attends quelque chose comme ça, n’ayant pas moi-même les connaissances php/js pour le faire car je ne “maîtrise” que le html/css. Donc un grand merci et un grand bravo !

    • ça ne m’embête pas, c’est toujours intéressant de voir des cas différents d’intégration.

      Oui effectivement quand on affiche une liste d’article et que l’on utilise la balise INTRODUCTION les styles css sont retournée, seuls les balises <styles> sont supprimées et les css retournée en texte brut, c’est du au filtre supprimer_tag.

      N’utilisant pas non plus le modèle je n’avais pas remarqué, et je n’ai pas trouvé d’autres filtres dispo pour ce cas. Il faudrait certainement déplacer les css dans une feuille de style, pour le cas des modèles, ce serais plus propre.

      Pour le loop, et l’option boucle par contre en appelant le modèle directement dans un squelette, avec 3 items, j’ai bien le bon résultat le contenu html est bien cloné (img + caption).

      Si vous avez une url a fournir, pour voir ce que ça donne, dès fois que j’ai mal compris le soucis...

      Sinon un exemple de carousel infini ici sur le sommaire dans la section Écouter, commander les albums, les pochettes des produits défilent avec le texte en touch/drag.

      D’ailleurs au passage le player vidéo est fait avec owl aussi.

    • Bonjour Mist. GraphX, et désolée de revenir si tard !

      Alors pour le problème de taille / légende avec loop:true, c’était sans doute dû à un problème de cache mal vidé, car miracle, ça ne le fait plus sans que j’ai rien modifié !

      Je comprends, avec votre exemple en suivant le lien, que le total augmenté de la boucle ne pose pas de problème tel que c’est utilisé, mais c’est vrai que ça fait bizarre de voir 1/7 dans la mediabox quand on a que 3 images, ou 1/67 quand on en a 22…

      Pour finir, je crois que vous avez mal compris ce que j’ai essayé de rapporter : le css ne s’affiche pas lorsque qu’on appelle la galerie via le modèle dans le squelette, de la façon suivante :

      [(#MODELE{article_owl})]

      et c’est ce que je fais donc tout va bien ! Il s’affiche seulement quand on appelle la galerie via le raccourci <articlexx|owl> directement dans un article, comme c’est expliqué plus haut dans cette page… Ou alors c’est moi qui ai mal compris :-) ?

      Belle journée

    Reply to this message

  • 2

    Bonjour,
    le plugin fonctionne bien chez moi dans l’espace public mais dans l’espace privé je vois les images les unes en dessous des autres et le Javascript.
    y a t-il un moyen pour le voir correctement ?
    merci

    Reply to this message

  • 5

    Bonjour,

    Est-il possible d’utiliser Owl Carousel pour afficher des vignettes (comme dans objet-portfolio) en faisant varier le nombre d’items selon la taille de l’écran
    ou, pour le dire différemment, comment rendre ce défilement de vignettes responsive ?

    Et, j’aurais dû commencer par ça, merci pour cet excellent plugin !

    Reply to this message

  • 2

    Bonjour
    le plugin est super je l’ai installé sur un spip3.18
    mais j’aimerai ajouter un effet de transition “fade” car d’origine c’est un peu brutal/direct comme transition.

    j’ai essayé :

    <article2106|owl|docs=4140,4141,4867|dots=false|autoplay=true|animateOut=fade>

    mais ça marche pas ...

    Merci pour votre aide ;)

    Kiki

    • Bonjour Kiki,

      Ce paramètre n’était pas rajouté dans ce modèle, mais juste dans les squelettes situés dans le dossier noisettes/ du plugin.

      Je l’ai rajouté ce sera dispo dans le prochain paquet généré.

      Bonne journée.

    • ouahh merci !!!

    Reply to this message

  • 1
    Metaldark

    Bonjour,
    je souhaiterais insérer un carrousel qui affiche les images des 5 derniers articles et leur descriptifs rapides dans mon SPIP 3.2, mais étant débutant je n’arrive pas à trouver le code exact et où l’insérer.
    Pouvez-vous m’aider svp?
    Merci d’avance.

    • Le plus simple est de s’appuyer sur les codes présents sur a démo de owl carousel
      Par exemple, si tu veux reproduire l’exemple présent sur la page https://owlcarousel2.github.io/OwlCarousel2/demos/basic.html
      la boucle suivante devrait te donner le résultat attendu (en n’oubliant pas de mettre dans la page l’appel au javascript pour que le carousel se “mette en marche”)

      <B_carousel>
      <div class="owl-carousel owl-theme">
      <BOUCLE_carousel(ARTICLES){par date}{inverse}{0,5}>
          <div class="item">#TITRE</div> 
          <div class="item">#DESCRIPTIF</div> 
      </BOUCLE_carousel>
      </div>
      </B_carousel>

    Reply to this message

  • 1
    Renee Picard

    Je voudrais changer «prev» par un flèche en fontawesome
    Je ne trouve pas où est:
    <div class="owl-prev">prev</div>
    Merci

    • Bonjour,

      J’ai modifié les modèles, du plugin, afin que ce soit plus facile, mais en résumé :

      Dans les options de owl vous pouvez changer le text avec l’option navText

       navText : ['<span class="icon icon-precedent"></span>','<span class="icon icon-suivant"></span>'],

      les chaines de langue sont déjà dans lang/owlcarousel_fr.

      vous pouvez donc aussi depuis une surcharge de lang

      	// P
      	'prec'=>'<span class="icon icon-precedent"></span>',
      	'suiv'=>'<span class="icon icon-suivant"></span>'

      les styles css sont a adapter ensuite.

      et si on veut faire quelque chose d’accessible ce serait plutot

      '<span class="icon icon-precedent" aria-hidden="true"></span><span class="visuallyhidden">Précédent</span>'

    Reply to this message

  • 1

    Bonjour,
    encore moi. J’utilise oEmbed.
    Pourriez vous donner un exemple d’utilisation du modèle owlvideoplayer je m’emmêle avec la syntaxe objet pour avoir les videos d’une rubrique je met

    <owlvideoplayer|id_objet=106|objet=rubrique>

    et j’ai parametre d’inclusion incorrect env

    • Bonjour,

      effectivement il y’avais une coquille dans le modèle, au niveau de

      {navigation,#ENV{navigation}}

      c’est

      {navigation=#ENV{navigation}}

      je fais la correction merci du retour

    Reply to this message

Add a comment

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite / PostgreSQL
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparait.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Who are you?
[Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom