Owl Carousel 2

30 November 2017 – by chankalan, Mist. GraphX – 87 commentaires

1
2
3
4
5
13 Votes

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.

Table of contents

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)

updated on 2 October 2019

Discussion

5 ans 1 an 3 mois Sans limite
Last published
Filtrer

20 discussions

  • 4
    Paul

    Bonjour,
    j’ai un soucis avec le plugin depuis qq jours (je suis en spip 3.1.10, tous mes plugins sont à jour). Le pb était présent avant les mises à jour (spip et plugin)
    Qd il est activé, il y a un message d’erreur en front-office et le slider ne s’affiche pas mais affiche le code <article3033|owl|docs=6085,6086,6087,6088,6089>

    Erreur SQL 1054
Unknown column 'rang_lien' in 'order clause'
SELECT rand() AS hasard, documents.id_document, documents.titre, documents.descriptif, documents.fichier FROM spip_documents AS `documents` INNER JOIN spip_documents_liens AS L1 ON ( L1.id_document = documents.id_document ) WHERE (documents.statut = 'publie') AND (documents.mode IN ('image','document')) AND (documents.taille > 0 OR documents.distant='oui') AND (L1.id_objet = 3033) AND (L1.objet = 'article') AND (documents.id_document REGEXP '^(6085|6086|6087|6088|6089)$') AND (documents.extension REGEXP 'jpg|png|gif') GROUP BY documents.id_document ORDER BY rang_lien

    ca viendrait du fichier composer.php (ecrire), ligne 1005 et de la boucle : calculer_select() sql_select();
    mais je ne suis pas expert en mode debug ...

    Merci pour votre aide
    Paul

    • Mist. GraphX

      Bonjour Paul,

      Effectivement en spip 3.1 il est nécessaire d’installer le plugin ordoc pour pouvoir utiliser : ‘rang_lien’.

      Cet intégré depuis spip 3.2. Je vais tacher de modifier le paquet.xml du plugin pour necessiter ordoc en spip <3.2.

      Merci de votre retour.

    • Paul

      ça marche !
      merci pour votre aide et rapidité ;)

    • Christophe Noisette

      Bonjour
      je suis sous spip 3.2.4 et donc normalement mon spip conanit rang_lien mais après avoir intégrer le [(#MODELEarticle_owl)] dans la page d’accueil, j’ai une erreur

      Erreur SQL 1054
Unknown column 'rang_lien' in 'order clause'

      Si on pouvait m’aider... merci infiniment
      Belle journée
      Christophe

    • Christophe Noisette

      Désolé j’avais pas vu qu’il fallait donner le chemin d’un article. Donc ça marche. Par contre je trouve l’image un peu pixélisé sur le site lairederien.net. Je vais regarder cela de plus près.
      Et en attendant est-ce que quelqu’un sait comment faire pour éviter les mélanges de format vertical / horizontal?
      Merci
      Christophe

    Reply to this message

  • 4
    baloo

    juste un petit soucis : si une image est moins haute que la précédente ... il y a un très fin trait sur la gauche du slider visible sur la différence de hauteur

    Reply to this message

  • 2
    baloo

    Bonjour,
    Dans l’espace privé, si je suis au niveau de “modifier cet article”, je vois bien le slider
    si je clique sur modifier puis sur un des onglet de visualisation ( voir ou modif/voir) , j’ai le code javascript propre au modèle qui s’affiche et pas le slider.
    Est-ce normal ou est-ce un soucis sur mon site ?

    • chankalan

      Bonjour,
      c’est bien normal, le javascript n’est pas exécuté à cet endroit, c’est fait pour y vérifier les styles sur le texte. Pour voir la page telle que si elle était publiée, il faut passer par “prévisualiser”.

    • Mist. GraphX

      Bonjour,

      C’est due a une sécurité de spip qui désactive le javascript des modèles car ils sont considérés comme malveillants insérés depuis une saisie textarea.

      Ceci est principalement due au fait que l’édition des articles/objets spip peut aussi être publique et donc possiblement utilisable pour insérer des scripts malveillants.

      Si votre site n’utilise pas l’édition coté publique, il est possible d’assouplir cette rêgle, qui rend un peut inutile la prévisualisation en mode édition.

      Pour mieux comprendre https://www.spip.net/fr_article4642.html

      Je vais essayer de trouver le temps (demain ^^) de rédiger une petite note sur les options possibles, mais on ne peut pas l’intégrer au plugin en standard, pour les raisons précédentes.

    Reply to this message

  • 1
    physsa

    Bonjour.

    Petite “surprise” avec le modèle de base (super pratique, merci) : si on utilise la syntaxe docs=1,2,3 ... , pas de problème tant qu’on conserve le numéro de l’article (<articleX|owl|docs=...>, mais lorsqu’on supprime, ça déclenche une erreur de la bdd sur le tri par “rang_lien”, qui n’existe pas.

    Si je rajoute explicitement “tri=titre” , tout fonctionne. Pas grave donc, mais il serait peut-être judicieux de l’indiquer dans le mode d’emploi ?

    Merci pour ce super gadget.
    Alain

    • chankalan

      Ah oui bien vu ! S’il n’y a pas d’article on ne peut pas se baser sur rang_lien, forcément...
      J’ajoute ça dans la doc, merci !

    Reply to this message

  • 8
    Karen

    Re-bonjour, encore moi… je vais finir par être confuse !
    Donc tout fonctionne à merveille et comme je le souhaite maintenant… enfin presque :

    Lorsque j’ajoute une image et que je l’insère dans le texte d’un article, elle s’affiche en plus dans le carrousel dont j’appelle le modèle article_owl à la place du modèle document dans le porte-folio.

    Je pensais qu’avec la classe “mediabox” du modèle article_owl.html ça irait tout seul et qu’une image intégrée dans le texte ne s’afficherait pas dans le porte-folio, ou qu’il fallait absolument que l’image soit mise dans le porte-folio pour apparaître dans le carrousel appelé de cette façon (je l’écris en français maintenant ;p !)…

    J’ai bien essayé le critère doublons dans la boucle du modèle, mais je crois que je ne sais pas l’utiliser. Ou n’est-ce pas la bonne piste ?

    • chankalan

      Bonsoir,
      si on veut pas toutes les images de l’article dans le carrousel, alors il faut les passer explicitement au modèle avec le paramètre |docs=1,2,3,4

      Mais sinon pour la faute d’orthographe, c’est celle qui est dans le code que j’avais remarqué ... ;o)

    • Karen

      Bonsoir,

      Je crois que je me suis mal expliquée. Je parle d’un article normal, dans lequel on insère des images dans le texte, un article qui n’est pas censé avoir de carrousel puisqu’aucune de ces images n’est placée dans le porte-folio et je n’appelle pas de carrousel d’un autre article ici.

      En fait, je m’attendais à un comportement comme avec la Mediabox (qui fait que seules les images placées dans le porte-folio seront en galerie, via le modèle “documents”, et que si une image est déjà placée dans le texte, elle n’apparaît pas dans la galerie…)

      Or j’ai remplacé l’appel de ce modèle par celui de article_owl.html pour avoir les images en miniature sous forme de carrousel (5 images par 5 images) lorsqu’elles sont placées dans le porte-folio, et les agrandir via la Mediabox lorsqu’on clique sur une miniature.

      [(#REM) Gestion du portfolio et des documents ]
                                [(#MODELE{article_owl})]

      Mais je réalise qu’en fait il prend toutes les images ! Et donc mon problème à présent est que si j’insère une image dans le texte d’un article, via le raccourci <imgxx>, elle est insérée dans le texte, mais également placée dans un carrousel tout en bas, ce qui me pose évidemment problème. Je ne sais pas comment faire pour empêcher ça… En fait, si je pouvais le forcer à ne prendre que celles qui sont placées dans le porte-folio, je crois que ça résoudrait mon histoire, sauf que je ne sais pas faire ça :-(

    • Karen

      Je précise, aussi pour ceux que ça intéresserait, que pour obtenir le carrousel comme appel des miniatures, j’ai modifié le modèle article_owl.html de la façon suivante :

      <div id="#ENV{id-carousel,demo}" class="owl-carousel owl-theme">
            <BOUCLE_listDocs(DOCUMENTS){id_article?}{id_document==^((#ENV{docs}|replace{',',|}|sinon{.*}))$}{extension==jpg|png|gif}{par #ENV{tri, rang_lien}}>
            <div class="owl-slide"[ (#ENV{URLhashListener}|=={true}|oui)data-hash="#ENV{id-carousel,demo}#ID_DOCUMENT"]>
                    <a href="#FICHIER" class="mediabox"[ rel="diaporama(#ENV{id-carousel,demo})"][ title="(#TITRE|attribut_html|couper{80})"]>
                        <img [(#ENV{lazyLoad}|=={true}|oui)class="owl-lazy" data-]src="[(#FICHIER|image_passe_partout{200,200}|image_recadre{200,200}|extraire_attribut{src})]" alt="[(#TITRE|textebrut)]">
                    </a>
            </div>
            </BOUCLE_listDocs>
</div>
 
<script type="text/javascript">
jQuery(function($){
    $("[#(#ENV{id-carousel,demo})]").owlCarousel({
        loop:false,[
        items: (#ENV{items, 5}),][
        slideBy:(#ENV{slideBy}),][
        margin:(#ENV{margin, 10}),][
        dots:(#ENV{dots, true}),][
        nav:(#ENV{navigation, false}),][
        autoplay: (#ENV{autoplay}),][
        autoplayHoverPause: (#ENV{autoplayHoverPause}),][
        lazyLoad: (#ENV{lazyLoad}),][
        animateIn:'(#ENV{animateIn})',][
        animateOut:'(#ENV{animateOut})',][
        autoplayTimeout: (#ENV{autoplayTimeout}),][
        autoHeight: (#ENV{autoHeight}),][
        URLhashListener:(#ENV{URLhashListener}),
        startPosition: 'URLHash',]
        navText : ["<:owlcarousel:prec:>","<:owlcarousel:suiv:>"],
        responsive:{
            0:{
             items:3
            }[,
              640:{
               items:(#ENV{items, 5})
            }]
        }
    });
});
</script>
    • chankalan

      Ah oui mais si c’est dans un squelette ça change tout, parce qu’on connaît pas à l’avance les numéros des docs... donc là il faut retoucher le modèle ou alors en faire un autre pour qu’il exclue les images insérées dans le texte... c’est peut-être le critère {doublons} qu’il faut regarder de près : https://www.spip.net/fr_article4139.html

    • Karen

      C’est bien à ce critère que j’ai pensé, j’ai essayé de le placer un peu partout dans la boucle du modèle que j’ai posté précédemment (qui est le même que l’original, à la seule différence que j’appelle 5 images au lieu d’1 seule, et que j’ai supprimé les légendes sur les miniatures).

      Mais je n’ai pas réussi…

      J’ai essayé comme suit, et aussi à d’autres endroits de cette boucle, sans succès.

      <div id="#ENV{id-carousel,demo}" class="owl-carousel owl-theme">
            <BOUCLE_listDocs(DOCUMENTS){id_article?}{doublons}{id_document==^((#ENV{docs}|replace{',',|}|sinon{.*}))$}{extension==jpg|png|gif}{par #ENV{tri, rang_lien}}>
            <div class="owl-slide"[ (#ENV{URLhashListener}|=={true}|oui)data-hash="#ENV{id-carousel,demo}#ID_DOCUMENT"]>
                    <a href="#FICHIER" class="mediabox"[ rel="diaporama(#ENV{id-carousel,demo})"][ title="(#TITRE|attribut_html|couper{80})"]>
                        <img [(#ENV{lazyLoad}|=={true}|oui)class="owl-lazy" data-]src="[(#FICHIER|image_passe_partout{200,200}|image_recadre{200,200}|extraire_attribut{src})]" alt="[(#TITRE|textebrut)]">
                    </a>
            </div>
            </BOUCLE_listDocs>
    • chankalan

      Je pense que dans un modèle le critère doublons ne passe pas, il ne prend pas l’environnement, il faudrait coller le code directement dans la page, à la place d’inclure le modèle avec #MODELES ...

    • Karen

      Ah mince ! Ça veut dire coller l’intégralité du modèle dans article.html, javascript compris ?
      Bon, si c’est la seule solution et que ça fonctionne… je vais essayer :-)

    • Karen

      Ça fonctionne :-) !! Merci, mille merci Chankalan, je suis vraiment super contente !!!
      Vraiment, merci à vous tous, c’est tellement génial de ne pas être toute seule avec ça, et de tout votre travail et disponibilité !
      Bon, je vais tout de même externaliser le js pour faire plus propre… mais ça, je devais y arriver toute seule !

    Reply to this message

  • 3
    Karen

    Et me revoilà pour une dernière question, que je poste à part car le sujet est autre : l’ordre des images n’est pas pris en compte par le carousel (SPIP 3.2.3 donc on peut ordonner sans Mosaïque maintenant…)

    J’ai bien regardé tout le tuto avant de poster cette question (enfin je crois) et n’ai rien lu à ce sujet… Quelqu’un aurait une piste, ou est confronté au même souci ? J’ai le même problème sur 2 sites en développement avec ce plugin, et je ne l’utilisais pas du temps de Mosaïque.

    Et comme à chaque fois, j’aime bien dire un grand merci à la communauté SPIP et aux contributeurs pour ces plugins géniaux !

    • Mist. GraphX

      Bonjour Karen

      C’est corrigé dans la prochaine version , il ’y avait pas de critère d’ordre {par …} dans la boucle document.

      https://zone.spip.net/trac/spip-zone/changeset/114891/spip-zone

      On peut donc maintenant passer un critère tri au modèle en ajoutant |tri=titre par exemple.

      Par défaut j’ai opté pour rang_lien car c’est ce que j’utilise le plus souvent , a voir …

      Bonne journée

    • chankalan

      Merci Mist. GraphX !
      Pour la faute d’orthographe, mon dictionnaire français me dit “carrousel” mais en anglais “carousel” = ok, va pour l’anglicisme ;o)

    • Karen

      Merci beaucoup à vous deux, ça fonctionne nickel, c’est juste génial :-) !
      Ah, et oui, la faute… mais comme toutes les fonctions js des “carousels” le sont en anglais… et que le plugin se nomme ainsi, alors oui, ici j’ai adopté l’anglicisme, même si… ;p
      Belle journée, et encore un grand merci.

    Reply to this message

  • 4
    Karen

    Bonsoir,

    Je rencontre un petit blocage et je ne sais pas s’il est soluble… J’étais déjà venue il y a quelques temps ici pour tenter d’adapter la médiabox avec ce carousel car je l’utilise pour afficher les miniatures sur une seule ligne, 5 images par 5 images. Mist GraphX m’avait bien aidé pour ça.

    Mon souci aujourd’hui est que j’aimerais pouvoir appeler plusieurs galeries contenues dans plusieurs articles, dans certains articles, de la façon suivante :

    <articlexx1|owl>
<articlexx2|owl>
<articlexx3|owl>

    Or seul le premier appel est pris en compte…
    Je précise si besoin que j’appelle la mediabox pour toutes les images contenues dans le portfolio d’un article, pour chaque article qui contient réellement les images. Ensuite, dans d’autres articles, je comptais regrouper plusieurs galeries par l’appel comme indiqué ci-dessus.

    Y a-t-il une solution pour que tous soient pris en compte ? J’avais beaucoup d’espoir de structurer un site de la sorte, et là je ne m’attendais pas à ça… Je ne sais pas comment faire ça, ni même seulement si c’est possible !

    Cordialement,
    Karen

    • chankalan

      Bonsoir,
      il y a un critère qu’on peut ajouter pour identifier chaque carrousel différemment, de cette manière :

      <article1|owl|id-carousel=un>
<article2|owl|id-carousel=deux>
<article3|owl|id-carousel=trois>

      voir plus haut ↑

    • chankalan

      C’est vrai qu’il y a une faute d’orthographe qu’on pourrait corriger...

    • Karen

      Merci pour cette réponse rapide !

      Oups, j’étais passée à côté de cette syntaxe…

      Alors ça fonctionne, sauf qu’il se passe une chose étrange : j’appelle 4 carousels, sur 6 qui sont contenus dans 6 articles différents. Mais il m’en affiche un cinquième, complètement sorti de nulle part !
      Ce cinquième affiche des miniatures légèrement plus grandes que les autres, et contient 5 images du premier carousel, et une image du second carousel ??? Je n’y comprends rien, comment est-ce possible ?

      PS : je n’ai pas compris pour la faute d’orthographe ?

    • Karen

      J’ai trouvé !
      Alors j’aurai pu commencer par là ;p… Je viens de regarder le code, et les 4 premiers carousels sont contenus dans la div texte, puisqu’ils sont appelés dans le champs texte de l’article, et le carousel en prime est lui, inséré dans une div “demo” (comme les articles d’origine lorsque le carousel est affiché automatiquement parce qu’elles sont dans le portfolio).

      Et en fait c’est incompréhensible : ces 6 images étaient déposées dans le portfolio de l’article en question où j’appelle les 4 carousels… sauf que je ne les y ai jamais mises !! Mais bon, il est tard et c’est résolu :-)

      Merci beaucoup Chankalan ! (Et je ne pige pas cette histoire de faute, argh, je cherche et ça n’est pas l’heure !)

    Reply to this message

  • 6
    lussye

    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>
    • Mist. GraphX

      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 :

      1. <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.

    • lussye

      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;}
    • Mist. GraphX

      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

    • lussye

      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.

    • fulvio47

      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 !

    • lussye

      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
    Karen

    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

    • chankalan

      Bonsoir,
      la ligne 60 doit aussi avoir le nombre 5 pour changer au-delà de 640px... ?

    • Karen

      Merci, merci, merci… ça fonctionne :-) !!!
      Très bonne semaine

    • Karen

      Oups, message en doublon, petit bug au moment de l’édition…
      Bref, bonne journée !

    Reply to this message

  • 4
    Karen

    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>
    • Mist. GraphX

      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

      1. <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 …

    • Karen

      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 :-)

    • Mist. GraphX

      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

    • Karen

      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

Comment on this article

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