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 à l’intégration.
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

27 discussions

  • 2

    Bonjour,
    Je cherche à migrer mes sites en SPIP 4.1 (qui sont actuellement en 4.0 ou 3.2), et j’aimerais savoir s’il est prévu une compatibilité pour ce génial plugin ? D’ailleurs il me semble que SPIP 4.2 arrive très très bientôt (fin du mois ?)
    Un grand merci toujours, pour votre super travail collaboratif !

    Reply to this message

  • 1

    Bonjour,

    En attendant une version compatible avec SPIP 4.1 et peut-être 4.2, je viens d’installer Owl sur un 4.0. Je l’utilise depuis quelques années sur des SPIP 3 et j’avais bien réussi à obtenir ce que je voulais, à savoir l’utiliser pour un carrousel de miniatures qui appellent la médiabox.
    Il s’agit également de ne pas appeler les images déjà insérées ailleurs dans l’article.

    J’ai donc ce modèle qui fonctionne très bien lorsqu’il est appelé dans le squelette de la façon suivante [(#MODELEarticle_owl)] :

    [(#REM) <!-- Diaporama -->]
    <div id="#ENV{id-carousel,demo}" class="owl-carousel owl-theme">
                <BOUCLE_listDocs(DOCUMENTS){id_article?}{doublons}{vu=non}{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})]#CREDITS">
                            <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>

    Mon problème est que lorsque j’utilise le raccourci <article7|owl> pour l’appeler dans son propre article, n°7 dans l’exemple ici, de façon à le placer ailleurs dans le texte et pas tout en bas de l’article, ça fonctionne aussi… mais ça me met toutes les images en double (mais bien sans les doublons déjà présents dans le texte).
    J’ai 2 fois la boucle, avec un total de 10 images si j’en ai 5 non appelées dans l’article.

    Je précise que loop est bien en false.
    Comme je sais que la gestion des documents a changé en SPIP 4, et que je n’ai pas forcément bien tout cerné, je me demande si c’est lié à ça, ou à la syntaxe de ma boucle ?

    Toute aide sera la bienvenue :-)
    Et toujours un grand merci à tous les contributeurs/trices pour votre fabuleux travail.

    • Ah oui, j’ai oublié de préciser que mes miniatures ne sont pas doublées elles, via le carrousel, mais c’est dans l’agrandissement en mediabox que je me retrouve avec 2 fois l’ensemble des images à suivre, comme s’il y avait un loop=2…

    Reply to this message

  • 4

    Bonjour,

    je cherche désespérément à rendre l’affichage de mes diaporamas responsive et n’y parvient pas, vu qu’il est présenté comme l’étant, je dois mal paramétrer qq chose... une idée svp ?

    -  Voici le query de modeles/diaporama.html :

    jQuery(function($){
        $("[#(#ENV{id-carousel,demo})]").owlCarousel({
            loop:true,[
            items: (#ENV{items, 1}),][
            slideBy:(#ENV{slideBy}),][
            margin:(#ENV{margin}),][
            dots:(#ENV{dots, true}),][
            nav:(#ENV{navigation, true}),][
            autoplay: (#ENV{autoplay,true}),][
            autoplayHoverPause: (#ENV{autoplayHoverPause}),][
            lazyLoad: (#ENV{lazyLoad}),][
            animateIn:'(#ENV{animateIn})',][
            animateOut:'(#ENV{animateOut})',][
            autoplayTimeout: (#ENV{autoplayTimeout}),][
            autoHeight: (#ENV{autoHeight, true}),][
            URLhashListener:(#ENV{URLhashListener}),
            startPosition: 'URLHash',]
            navText : ["<:owlcarousel:prec:>","<:owlcarousel:suiv:>"],
                  responsive:{
                          0:{
                           items:1
                          }[,
                            640:{
                             items:(#ENV{items})
                          }]
                  }
        });
    });

    et en PJ la transformation non homothétique : non responsive.

    • Bonjour,
      à mon avis c’est un problème de css, peut-être un img { height: auto; } qui manque.
      Le paramètre “responsive” du script permet d’afficher un nombre de diapo différent suivant la largeur du diaporama, mais pas l’affichage correct des images qui devrait toujours être respecté.

    • Merci Chankalan pour ta réponse rapide, je vais checker de ce côté là.. mais à ce niveau d’intégration le C de CSS porte bien son nom ... ya du “!important;” dans l’air ;)

      ..Enfin l’essentiel étant, de ce que je comprends de ta réponse, que 1/ le plugin est bien responsive nativement (par ex. ne gère jamais de dim. en px) et 2/ que mes variables pour jQuery sont bien alimentées, tu confirmes ?

      Par ailleurs, voici le code Spip d’intégration du plugin pour le portfolio (toujours dans modeles/diaporama.html) cela te parait-il conforme à l’original ou un truc te saute-t-il aux yeux ?(c’est un site que je reprends je n’en suis pas le faiseur initial)

      [(#REM) <!-- Diaporama -->]
      <div id="#ENV{id-carousel,demo}" class="article_owl owl-carousel owl-theme[ spip_documents_(#ENV{align})]"[ style="max-width:(#ENV{largeur})px"]>
          <BOUCLE_listDocs(DOCUMENTS){id_article=#ENV{id}} {mode=document}{extension IN png,jpg,gif} {par num titre, date}{doublons}{vu=non}>
          <div class="owl-slide"[ (#ENV{URLhashListener}|=={true}|oui)data-hash="#ENV{id-carousel,demo}#ID_DOCUMENT"]>
              [(#ENV{caption,oui}|=={oui}|oui)
              <div class="caption[ (#ENV{caption_css})]">[
                  <h3 class="title">(#TITRE)</h3>][
                  <p class="hidden-phone">(#DESCRIPTIF|textebrut)</p>]</div>]
                  [(#REM)<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_reduire{#ENV{largeur,1150}}|extraire_attribut{src})]" alt="[(#TITRE|textebrut)]">
                  [(#REM)</a>]
          </div>
          </BOUCLE_listDocs>
      </div>

      .. Et enfin un grand bravo et un non moins grand merci pour cette contribution à la beauté de l’opensource :)

    • Je poursuis car je n’ai toujours pas résolu ce bug de responsive (ajouter un bout de CSS ne règle rien)

      En regardant l’inspecteur je vois que le script du plugin modifie dynamiquement l’attribut HEIGHT d’un container quand il charge la diapo suivante (image portfolio)

      <div class="owl-stage-outer owl-height" style="height: XXXpx;" 

      Et là est le problème !!
      ici le XXX sera remplacé par la hauteur de l’image vignette que SPIP a générée en fonction de la largeur de la mise en page du site (en pixels) et relativement à l’originale. Or quand vous réduisez la taille de l’écran évidemment que cette hauteur devient fausse puisqu’elle a changé ele ne doit pas être fixée en px alors que la largeur elle s’est bien adaptée. Conséquence l’image est étirée verticalement !!

      Comment corriger ça ?

    • Problème résolu si ça peut en aider voilà le hack :

      img {max-width:100%;height:auto;}

      à ajouter dans une CSS de haut niveau dans /css/

    Reply to this message

  • 4

    Bonjour,
    je tente de mettre en place un carrousel pour présenter une série de vidéos et je n’arrive pas à trouver la syntaxe à utiliser dans l’article pour que les vidéos s’affichent. Quelle est la balise à utiliser ? ?
    J’ai mis l’inclure Owl Video player dans mon article et seules les vignettes des documents joints à l’article s’affichent, mais leur lien ne renvoie à rien.
    s’il était possible à l’un de vous de m’aiguiller quant à la procédure à suivre, je lui en serai reconnaissant !
    J’ai parfaitement intégré un carrousel d’images et même débusquer un bug d’actualisation du carrousel en retour de l’affichage mediabox, mais pour la vidéo je ne trouve pas...
    Merci par avance,
    Laul

    • Bonjour,
      ce plugin ne s’occupe pas de vidéos, il ne fait tourner que des images dans la page en cours.
      Pour les vidéos (j’imagine que ce n’est pas pour faire un diaporama dans la page) il faut plutôt voir avec la mediabox de SPIP, celle de la v4 est celle-ci : https://sorgalla.com/lity/

    • Est-ce que vous pourriez décrire le bug et la solution trouvée ? Merci...

    • Bonjour Chankalan,,
      Le petit bug en question est le suivant :
      en affichant une image du carrousel dans la mediabox puis en faisant défiler
      les images dans la colorbox, après fermeture de la fenêtre de la colorbox, le carousel renvoyait ou à une absence d’image, ou deux images dont la moitié de chacune était visible dans le carousel, les images étaient à mi chemin dans la zone d’affichage.
      Après quelques recherches, j’ai trouvé ce post sur stack overflow :

      https://stackoverflow.com/questions/38196715/owl-carousel-and-colorbox-slide-action-issue

      Il y était suggéré de changer ce paramêtre du fichier JS colorbox : returnFocus: false.
      En conséquence, le défilement des images dans la colorbox n’a plus d’influence sur
      le carrousel à la fermeture de la colorbox.

      Pour le carrousel vidéo, il y a bien un modèle vidéo dans le plugin, mais il semble qu’il y ait à créer un détour par un le plugin séléctions éditoriales et oembed avec une boucle dédiée.
      Je vais essayé de voir.
      Sur la page du owlcarousel, il y a bien un démo avec des vidéos :

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

      Laul

    • Hello Laul

      Oui, il y’a bien une noisette avec carousel de vidéos, tu peut le voir en ligne ici https://duo-absinthe.com/. en bas de page ...

      Effectivement ça utilise une selection éditoriale, et oembed , je confirme ;-)

      Bonne journée

    Reply to this message

  • 7

    Bonjour,
    sous spip 3.2.11, le modele <article414|owl> n’affiche pas les images de l’article. Dans le modèle article_owl.html, la balise #FICHIER ne correspond pas à l’image concernée bien que #URL_DOCUMENT soit bien celle de l’image O_O
    J’ai désactivé les plugins Image_responsive, centrer_image, insertion_avancée_d_image sans plus de succès !!
    Quelqu’un peut me confirmer le fonctionnement prévu ??

    A titre de comparaison le plugin Cycle2 pour le meme article, le modèle <article414|cycle> fonctionne normalement

    • Bonjour,
      les deux plugins utilisent bien la même balise #FICHIER suivie d’un filtre |image_reduire... donc je doute que ce soit le soucis... un soucis de css peut-être ? Est-ce que les images sont présentes mais invisibles ?

    • Hi, merci...
      voilà le contenu de la page pour l’image, le href correspond bien à l’image (une parmi celles du carousel) mais la balise correspondant img donne une adresse ne correspondant pas du tout à l’image réduite, je vois le titre de l’image :( “Zone verte”

      <a href="IMG/jpg/sheet62.jpg" class="mediabox cboxElement hasbox" rel="diaporamademo" title="Zone verte">
                <img data-src="local/cache-vignettes/L200xH144/sheet62-5b851.jpg?1626128654" alt="Zone verte" style="max-width: 1280px; max-height: 10000px">
      </a>

      le script affiché par skeleditor est bien celui d’origine “plugins/auto/owlcarousel/v1.0.23/modeles/article_owl.html”

      sur la page https://3w.plandecuques.fr/le-marche-414 de test, j’ai un premier carousel avec sjcycle
      ensuite le carousel avec owl,
      puis le carousel slick (qui ne fonctionne pas non plus)
      et enfin les 4 images des carousel

    • Hello,

      J’ai jeté un œil sur ton source code, en fait les images ne sont pas chargé car il n’y a pas de scr dans les attributs html, mais un data-src, ce qui généralement est utilisé quand on fait du lazyloading.
      Donc soit il faut activer le lazyloading de owl, soit il faut utiliser le plugin lazysize, mais sans ça ça ne fonctionnera pas ....

      lazyLoad=true (false par défaut) : ne charge que les images visibles pour optimiser le chargement.

      et je ne peut en dire plus le git.spip est pas accessible ...

      Bonne journée

    • ok donc c’est revenu !!

      <img[(#ENV{lazyLoad}|=={true}|oui) class="owl-lazy" data-]src="[(#FICHIER|image_reduire{#ENV{largeur,650}}|extraire_attribut{src})]" alt="[(#TITRE|textebrut)]">

      ça devrait marcher mieux @lebardix ... si tu veux surcharger en attendant que quelqu’un-e commit la modif

      @++

    • merci mais je fais nawak ... je reprends dans 2 mn
      .....

    • Merci, mais ça ne va toujours pas
      donc dans mon modele squelettes/modeles/article_owl.html

      <img[(#ENV{lazyLoad}|=={true}|oui) class="owl-lazy" data-]src="[(#FICHIER|image_reduire{#ENV{largeur,650}}|extraire_attribut{src})]" alt="[(#TITRE|textebrut)]">

      au lieu de celui du plugin

      <img[(#ENV{lazyLoad}|=={true}|oui) class="owl-lazy"] data-src="[(#FICHIER|image_reduire{#ENV{largeur,650}}|extraire_attribut{src})]" alt="[(#TITRE|textebrut)]">

      toujours pas d’image /o\, je n’ai plus que les boutons ...

    • Si voilà il manquait un espace après img»
      donc dans mon modele squelettes/modeles/article_owl.html

      <img [(#ENV{lazyLoad}|=={true}|oui) class="owl-lazy" data-]src="[(#FICHIER|image_reduire{#ENV{largeur,650}}|extraire_attribut{src})]" alt="[(#TITRE|textebrut)]">
      au lieu de celui proposé
      <img[(#ENV{lazyLoad}|=={true}|oui) class="owl-lazy"] data-src="[(#FICHIER|image_reduire{#ENV{largeur,650}}|extraire_attribut{src})]" alt="[(#TITRE|textebrut)]">

      c’est correct merci à tous

    Reply to this message

  • 1

    Bonjour,
    est-il possible d’avoir un lien cliquable sur chaque image du slider ?
    Merci pour vos infos.
    Koala

    • Pas avec les modèles actuels livrés avec le plugin (à ma connaissance).

      C’est possible en s’inspirant/dupliquant une des modèles ou noisettes livrés dans le plugin et en rajoutant le lien.

      A noté que si vous utilisez Owl pour bénéficier de la gestion du swipe/touch sur mobile ajouter un lien sur l’image entière sera problématique.

    Reply to this message

  • bonjour ,
    en spip 3.2- et 3.3 j’ai un effet bizarre. SI je slide en glissé ou avec flèche j’ai des raies verticales sur certaines images qui s’accentuent si on slide plus vite. J’ai constaté qu’avec un effet sur image greyscale ou sepia cela ne se produit pas.
    c’est pas logique mais cela disparait en rajoutant le style suivant . avez vous une idée du pb ?

    .owl-carousel .owl-item  img{ 
            filter: sepia(0);
    }

    Reply to this message

  • 4

    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

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

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

    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

    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 ?

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

    • 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

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