SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

290 Plugins, 198 contribs sur SPIP-Zone, 105 visiteurs en ce moment

Accueil > Affichage multimédia > Galeries et diaporamas > Owl Carousel > Owl Carousel 2

Owl Carousel 2

30 novembre 2017 – par chankalan, Mist. GraphX – 38 commentaires

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

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

Voir en ligne : https://plugins.spip.net/owlcarousel

Dernière modification de cette page le 3 octobre 2018

Retour en haut de la page

Vos commentaires

  • Le 26 septembre à 12:00, par Karen En réponse à : Owl Carousel 2

    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.

    • Le 26 septembre à 12:24, par Karen En réponse à : Owl Carousel 2

      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…

    • Le 26 septembre à 14:05, par Karen En réponse à : Owl Carousel 2

      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 !!

    • Le 27 septembre à 08:37, par Mist. GraphX En réponse à : Owl Carousel 2

      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

    • Le 27 septembre à 13:15, par Karen En réponse à : Owl Carousel 2

      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.

    • Le 27 septembre à 17:41, par Mist. GraphX En réponse à : Owl Carousel 2

      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.

    • Le 27 septembre à 17:56, par Mist. GraphX En réponse à : Owl Carousel 2

      https://zone.spip.org/trac/spip-zone/changeset/111720/spip-zone

      Voila ce sera intégré dans le prochain paquet généré.

    • Le 27 septembre à 23:35, par Karen En réponse à : Owl Carousel 2

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

    • Le 28 septembre à 19:56, par Karen En réponse à : Owl Carousel 2

      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 !

    • Le 29 septembre à 09:46, par Mist. GraphX En réponse à : Owl Carousel 2

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

    • Le 2 octobre à 10:09, par Karen En réponse à : Owl Carousel 2

      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 :

      1. [(#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

    Répondre à ce message

  • Le 24 août à 19:41, par baloo En réponse à : Owl Carousel 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

    Répondre à ce message

  • Le 6 juillet à 11:30, par beno En réponse à : Owl Carousel 2

    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 !

    Répondre à ce message

  • Le 2 août à 18:31, par kiki En réponse à : Owl Carousel 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é :

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

    mais ça marche pas ...

    Merci pour votre aide ;)

    Kiki

    • Le 3 août à 09:35, par Mist. GraphX En réponse à : Owl Carousel 2

      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.

    • Le 3 août à 10:04, par kiki En réponse à : Owl Carousel 2

      ouahh merci !!!

    Répondre à ce message

  • Le 27 juillet à 21:20, par Metaldark En réponse à : Owl Carousel 2

    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 28 juillet à 07:27, par Manu En réponse à : Owl Carousel 2

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

      1. <B_carousel>
      2. <div class="owl-carousel owl-theme">
      3. <BOUCLE_carousel(ARTICLES){par date}{inverse}{0,5}>
      4.     <div class="item">#TITRE</div>
      5.     <div class="item">#DESCRIPTIF</div>
      6. </BOUCLE_carousel>
      7. </div>
      8. </B_carousel>

      Télécharger

    Répondre à ce message

  • Le 21 mai à 06:34, par Renee Picard En réponse à : Owl Carousel 2

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

    • Le 21 mai à 08:11, par Mist. GraphX En réponse à : Owl Carousel 2

      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

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

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

      Télécharger

      les styles css sont a adapter ensuite.

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

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

    Répondre à ce message

  • Le 26 février à 13:49, par baloo En réponse à : Owl Carousel 2

    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

    • Le 26 février à 14:19, par Mist. GraphX En réponse à : Owl Carousel 2

      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

    Répondre à ce message

  • Le 11 février à 19:00, par baloo En réponse à : Owl Carousel 2

    bonsoir,

    1- savez vous pourquoi le numéro de l’image en cours s’affiche dans l’adresse comme cela :
    https://paroissesaintjeandulez.cef.fr/#1363

    mieux si j’ai un deuxième slider dans la page d’id slider_carrousel ( en local pour l’instant)
    j’ai soit #slider_carrousel soit le numero de l’image du bandeau dans l’adresse
    j’ai du mettre queque chose en trop dans le js..

    2- est-ce qu’il existe un mode défilement vertical ?

    cela dit je trouve ce slider efficace

    • Le 11 février à 21:01, par Mist. GraphX En réponse à : Owl Carousel 2

      Bonsoir,
      C’est en fait le data-hash="" qui est dans le html. Ceci permet de piloter les items du carousel si vous utilisez des vignettes ou autres éléments.

      Et si il y’a plusieurs carousel a piloter le bon.

      Si vous n’utilisez pas de vignette le data-hash= peut être supprimé.

      Je vois que vous avez aussi des erreurs javascript sur flexslider et anything slider …

    • Le 11 février à 22:15, par chankalan En réponse à : Owl Carousel 2

      Bonsoir,
      si je me trompe pas, ça sert aussi à suivre le diaporama dans l’historique de navigation, et ça peut être souhaité.
      Bon, j’ai modifié le modèle article_owl.html pour qu’il prenne le paramètre URLhashListener=true pour activer ce mécanisme.

    • Le 12 février à 12:36, par baloo En réponse à : Owl Carousel 2

      merci beaucoup.
      Avez vous une idée pour le défilement vertical ?

    • Le 12 février à 13:14, par Mist. GraphX En réponse à : Owl Carousel 2

      Bonjour,

      ça à l’air envisageable, on me suggère sur IRC que le plugin SlickSlider prend en charge ce type d’option.

      Cela dit ce n’est pas compliqué a rajouter au plugin owl, via des animations css3 et les options

      animateOut
      animateIn

      je peut rajouter la prise en charge de ses deux options, ça pourra toujours être utile... et intégrer aux css les animation necessaires pour le vertical…

      https://owlcarousel2.github.io/OwlCarousel2/demos/animate.html

    Répondre à ce message

  • Le 7 février à 18:19, par baloo En réponse à : Owl Carousel 2

    bonsoir,
    merci pour ce magnifique plugin d’un slider que je ne connaissait pas.
    Pouvoir « glisser » sur un mobile pour changer d’image c’est super.

    Pour info il me semble qu’il y a des anciens paramètre dans les noisettes. par exemple
        navigationText : ["<:owlcarousel:prec:>","<:owlcarousel:suiv:>"],
    navigationText ne marche pas chez moi mais navText oui ( j’ai regarde dans la librairie javascript)

    • Le 7 février à 18:27, par Mist. GraphX En réponse à : Owl Carousel 2

      Bonsoir,

      merci pour le retour, effectivement ça a pus changé entre la version précédente de owl et celle actuelle.

      je corrige ça …

    Répondre à ce message

  • Le 16 janvier à 16:46, par Tyte En réponse à : Owl Carousel 2

    Bonsoir à tous, je viens de voir ce plugin mais j’arrive pas à le mettre en marche sur mon site.

    Quelqu’un peut-il me donner la démarche à suivre ???
    Merci

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?
  • [Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • GIS 4

    11 août 2012 – 1524 commentaires

    Présentation et nouveautés La version 4 de GIS abandonne la libraire Mapstraction au profit de Leaflet. Cette librairie permet de s’affranchir des librairies propriétaires tout en gardant les mêmes fonctionnalités, elle propose même de nouvelles (...)

  • ScolaSPIP 4

    19 janvier 2016 – 383 commentaires

    ScolaSPIP est plugin-squelette responsive personnalisable pour sites Web d’établissements scolaires basé sur SPIPr Présentation de ScolaSPIP Ce plugin pour SPIP 3 est développé par la Dane de l’académie de Versailles pour les webmestres de cette (...)

  • Jeux pour SPIP 3

    27 juillet 2012 – 53 commentaires

    Un portage pour SPIP 3 du plugin Jeux a été fait. Explications et nouveautés. Cet article concerne une mise à jour du plugin Jeux dont la description complète est disponible ici : Des jeux dans vos articles !. Le code du plugin Jeux est un code (...)

  • Plugin Vidéo(s)

    23 novembre 2010 – 704 commentaires

    Interface de gestion et modèle d’insertion des vidéos : Dailymotion Vimeo Youtube Modèle de la balise HTML5 video avec alternative flash html5media : Lecture HTML5/Flash pour tout navigateur des fichiers MP4/H264/Ogg/WebM/Mkv Support mobile, iPad, (...)

  • Vidéo Accessible

    6 avril 2011 – 168 commentaires

    Un plugin pour faciliter la diffusion de vidéos accessibles. Accessibilité des vidéos Accessibilité de la vidéo Afin d’être pleinement accessible, une vidéo (composée d’images et de sons) doit répondre à plusieurs critères. Le critère de base est (...)