Owl Carousel 2 - commentaires Owl Carousel 2 2019-08-15T12:16:39Z https://files.spip.org/Owl-Carousel-2#comment501985 2019-08-15T12:16:39Z <p>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. <br class="autobr" /> Et en attendant est-ce que quelqu'un sait comment faire pour éviter les mélanges de format vertical / horizontal? <br class="autobr" /> Merci<br class="autobr" /> Christophe</p> Owl Carousel 2 2019-08-15T11:37:50Z https://files.spip.org/Owl-Carousel-2#comment501983 2019-08-15T11:37:50Z <p>Bonjour<br class="autobr" /> je suis sous spip 3.2.4 et donc normalement mon spip conanit rang_lien mais après avoir intégrer le [(#MODELE<i>article_owl</i>)] dans la page d'accueil, j'ai une erreur</p> <div class="precode"><pre dir="ltr" style="text-align: left;"><code>Erreur SQL 1054 Unknown column 'rang_lien' in 'order clause' </code></pre></div> <p>Si on pouvait m'aider... merci infiniment<br class="autobr" /> Belle journée<br class="autobr" /> Christophe</p> Owl Carousel 2 2019-07-03T10:16:49Z https://files.spip.org/Owl-Carousel-2#comment501640 2019-07-03T10:16:49Z <p>apparemment ce n'est pas un p de css mais plutot de la position de l'image précédente</p> Owl Carousel 2 2019-07-03T10:11:04Z https://files.spip.org/Owl-Carousel-2#comment501639 2019-07-03T10:11:04Z <p>Alors oui, j'ai déjà vu ça, ça ne se produit qu'avec Firefox il me semble, et ce n'est pas dans toutes les largeurs du navigateur. Je n'ai pas encore trouvé le remède, si quelqu'un a une idée je suis aussi preneur...</p> Owl Carousel 2 2019-07-03T09:41:46Z https://files.spip.org/Owl-Carousel-2#comment501638 2019-07-03T09:41:46Z <p>je t'ai mis en ligne le site de test : <br class="autobr" /> exemple très visible sur <a href="http://test3.montpellier2.web-ecclesial.fr/spip.php?rubrique49" class="spip_url spip_out auto" rel="nofollow external">http://test3.montpellier2.web-ecclesial.fr/spip.php?rubrique49</a></p> <p>puis aussi sur <a href="http://test3.montpellier2.web-ecclesial.fr/spip.php?rubrique16" class="spip_url spip_out auto" rel="nofollow external">http://test3.montpellier2.web-ecclesial.fr/spip.php?rubrique16</a> ( on voit le trait a droite du titre par exemple )</p> Owl Carousel 2 2019-07-03T06:30:15Z https://files.spip.org/Owl-Carousel-2#comment501631 2019-07-03T06:30:15Z <p>Bonjour,<br class="autobr" /> j'ai déjà vu un très fin trait mais sans pouvoir reproduire ni comprendre ce qui le provoquait, je pensait que c'était dû au contexte d'affichage. Est-ce qu'on peut voir l'exemple en ligne ?</p> Owl Carousel 2 2019-07-03T06:07:31Z https://files.spip.org/Owl-Carousel-2#comment501630 2019-07-03T06:07:31Z <p>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</p> Owl Carousel 2 2019-06-26T12:23:58Z https://files.spip.org/Owl-Carousel-2#comment501589 2019-06-26T12:23:58Z <p>ça marche !<br class="autobr" /> merci pour votre aide et rapidité ;)</p> Owl Carousel 2 2019-06-26T10:43:46Z https://files.spip.org/Owl-Carousel-2#comment501587 2019-06-26T10:43:46Z <p>Bonjour Paul,</p> <p>Effectivement en spip 3.1 il est nécessaire d'installer le plugin <a href="https://plugins.spip.net/ordoc.html" class="spip_out" rel='nofollow external'>ordoc</a> pour pouvoir utiliser : ‘rang_lien'.</p> <p>Cet intégré depuis spip 3.2. Je vais tacher de modifier le paquet.xml du plugin pour necessiter ordoc en spip <3.2.</p> <p>Merci de votre retour.</p> Owl Carousel 2 2019-06-26T10:30:24Z https://files.spip.org/Owl-Carousel-2#comment501586 2019-06-26T10:30:24Z <p>Bonjour, <br class="autobr" /> 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)<br class="autobr" /> 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 <tt><article3033|owl|docs=6085,6086,6087,6088,6089></tt></p> <div class="precode"><pre dir="ltr" style="text-align: left;" class="php"><code>Erreur SQL <span class="nu0">1054</span> Unknown column <span class="st_h">'rang_lien'</span> in <span class="st_h">'order clause'</span> SELECT <a href="http://www.php.net/rand" rel='nofollow'><span class="kw3">rand</span></a><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="kw1">AS</span> hasard<span class="sy0">,</span> documents<span class="sy0">.</span>id_document<span class="sy0">,</span> documents<span class="sy0">.</span>titre<span class="sy0">,</span> documents<span class="sy0">.</span>descriptif<span class="sy0">,</span> documents<span class="sy0">.</span>fichier FROM spip_documents <span class="kw1">AS</span> `documents` INNER <a href="http://www.php.net/join" rel='nofollow'><span class="kw3">JOIN</span></a> spip_documents_liens <span class="kw1">AS</span> L1 ON <span class="br0">&#40;</span> L1<span class="sy0">.</span>id_document <span class="sy0">=</span> documents<span class="sy0">.</span>id_document <span class="br0">&#41;</span> WHERE <span class="br0">&#40;</span>documents<span class="sy0">.</span>statut <span class="sy0">=</span> <span class="st_h">'publie'</span><span class="br0">&#41;</span> AND <span class="br0">&#40;</span>documents<span class="sy0">.</span>mode IN <span class="br0">&#40;</span><span class="st_h">'image'</span><span class="sy0">,</span><span class="st_h">'document'</span><span class="br0">&#41;</span><span class="br0">&#41;</span> AND <span class="br0">&#40;</span>documents<span class="sy0">.</span>taille <span class="sy0">></span> <span class="nu0">0</span> OR documents<span class="sy0">.</span>distant<span class="sy0">=</span><span class="st_h">'oui'</span><span class="br0">&#41;</span> AND <span class="br0">&#40;</span>L1<span class="sy0">.</span>id_objet <span class="sy0">=</span> <span class="nu0">3033</span><span class="br0">&#41;</span> AND <span class="br0">&#40;</span>L1<span class="sy0">.</span>objet <span class="sy0">=</span> <span class="st_h">'article'</span><span class="br0">&#41;</span> AND <span class="br0">&#40;</span>documents<span class="sy0">.</span>id_document REGEXP <span class="st_h">'^(6085|6086|6087|6088|6089)$'</span><span class="br0">&#41;</span> AND <span class="br0">&#40;</span>documents<span class="sy0">.</span>extension REGEXP <span class="st_h">'jpg|png|gif'</span><span class="br0">&#41;</span> GROUP BY documents<span class="sy0">.</span>id_document ORDER BY rang_lien</code></pre></div> <p>ca viendrait du fichier composer.php (ecrire), ligne 1005 et de la boucle : calculer_select()<i> sql_select(); </i><br class="autobr" /> mais je ne suis pas expert en mode debug ...</p> <p>Merci pour votre aide<br class="autobr" /> Paul</p> Owl Carousel 2 2019-06-19T15:25:22Z https://files.spip.org/Owl-Carousel-2#comment501541 2019-06-19T15:25:22Z <p>Bonjour,</p> <p>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.</p> <p>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.</p> <p>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.</p> <p>Pour mieux comprendre <a href="https://www.spip.net/fr_article4642.html" class="spip_url spip_out auto" rel="nofollow external">https://www.spip.net/fr_article4642.html</a></p> <p>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.</p> Owl Carousel 2 2019-06-19T15:24:51Z https://files.spip.org/Owl-Carousel-2#comment501540 2019-06-19T15:24:51Z <p>Bonjour,<br class="autobr" /> 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”.</p> Owl Carousel 2 2019-06-19T15:11:03Z https://files.spip.org/Owl-Carousel-2#comment501538 2019-06-19T15:11:03Z <p>Bonjour,<br class="autobr" /> Dans l'espace privé, si je suis au niveau de “modifier cet article”, je vois bien le slider<br class="autobr" /> 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.<br class="autobr" /> Est-ce normal ou est-ce un soucis sur mon site ?</p> Owl Carousel 2 2019-05-06T14:45:20Z https://files.spip.org/Owl-Carousel-2#comment501119 2019-05-06T14:45:20Z <p>Ah oui bien vu ! S'il n'y a pas d'article on ne peut pas se baser sur rang_lien, forcément...<br class="autobr" /> J'ajoute ça dans la doc, merci !</p> Owl Carousel 2 2019-05-06T14:22:50Z https://files.spip.org/Owl-Carousel-2#comment501118 2019-05-06T14:22:50Z <p>Bonjour.</p> <p>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 (<tt><articleX|owl|docs=...></tt>, mais lorsqu'on supprime, ça déclenche une erreur de la bdd sur le tri par “rang_lien”, qui n'existe pas.</p> <p>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 ?</p> <p>Merci pour ce super gadget.<br class="autobr" /> Alain</p> Owl Carousel 2 2019-04-10T22:38:59Z https://files.spip.org/Owl-Carousel-2#comment500809 2019-04-10T22:38:59Z <p>Ça fonctionne :-) !! Merci, mille merci Chankalan, je suis vraiment super contente !!!<br class="autobr" /> Vraiment, merci à vous tous, c'est tellement génial de ne pas être toute seule avec ça, et de tout votre travail et disponibilité !<br class="autobr" /> Bon, je vais tout de même externaliser le js pour faire plus propre… mais ça, je devais y arriver toute seule !</p> Owl Carousel 2 2019-04-10T22:07:57Z https://files.spip.org/Owl-Carousel-2#comment500808 2019-04-10T22:07:57Z <p>Ah mince ! Ça veut dire coller l'intégralité du modèle dans article.html, javascript compris ? <br class="autobr" /> Bon, si c'est la seule solution et que ça fonctionne… je vais essayer :-)</p> Owl Carousel 2 2019-04-10T21:55:00Z https://files.spip.org/Owl-Carousel-2#comment500807 2019-04-10T21:55:00Z <p>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 ...</p> Owl Carousel 2 2019-04-10T21:47:52Z https://files.spip.org/Owl-Carousel-2#comment500806 2019-04-10T21:47:52Z <p>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).</p> <p>Mais je n'ai pas réussi…</p> <p>J'ai essayé comme suit, et aussi à d'autres endroits de cette boucle, sans succès.</p> <div class="precode"><pre dir="ltr" style="text-align: left;" class="spip"><code><div id="<span class="re1">#ENV</span><span class="re40">{id-carousel,demo}</span>" class="owl-carousel owl-theme"> <span class="re11"><BOUCLE_listDocs</span><span class="re12">(DOCUMENTS)</span><span class="re13"><span class="re41">{id_article?}</span><span class="re41">{doublons}</span><span class="re41">{id_document==^((<span class="re1">#ENV</span><span class="re40">{docs}</span><span class="re50">|replace</span><span class="re40">{',',|}</span><span class="re50">|sinon</span><span class="re40">{.*}</span>))$}</span><span class="re41">{extension==jpg<span class="re50">|png</span><span class="re50">|gif</span>}</span><span class="re41">{par <span class="re1">#ENV</span><span class="re40">{tri, rang_lien}</span>}</span></span><span class="re10">></span> <div class="owl-slide"<span class="re4">[</span> <span class="re4">(</span><span class="re1">#ENV</span><span class="re40">{URLhashListener}</span><span class="re50">|==</span><span class="re40">{true}</span><span class="re50">|oui</span><span class="re4">)</span>data-hash="<span class="re1">#ENV</span><span class="re40">{id-carousel,demo}</span><span class="re1">#ID_DOCUMENT</span>"<span class="re4">]</span>> <a href="<span class="re1">#FICHIER</span>" class="mediabox"<span class="re4">[</span> rel="diaporama<span class="re4">(</span><span class="re1">#ENV</span><span class="re40">{id-carousel,demo}</span><span class="re4">)</span>"<span class="re4">]</span><span class="re4">[</span> title="<span class="re4">(</span><span class="re1">#TITRE</span><span class="re50">|attribut_html</span><span class="re50">|couper</span><span class="re40">{80}</span><span class="re4">)</span>"<span class="re4">]</span>> <img <span class="re4">[</span><span class="re4">(</span><span class="re1">#ENV</span><span class="re40">{lazyLoad}</span><span class="re50">|==</span><span class="re40">{true}</span><span class="re50">|oui</span><span class="re4">)</span>class="owl-lazy" data-<span class="re4">]</span>src="<span class="re4">[</span><span class="re4">(</span><span class="re1">#FICHIER</span><span class="re50">|image_passe_partout</span><span class="re40">{200,200}</span><span class="re50">|image_recadre</span><span class="re40">{200,200}</span><span class="re50">|extraire_attribut</span><span class="re40">{src}</span><span class="re4">)</span><span class="re4">]</span>" alt="<span class="re4">[</span><span class="re4">(</span><span class="re1">#TITRE</span><span class="re50">|textebrut</span><span class="re4">)</span><span class="re4">]</span>"> </a> </div> <span class="re15"></BOUCLE_listDocs></span></code></pre></div> Owl Carousel 2 2019-04-10T21:25:45Z https://files.spip.org/Owl-Carousel-2#comment500805 2019-04-10T21:25:45Z <p>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 <code>{doublons}</code> qu'il faut regarder de près : <a href="https://www.spip.net/fr_article4139.html" class="spip_url spip_out auto" rel="nofollow external">https://www.spip.net/fr_article4139.html</a></p> Owl Carousel 2 2019-04-10T21:24:18Z https://files.spip.org/Owl-Carousel-2#comment500804 2019-04-10T21:24:18Z <p>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 :</p> <div class="precode"><pre dir="ltr" style="text-align: left;" class="spip"><code><div id="<span class="re1">#ENV</span><span class="re40">{id-carousel,demo}</span>" class="owl-carousel owl-theme"> <span class="re11"><BOUCLE_listDocs</span><span class="re12">(DOCUMENTS)</span><span class="re13"><span class="re41">{id_article?}</span><span class="re41">{id_document==^((<span class="re1">#ENV</span><span class="re40">{docs}</span><span class="re50">|replace</span><span class="re40">{',',|}</span><span class="re50">|sinon</span><span class="re40">{.*}</span>))$}</span><span class="re41">{extension==jpg<span class="re50">|png</span><span class="re50">|gif</span>}</span><span class="re41">{par <span class="re1">#ENV</span><span class="re40">{tri, rang_lien}</span>}</span></span><span class="re10">></span> <div class="owl-slide"<span class="re4">[</span> <span class="re4">(</span><span class="re1">#ENV</span><span class="re40">{URLhashListener}</span><span class="re50">|==</span><span class="re40">{true}</span><span class="re50">|oui</span><span class="re4">)</span>data-hash="<span class="re1">#ENV</span><span class="re40">{id-carousel,demo}</span><span class="re1">#ID_DOCUMENT</span>"<span class="re4">]</span>> <a href="<span class="re1">#FICHIER</span>" class="mediabox"<span class="re4">[</span> rel="diaporama<span class="re4">(</span><span class="re1">#ENV</span><span class="re40">{id-carousel,demo}</span><span class="re4">)</span>"<span class="re4">]</span><span class="re4">[</span> title="<span class="re4">(</span><span class="re1">#TITRE</span><span class="re50">|attribut_html</span><span class="re50">|couper</span><span class="re40">{80}</span><span class="re4">)</span>"<span class="re4">]</span>> <img <span class="re4">[</span><span class="re4">(</span><span class="re1">#ENV</span><span class="re40">{lazyLoad}</span><span class="re50">|==</span><span class="re40">{true}</span><span class="re50">|oui</span><span class="re4">)</span>class="owl-lazy" data-<span class="re4">]</span>src="<span class="re4">[</span><span class="re4">(</span><span class="re1">#FICHIER</span><span class="re50">|image_passe_partout</span><span class="re40">{200,200}</span><span class="re50">|image_recadre</span><span class="re40">{200,200}</span><span class="re50">|extraire_attribut</span><span class="re40">{src}</span><span class="re4">)</span><span class="re4">]</span>" alt="<span class="re4">[</span><span class="re4">(</span><span class="re1">#TITRE</span><span class="re50">|textebrut</span><span class="re4">)</span><span class="re4">]</span>"> </a> </div> <span class="re15"></BOUCLE_listDocs></span> </div> <script type="text/javascript"> jQuery(function($)<span class="re40">{ $("<span class="re4">[</span>#<span class="re4">(</span><span class="re1">#ENV</span>{id-carousel,demo}<span class="re4">)</span><span class="re4">]</span>").owlCarousel({ loop:false,<span class="re4">[</span> items: <span class="re4">(</span><span class="re1">#ENV</span>{items, 5}<span class="re4">)</span>,<span class="re4">]</span><span class="re4">[</span> slideBy:<span class="re4">(</span><span class="re1">#ENV</span>{slideBy}<span class="re4">)</span>,<span class="re4">]</span><span class="re4">[</span> margin:<span class="re4">(</span><span class="re1">#ENV</span>{margin, 10}<span class="re4">)</span>,<span class="re4">]</span><span class="re4">[</span> dots:<span class="re4">(</span><span class="re1">#ENV</span>{dots, true}<span class="re4">)</span>,<span class="re4">]</span><span class="re4">[</span> nav:<span class="re4">(</span><span class="re1">#ENV</span>{navigation, false}<span class="re4">)</span>,<span class="re4">]</span><span class="re4">[</span> autoplay: <span class="re4">(</span><span class="re1">#ENV</span>{autoplay}<span class="re4">)</span>,<span class="re4">]</span><span class="re4">[</span> autoplayHoverPause: <span class="re4">(</span><span class="re1">#ENV</span>{autoplayHoverPause}<span class="re4">)</span>,<span class="re4">]</span><span class="re4">[</span> lazyLoad: <span class="re4">(</span><span class="re1">#ENV</span>{lazyLoad}<span class="re4">)</span>,<span class="re4">]</span><span class="re4">[</span> animateIn:'<span class="re4">(</span><span class="re1">#ENV</span>{animateIn}<span class="re4">)</span>',<span class="re4">]</span><span class="re4">[</span> animateOut:'<span class="re4">(</span><span class="re1">#ENV</span>{animateOut}<span class="re4">)</span>',<span class="re4">]</span><span class="re4">[</span> autoplayTimeout: <span class="re4">(</span><span class="re1">#ENV</span>{autoplayTimeout}<span class="re4">)</span>,<span class="re4">]</span><span class="re4">[</span> autoHeight: <span class="re4">(</span><span class="re1">#ENV</span>{autoHeight}<span class="re4">)</span>,<span class="re4">]</span><span class="re4">[</span> URLhashListener:<span class="re4">(</span><span class="re1">#ENV</span>{URLhashListener}<span class="re4">)</span>, startPosition: 'URLHash',<span class="re4">]</span> navText : ["<span class="re30"><:owlcarousel:prec:>","<:owlcarousel:suiv:></span>"], responsive:{ 0:{ items:3 }<span class="re4">[</span>, 640:{ items:<span class="re4">(</span><span class="re1">#ENV</span>{items, 5}<span class="re4">)</span> }<span class="re4">]</span> } }); }</span>); </script></code></pre></div> Owl Carousel 2 2019-04-10T21:06:31Z https://files.spip.org/Owl-Carousel-2#comment500803 2019-04-10T21:06:31Z <p>Bonsoir,</p> <p>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.</p> <p>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…)</p> <p>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.</p> <div class="precode"><pre dir="ltr" style="text-align: left;"><code>[(#REM) Gestion du portfolio et des documents ] [(#MODELE{article_owl})]</code></pre></div> <p>Mais je réalise qu'en fait il prend <strong>toutes</strong> 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 <code><imgxx></code>, 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 :-(</p> Owl Carousel 2 2019-04-10T20:02:21Z https://files.spip.org/Owl-Carousel-2#comment500800 2019-04-10T20:02:21Z <p>Bonsoir,<br class="autobr" /> 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</p> <p>Mais sinon pour la faute d'orthographe, c'est celle qui est dans le code que j'avais remarqué ... ;o)</p> Owl Carousel 2 2019-04-10T15:23:08Z https://files.spip.org/Owl-Carousel-2#comment500785 2019-04-10T15:23:08Z <p>Re-bonjour, encore moi… je vais finir par être confuse !<br class="autobr" /> Donc tout fonctionne à merveille et comme je le souhaite maintenant… enfin presque :</p> <p>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.</p> <p>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 !)…</p> <p>J'ai bien essayé le critère <i>doublons</i> dans la boucle du modèle, mais je crois que je ne sais pas l'utiliser. Ou n'est-ce pas la bonne piste ?</p> Owl Carousel 2 2019-04-10T14:28:36Z https://files.spip.org/Owl-Carousel-2#comment500782 2019-04-10T14:28:36Z <p>Merci beaucoup à vous deux, ça fonctionne nickel, c'est juste génial :-) !<br class="autobr" /> 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 <br class="autobr" /> Belle journée, et encore un grand merci.</p> Owl Carousel 2 2019-04-10T11:01:02Z https://files.spip.org/Owl-Carousel-2#comment500777 2019-04-10T11:01:02Z <p>Merci Mist. GraphX !<br class="autobr" /> Pour la faute d'orthographe, mon dictionnaire français me dit “carrousel” mais en anglais “carousel” = ok, va pour l'anglicisme ;o)</p> Owl Carousel 2 2019-04-10T10:43:11Z https://files.spip.org/Owl-Carousel-2#comment500776 2019-04-10T10:43:11Z <p>Bonjour Karen</p> <p>C'est corrigé dans la prochaine version , il 'y avait pas de critère d'ordre <code>{par …} </code>dans la boucle document.</p> <p><a href="https://zone.spip.net/trac/spip-zone/changeset/114891/spip-zone" class="spip_url spip_out auto" rel="nofollow external">https://zone.spip.net/trac/spip-zone/changeset/114891/spip-zone</a></p> <p>On peut donc maintenant passer un critère tri au modèle en ajoutant <code>|tri=titre</code> par exemple.</p> <p>Par défaut j'ai opté pour rang_lien car c'est ce que j'utilise le plus souvent , a voir …</p> <p>Bonne journée</p> Owl Carousel 2 2019-04-09T23:35:56Z https://files.spip.org/Owl-Carousel-2#comment500769 2019-04-09T23:35:56Z <p>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…)</p> <p>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.</p> <p>Et comme à chaque fois, j'aime bien dire un grand merci à la communauté SPIP et aux contributeurs pour ces plugins géniaux !</p> Owl Carousel 2 2019-04-09T23:29:48Z https://files.spip.org/Owl-Carousel-2#comment500768 2019-04-09T23:29:48Z <p>J'ai trouvé ! <br class="autobr" /> 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).</p> <p>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 :-)</p> <p>Merci beaucoup Chankalan ! (Et je ne pige pas cette histoire de faute, argh, je cherche et ça n'est pas l'heure !)</p> Owl Carousel 2 2019-04-09T22:27:02Z https://files.spip.org/Owl-Carousel-2#comment500766 2019-04-09T22:27:02Z <p>Merci pour cette réponse rapide !</p> <p>Oups, j'étais passée à côté de cette syntaxe…</p> <p>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 !<br class="autobr" /> 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 ?</p> <p>PS : je n'ai pas compris pour la faute d'orthographe ?</p> Owl Carousel 2 2019-04-09T22:04:24Z https://files.spip.org/Owl-Carousel-2#comment500765 2019-04-09T22:04:24Z <p>C'est vrai qu'il y a une faute d'orthographe qu'on pourrait corriger...</p> Owl Carousel 2 2019-04-09T21:59:38Z https://files.spip.org/Owl-Carousel-2#comment500764 2019-04-09T21:59:38Z <p>Bonsoir,<br class="autobr" /> il y a un critère qu'on peut ajouter pour identifier chaque carrousel différemment, de cette manière :</p> <div class="precode"><pre dir="ltr" style="text-align: left;"><code><article1|owl|id-carousel=un> <article2|owl|id-carousel=deux> <article3|owl|id-carousel=trois></code></pre></div> <p>voir plus haut ↑</p> Owl Carousel 2 2019-04-09T21:44:41Z https://files.spip.org/Owl-Carousel-2#comment500763 2019-04-09T21:44:41Z <p>Bonsoir,</p> <p>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.</p> <p>Mon souci aujourd'hui est que j'aimerais pouvoir appeler plusieurs galeries contenues dans plusieurs articles, dans certains articles, de la façon suivante :</p> <div class="precode"><pre dir="ltr" style="text-align: left;"><code><articlexx1|owl> <articlexx2|owl> <articlexx3|owl></code></pre></div> <p>Or seul le premier appel est pris en compte… <br class="autobr" /> 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.</p> <p>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 !</p> <p>Cordialement,<br class="autobr" /> Karen</p> Owl Carousel 2 2019-04-01T10:51:24Z https://files.spip.org/Owl-Carousel-2#comment500651 2019-04-01T10:51:24Z <p>Bonjour,</p> <p>Après quelques nouveaux essais ça fonctionne comme je voulais ! =)</p> <p>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.</p> <p>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.<br class="autobr" /> En revanche, le responsive relève encore du bidouillage fin avec les positionnements absolute...</p> <div class="precode"><pre dir="ltr" style="text-align: left;" class="css"><code><span class="re0">#mon_monde</span> <span class="br0">&#123;</span><span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">relative</span><span class="sy0">;</span> <span class="kw1">top</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span><span class="br0">&#125;</span> <span class="re0">#mon_monde</span> <span class="re1">.cadre_titre</span> <span class="br0">&#123;</span><span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">absolute</span><span class="sy0">;</span> <span class="kw1">top</span><span class="sy0">:</span> <span class="re3">30vh</span><span class="sy0">;</span> <span class="kw1">left</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span> <span class="kw1">z-index</span><span class="sy0">:</span> <span class="nu0">1500</span><span class="sy0">;</span> <span class="kw1">min-width</span><span class="sy0">:</span> <span class="re3">300px</span><span class="sy0">;</span> <span class="kw1">width</span><span class="sy0">:</span> <span class="re3">43%</span><span class="sy0">;</span> <span class="kw1">min-height</span><span class="sy0">:</span> <span class="re3">100px</span><span class="sy0">;</span> <span class="kw1">height</span><span class="sy0">:</span> <span class="re3">100px</span><span class="sy0">;</span> <span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">1em</span> <span class="re3">2em</span><span class="sy0">;</span> <span class="kw1">margin</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="kw2">auto</span><span class="sy0">;</span> <span class="kw1">margin-left</span><span class="sy0">:</span> <span class="re3">45%</span><span class="sy0">;</span> <span class="kw1">text-align</span><span class="sy0">:</span> <span class="kw2">center</span><span class="sy0">;</span> <span class="kw1">color</span><span class="sy0">:</span> <span class="kw4">white</span><span class="sy0">;</span><span class="br0">&#125;</span> <span class="re0">#mon_monde</span> <span class="re1">.cadre_titre</span> h2 <span class="br0">&#123;</span><span class="kw1">font-variant</span><span class="sy0">:</span> <span class="kw2">small-caps</span><span class="sy0">;</span> <span class="kw1">font-size</span><span class="sy0">:</span> <span class="re3">2em</span><span class="sy0">;</span> <span class="kw1">z-index</span><span class="sy0">:</span> <span class="nu0">1700</span><span class="sy0">;</span><span class="br0">&#125;</span> <span class="re0">#mon_monde</span> <span class="re1">.rubrique</span> <span class="br0">&#123;</span><span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">relative</span><span class="sy0">;</span> <span class="kw1">top</span><span class="sy0">:</span> <span class="nu0">0</span> !important<span class="sy0">;</span> <span class="kw1">left</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span> <span class="kw1">padding</span><span class="sy0">:</span><span class="nu0">0</span><span class="sy0">;</span> <span class="kw1">margin</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span><span class="br0">&#125;</span> <span class="re0">#mon_monde</span> <span class="re1">.owl-carousel</span> <span class="br0">&#123;</span><span class="kw1">z-index</span><span class="sy0">:</span> <span class="nu0">1000</span><span class="sy0">;</span><span class="br0">&#125;</span> <span class="re0">#mon_monde</span> <span class="re1">.couv-photo</span> <span class="br0">&#123;</span><span class="kw1">width</span><span class="sy0">:</span> <span class="re3">100%</span><span class="sy0">;</span> <span class="kw1">height</span><span class="sy0">:</span> <span class="re3">100vh</span><span class="sy0">;</span> <span class="kw1">background</span><span class="sy0">:</span> <span class="kw2">no-repeat</span> <span class="re3">50%</span> <span class="re3">50%</span><span class="sy0">;</span> <span class="kw1">background-size</span><span class="sy0">:</span> cover<span class="sy0">;</span> <span class="kw1">background-clip</span><span class="sy0">:</span> <span class="kw2">border-box</span><span class="sy0">;</span> <span class="kw1">overflow</span><span class="sy0">:</span> <span class="kw2">hidden</span><span class="sy0">;</span> <span class="kw1">z-index</span><span class="sy0">:</span> <span class="nu0">1000</span><span class="sy0">;</span><span class="br0">&#125;</span> <span class="re0">#mon_monde</span> <span class="re1">.contenu-content</span> <span class="br0">&#123;</span><span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">absolute</span><span class="sy0">;</span> <span class="kw1">top</span><span class="sy0">:</span> <span class="re3">30vh</span><span class="sy0">;</span> <span class="kw1">left</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span> <span class="kw1">min-width</span><span class="sy0">:</span> <span class="re3">300px</span><span class="sy0">;</span> <span class="kw1">width</span><span class="sy0">:</span> <span class="re3">43%</span><span class="sy0">;</span> <span class="kw1">min-height</span><span class="sy0">:</span> <span class="re3">100px</span><span class="sy0">;</span> <span class="kw1">height</span><span class="sy0">:</span> <span class="re3">36vh</span><span class="sy0">;</span> <span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">1em</span> <span class="re3">2em</span><span class="sy0">;</span> <span class="kw1">margin</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="kw2">auto</span><span class="sy0">;</span> <span class="kw1">margin-left</span><span class="sy0">:</span> <span class="re3">45%</span><span class="sy0">;</span> <span class="kw1">text-align</span><span class="sy0">:</span> <span class="kw2">center</span><span class="sy0">;</span> <span class="kw1">background-color</span><span class="sy0">:</span> <span class="kw3">rgba</span><span class="br0">&#40;</span><span class="nu0">0</span><span class="sy0">,</span><span class="nu0">0</span><span class="sy0">,</span><span class="nu0">0</span><span class="sy0">,</span><span class="nu0">0.5</span><span class="br0">&#41;</span><span class="sy0">;</span> <span class="kw1">color</span><span class="sy0">:</span> <span class="kw4">white</span><span class="sy0">;</span><span class="br0">&#125;</span> <span class="re0">#mon_monde</span> a <span class="br0">&#123;</span><span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">absolute</span><span class="sy0">;</span> <span class="kw1">top</span><span class="sy0">:</span> <span class="re3">6vh</span><span class="sy0">;</span> <span class="kw1">left</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span> <span class="kw1">min-width</span><span class="sy0">:</span> <span class="re3">300px</span><span class="sy0">;</span> <span class="kw1">width</span><span class="sy0">:</span> <span class="re3">100%</span><span class="sy0">;</span> <span class="kw1">font-variant</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span> <span class="kw1">font-size</span><span class="sy0">:</span> <span class="re3">3.5em</span><span class="sy0">;</span> <span class="kw1">z-index</span><span class="sy0">:</span> <span class="nu0">2000</span> !important<span class="sy0">;</span> <span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">1.5em</span> <span class="re3">2em</span><span class="sy0">;</span> <span class="kw1">margin</span><span class="sy0">:</span> <span class="re3">1px</span> <span class="kw2">auto</span><span class="sy0">;</span> <span class="kw1">color</span><span class="sy0">:</span> <span class="kw4">white</span><span class="sy0">;</span> <span class="kw1">line-height</span><span class="sy0">:</span> <span class="re3">1em</span><span class="sy0">;</span> <span class="kw1">text-align</span><span class="sy0">:</span> <span class="kw2">center</span><span class="sy0">;</span> <span class="kw1">font-family</span><span class="sy0">:</span> @font2<span class="sy0">;</span> <span class="br0">&#125;</span> <span class="re0">#mon_monde</span> a<span class="re0">#series</span> <span class="br0">&#123;</span><span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">absolute</span><span class="sy0">;</span> <span class="kw1">top</span><span class="sy0">:</span> <span class="re3">49vh</span><span class="sy0">;</span> <span class="kw1">left</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span> <span class="kw1">margin-left</span><span class="sy0">:</span> <span class="re3">58%</span><span class="sy0">;</span> <span class="kw1">min-width</span><span class="sy0">:</span> <span class="re3">300px</span><span class="sy0">;</span> <span class="kw1">width</span><span class="sy0">:</span> <span class="re3">35vw</span><span class="sy0">;</span><span class="kw1">z-index</span><span class="sy0">:</span> <span class="nu0">1500</span> !important<span class="sy0">;</span> <span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">1em</span><span class="sy0">;</span><span class="br0">&#125;</span> <span class="re0">#mon_monde</span> <span class="re1">.owl-nav</span> <span class="br0">&#123;</span><span class="kw1">clear</span><span class="sy0">:</span> <span class="kw2">both</span><span class="sy0">;</span> <span class="kw1">width</span><span class="sy0">:</span> <span class="re3">100%</span><span class="sy0">;</span> <span class="kw1">height</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span> <span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">absolute</span><span class="sy0">;</span> <span class="kw1">top</span><span class="sy0">:</span> <span class="re3">48vh</span><span class="sy0">;</span><span class="kw1">margin-top</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span> <span class="br0">&#125;</span> <span class="re0">#mon_monde</span> <span class="re1">.owl-nav</span> button<span class="re1">.owl-prev</span> <span class="sy0">,</span> <span class="re1">.owl-nav</span> button<span class="re1">.owl-next</span> <span class="br0">&#123;</span><span class="kw1">max-width</span><span class="sy0">:</span> <span class="re3">150px</span><span class="sy0">;</span> <span class="kw1">height</span><span class="sy0">:</span> <span class="re3">50px</span><span class="sy0">;</span> <span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">2px</span> <span class="re3">2px</span> !important<span class="sy0">;</span> <span class="kw1">text-align</span><span class="sy0">:</span> <span class="kw2">center</span><span class="sy0">;</span> <span class="kw1">background-color</span><span class="sy0">:</span> <span class="kw3">rgba</span><span class="br0">&#40;</span><span class="nu0">0</span><span class="sy0">,</span><span class="nu0">0</span><span class="sy0">,</span><span class="nu0">0</span><span class="sy0">,</span><span class="nu0">0</span><span class="br0">&#41;</span><span class="sy0">;</span> <span class="kw1">color</span><span class="sy0">:</span> <span class="kw3">rgba</span><span class="br0">&#40;</span><span class="nu0">255</span><span class="sy0">,</span><span class="nu0">255</span><span class="sy0">,</span><span class="nu0">255</span><span class="sy0">,</span>.8<span class="br0">&#41;</span> !important<span class="sy0">;</span> <span class="kw1">font-size</span><span class="sy0">:</span> <span class="re3">45px</span> !important<span class="sy0">;</span> <span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">absolute</span><span class="sy0">;</span> <span class="kw1">top</span><span class="sy0">:</span> <span class="re3">45%</span><span class="sy0">;</span><span class="br0">&#125;</span> <span class="re0">#mon_monde</span> <span class="re1">.owl-nav</span> button<span class="re1">.owl-prev</span> <span class="br0">&#123;</span><span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">absolute</span><span class="sy0">;</span> <span class="kw1">left</span><span class="sy0">:</span> <span class="re3">5px</span><span class="sy0">;</span> <span class="kw1">font-size</span><span class="sy0">:</span> <span class="re3">45px</span> !important<span class="sy0">;</span><span class="br0">&#125;</span> <span class="re0">#mon_monde</span> <span class="re1">.owl-nav</span> button<span class="re1">.owl-next</span> <span class="br0">&#123;</span><span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">absolute</span><span class="sy0">;</span> <span class="kw1">right</span><span class="sy0">:</span> <span class="re3">0px</span><span class="sy0">;</span> <span class="kw1">font-size</span><span class="sy0">:</span> <span class="re3">45px</span> !important<span class="sy0">;</span><span class="br0">&#125;</span> <span class="re0">#mon_monde</span> <span class="re1">.owl-nav</span> button<span class="re1">.owl-prev</span><span class="sy0">:</span><span class="kw5">hover</span><span class="sy0">,</span> <span class="re1">.owl-nav</span> button<span class="re1">.owl-next</span><span class="sy0">:</span><span class="kw5">hover</span> <span class="br0">&#123;</span><span class="kw1">background-color</span><span class="sy0">:</span> <span class="kw3">rgba</span><span class="br0">&#40;</span><span class="nu0">0</span><span class="sy0">,</span><span class="nu0">0</span><span class="sy0">,</span><span class="nu0">0</span><span class="sy0">,</span><span class="nu0">0</span><span class="br0">&#41;</span> !important<span class="sy0">;</span><span class="kw1">color</span><span class="sy0">:</span> <span class="kw3">rgba</span><span class="br0">&#40;</span><span class="nu0">0</span><span class="sy0">,</span><span class="nu0">0</span><span class="sy0">,</span><span class="nu0">0</span><span class="sy0">,</span><span class="nu0">1</span><span class="br0">&#41;</span> !important<span class="sy0">;</span><span class="br0">&#125;</span></code></pre></div> <p>Merci pour votre aide précieuse et à bientôt !</p> Owl Carousel 2 2019-03-27T17:07:29Z https://files.spip.org/Owl-Carousel-2#comment500606 2019-03-27T17:07:29Z <p>J'apporte mon grain de sel ... peut être après la bataille ...<br class="autobr" /> 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 <code>{id_article=le id de l'article ci-dessus}</code> et dans la boucle juste la balise <code>[(#TEXTE)]</code> avec les crochets et parenthèses pour que spip recalcule l'appel au modèle.<br class="autobr" /> ENORME avantage, on peut changer les paramètres dans l'article sans modifier le code html du squelette :-))<br class="autobr" /> Enjoy !</p> Owl Carousel 2 2019-03-27T10:05:14Z https://files.spip.org/Owl-Carousel-2#comment500605 2019-03-27T10:05:14Z <p>Grand merci pour ces éclaircissements !</p> <p>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 ^_^<br class="autobr" /> Je vais me re-pencher sur la copie.</p> <p>Merci encore et bonne journée.</p> Owl Carousel 2 2019-03-27T08:22:07Z https://files.spip.org/Owl-Carousel-2#comment500604 2019-03-27T08:22:07Z <p>Bonjour ,</p> <p>Effectivement c'est bien un problème de css, en fait votre bloc owl_nav<br class="autobr" /> passe au dessus de votre lien, et comme vous lui donnez la hauteur de la page (100vh) il viens couvrir le bloc de contenu.</p> <p>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.</p> <p>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<small class="fine"> </small>% ou rem).</p> <p>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.</p> <p><a href="https://codepen.io/ingvi/pen/gaOzYe" class="spip_url spip_out auto" rel="nofollow external">https://codepen.io/ingvi/pen/gaOzYe</a></p> Owl Carousel 2 2019-03-26T19:00:32Z https://files.spip.org/Owl-Carousel-2#comment500602 2019-03-26T19:00:32Z <p>Merci pour cette réponse et sa rapidité !!</p> <p>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.<br class="autobr" /> 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 !).</p> <p>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...</p> <p>Bon, au cas où...</p> <div class="precode"><pre dir="ltr" style="text-align: left;" class="css"><code><span class="re0">#mon_monde</span> <span class="br0">&#123;</span><span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">relative</span><span class="sy0">;</span> <span class="kw1">top</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span><span class="br0">&#125;</span> <span class="re0">#mon_monde</span> <span class="re1">.fond_gris</span> <span class="br0">&#123;</span><span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">absolute</span><span class="sy0">;</span> <span class="kw1">top</span><span class="sy0">:</span> <span class="re3">30vh</span><span class="sy0">;</span> <span class="kw1">left</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span> <span class="kw1">z-index</span><span class="sy0">:</span> <span class="nu0">750</span><span class="sy0">;</span> <span class="kw1">min-width</span><span class="sy0">:</span> <span class="re3">300px</span><span class="sy0">;</span> <span class="kw1">width</span><span class="sy0">:</span> <span class="re3">43%</span><span class="sy0">;</span> <span class="kw1">min-height</span><span class="sy0">:</span> <span class="re3">100px</span><span class="sy0">;</span> <span class="kw1">height</span><span class="sy0">:</span> <span class="re3">35vh</span><span class="sy0">;</span> <span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">1em</span> <span class="re3">2em</span><span class="sy0">;</span> <span class="kw1">margin</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="kw2">auto</span><span class="sy0">;</span> <span class="kw1">margin-left</span><span class="sy0">:</span> <span class="re3">45%</span><span class="sy0">;</span> <span class="kw1">text-align</span><span class="sy0">:</span> <span class="kw2">center</span><span class="sy0">;</span> <span class="kw1">color</span><span class="sy0">:</span> <span class="kw4">white</span><span class="sy0">;</span><span class="br0">&#125;</span> <span class="re0">#mon_monde</span> <span class="re1">.fond_gris</span> h2 <span class="br0">&#123;</span><span class="kw1">font-variant</span><span class="sy0">:</span> <span class="kw2">small-caps</span><span class="sy0">;</span> <span class="kw1">font-size</span><span class="sy0">:</span> <span class="re3">2em</span><span class="sy0">;</span><span class="br0">&#125;</span> <span class="re0">#mon_monde</span> <span class="re1">.rubrique</span> <span class="br0">&#123;</span><span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">relative</span><span class="sy0">;</span> <span class="kw1">top</span><span class="sy0">:</span> <span class="nu0">0</span> !important<span class="sy0">;</span> <span class="kw1">left</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span> <span class="kw1">padding</span><span class="sy0">:</span><span class="nu0">0</span><span class="sy0">;</span> <span class="kw1">margin</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span><span class="br0">&#125;</span> <span class="re0">#mon_monde</span> <span class="re1">.couv-photo</span> <span class="br0">&#123;</span><span class="kw1">width</span><span class="sy0">:</span> <span class="re3">100%</span><span class="sy0">;</span> <span class="kw1">height</span><span class="sy0">:</span> <span class="re3">100vh</span><span class="sy0">;</span> <span class="kw1">background</span><span class="sy0">:</span> <span class="kw2">no-repeat</span> <span class="re3">50%</span> <span class="re3">50%</span><span class="sy0">;</span> <span class="kw1">background-size</span><span class="sy0">:</span> cover<span class="sy0">;</span> <span class="kw1">background-clip</span><span class="sy0">:</span> <span class="kw2">border-box</span><span class="sy0">;</span> <span class="kw1">overflow</span><span class="sy0">:</span> <span class="kw2">hidden</span><span class="sy0">;</span> <span class="kw1">z-index</span><span class="sy0">:</span> <span class="nu0">1000</span><span class="sy0">;</span><span class="br0">&#125;</span> <span class="re0">#mon_monde</span> <span class="re1">.contenu-content</span> <span class="br0">&#123;</span><span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">absolute</span><span class="sy0">;</span> <span class="kw1">top</span><span class="sy0">:</span> <span class="re3">30vh</span><span class="sy0">;</span> <span class="kw1">left</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span> <span class="kw1">min-width</span><span class="sy0">:</span> <span class="re3">300px</span><span class="sy0">;</span> <span class="kw1">width</span><span class="sy0">:</span> <span class="re3">43%</span><span class="sy0">;</span> <span class="kw1">min-height</span><span class="sy0">:</span> <span class="re3">100px</span><span class="sy0">;</span> <span class="kw1">height</span><span class="sy0">:</span> <span class="re3">35vh</span><span class="sy0">;</span> <span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">1em</span> <span class="re3">2em</span><span class="sy0">;</span> <span class="kw1">margin</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="kw2">auto</span><span class="sy0">;</span> <span class="kw1">margin-left</span><span class="sy0">:</span> <span class="re3">45%</span><span class="sy0">;</span> <span class="kw1">text-align</span><span class="sy0">:</span> <span class="kw2">center</span><span class="sy0">;</span> <span class="kw1">background-color</span><span class="sy0">:</span> <span class="kw3">rgba</span><span class="br0">&#40;</span><span class="nu0">0</span><span class="sy0">,</span><span class="nu0">0</span><span class="sy0">,</span><span class="nu0">0</span><span class="sy0">,</span><span class="nu0">0.5</span><span class="br0">&#41;</span><span class="sy0">;</span> <span class="kw1">color</span><span class="sy0">:</span> <span class="kw4">white</span><span class="sy0">;</span><span class="br0">&#125;</span> <span class="re0">#mon_monde</span> a <span class="br0">&#123;</span><span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">absolute</span><span class="sy0">;</span> <span class="kw1">top</span><span class="sy0">:</span> <span class="re3">5vh</span><span class="sy0">;</span> <span class="kw1">left</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span> <span class="kw1">min-width</span><span class="sy0">:</span> <span class="re3">300px</span><span class="sy0">;</span> <span class="kw1">width</span><span class="sy0">:</span> <span class="re3">100%</span><span class="sy0">;</span> <span class="kw1">font-variant</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span> <span class="kw1">font-size</span><span class="sy0">:</span> <span class="re3">3.5em</span><span class="sy0">;</span> <span class="kw1">z-index</span><span class="sy0">:</span> <span class="nu0">1500</span> !important<span class="sy0">;</span> <span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">1.5em</span> <span class="re3">2em</span><span class="sy0">;</span> <span class="kw1">margin</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="kw2">auto</span><span class="sy0">;</span> <span class="kw1">color</span><span class="sy0">:</span> <span class="kw4">white</span><span class="sy0">;</span> <span class="kw1">line-height</span><span class="sy0">:</span> <span class="re3">1em</span><span class="sy0">;</span> <span class="kw1">text-align</span><span class="sy0">:</span> <span class="kw2">center</span><span class="sy0">;</span> <span class="kw1">font-family</span><span class="sy0">:</span> @font2<span class="sy0">;</span> <span class="br0">&#125;</span> <span class="re0">#mon_monde</span> <span class="re1">.owl-nav</span> <span class="br0">&#123;</span><span class="kw1">clear</span><span class="sy0">:</span> <span class="kw2">both</span><span class="sy0">;</span> <span class="kw1">width</span><span class="sy0">:</span> <span class="re3">100%</span><span class="sy0">;</span> <span class="kw1">height</span><span class="sy0">:</span> <span class="re3">100vh</span><span class="sy0">;</span> <span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">absolute</span><span class="sy0">;</span> <span class="kw1">top</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span><span class="kw1">margin-top</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span><span class="br0">&#125;</span> <span class="re0">#mon_monde</span> <span class="re1">.owl-nav</span> button<span class="re1">.owl-prev</span> <span class="sy0">,</span> <span class="re1">.owl-nav</span> button<span class="re1">.owl-next</span> <span class="br0">&#123;</span><span class="kw1">max-width</span><span class="sy0">:</span> <span class="re3">150px</span><span class="sy0">;</span> <span class="kw1">height</span><span class="sy0">:</span> <span class="re3">200px</span><span class="sy0">;</span> <span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">2px</span> <span class="re3">2px</span> !important<span class="sy0">;</span> <span class="kw1">text-align</span><span class="sy0">:</span> <span class="kw2">center</span><span class="sy0">;</span> <span class="kw1">background-color</span><span class="sy0">:</span> <span class="kw3">rgba</span><span class="br0">&#40;</span><span class="nu0">0</span><span class="sy0">,</span><span class="nu0">0</span><span class="sy0">,</span><span class="nu0">0</span><span class="sy0">,</span><span class="nu0">0</span><span class="br0">&#41;</span><span class="sy0">;</span> <span class="kw1">color</span><span class="sy0">:</span> <span class="kw3">rgba</span><span class="br0">&#40;</span><span class="nu0">255</span><span class="sy0">,</span><span class="nu0">255</span><span class="sy0">,</span><span class="nu0">255</span><span class="sy0">,</span>.8<span class="br0">&#41;</span> !important<span class="sy0">;</span> <span class="kw1">font-size</span><span class="sy0">:</span> <span class="re3">29px</span> !important<span class="sy0">;</span> <span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">absolute</span><span class="sy0">;</span> <span class="kw1">top</span><span class="sy0">:</span> <span class="re3">45%</span><span class="sy0">;</span><span class="br0">&#125;</span> <span class="re0">#mon_monde</span> <span class="re1">.owl-nav</span> button<span class="re1">.owl-prev</span> <span class="br0">&#123;</span><span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">absolute</span><span class="sy0">;</span> <span class="kw1">left</span><span class="sy0">:</span> <span class="re3">5px</span><span class="sy0">;</span><span class="br0">&#125;</span> <span class="re0">#mon_monde</span> <span class="re1">.owl-nav</span> button<span class="re1">.owl-next</span> <span class="br0">&#123;</span><span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">absolute</span><span class="sy0">;</span> <span class="kw1">right</span><span class="sy0">:</span> <span class="re3">5px</span><span class="sy0">;</span><span class="br0">&#125;</span></code></pre></div> Owl Carousel 2 2019-03-26T17:21:10Z https://files.spip.org/Owl-Carousel-2#comment500601 2019-03-26T17:21:10Z <p>Bonjour,</p> <p>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. <br class="autobr" /> J'ai bien un lien sur la rubrique et un autre sur chacun des articles.</p> <p>Passez vous bien l'identifiant de la rubrique en paramètre de l'inclusion ainsi :</p> <div class="coloration_code cadre"><div class="spip_spip cadre"><div class="spip"><ol><li class="li1"><div class="de1"><span class="re21"><INCLURE<span class="re40">{fond=modeles/owl_modele_perso,id_rubrique=7,env,ajax}</span> /</span><span class="re23">></span></div></li> </ol></div></div></div> <p>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 <code>#SET </code>et <code>#GET</code> comme dans l'exemple ci-dessous. <a href="https://www.spip.net/fr_article3990.html" class="spip_out" rel='nofollow external'>Plus d'info sur SET et GET ici</a></p> <p>Vous pouvez rajouter des filtres a la suite de #FICHIER comme <code>image_recadre</code>, <code>image_reduire</code></p> <div class="precode"><pre dir="ltr" style="text-align: left;" class="spip"><code><style media="screen"> #mon_monde .owl-carousel .couv-photo<span class="re40">{ background-size: cover; height: 15rem; }</span> </style> <span class="re1">#SET</span><span class="re40">{container,<span class="re1">#ENV</span>{container}}</span> <span class="re11"><BOUCLE_kelRub</span><span class="re12">(RUBRIQUES)</span><span class="re13"><span class="re41">{id_rubrique=<span class="re1">#ENV</span><span class="re40">{id_rubrique}</span>}</span></span><span class="re10">></span> <span class="re1">#SET</span><span class="re40">{id_owl,<span class="re1">#ENV</span>{id-carousel,owl-rub-art-<span class="re1">#ID_RUBRIQUE</span>}}</span> <div class="<span class="re1">#GET</span><span class="re40">{container}</span>" id="mon_monde"> <div class="fond_gris"> <h2>Bienvenue dans mon monde...</h2> </div> <span class="re15"><B_listArticles></span> <a href="<span class="re1">#URL_RUBRIQUE</span>"><span class="re1">#TITRE</span></a> <div<span class="re4">[</span> id="<span class="re4">(</span><span class="re1">#GET</span><span class="re40">{id_owl}</span><span class="re4">)</span>" <span class="re4">]</span>class="rubrique owl-carousel owl-theme<span class="re4">[</span> <span class="re4">(</span><span class="re1">#ENV</span><span class="re40">{css}</span><span class="re50">|attribut_html</span><span class="re4">)</span><span class="re4">]</span>"> <span class="re11"><BOUCLE_listArticles</span><span class="re12">(ARTICLES)</span><span class="re13"><span class="re41">{id_rubrique}</span><span class="re41">{!par id_article}</span><span class="re41">{par <span class="re1">#ENV</span><span class="re40">{tri}</span>}</span></span><span class="re10">></span> <article class="contenu"> <span class="re11"><BOUCLE_couv_photo</span><span class="re12">(DOCUMENTS spip_documents_liens)</span><span class="re13"><span class="re41">{id_article}</span><span class="re41">{mode=document}</span><span class="re41">{extension==jpg<span class="re50">|png</span><span class="re50">|gif</span>}</span></span><span class="re10">></span> <span class="re1">#SET</span><span class="re40">{media, <span class="re1">#FICHIER</span> }</span> <span class="re15"></BOUCLE_couv_photo></span> <div class="couv-photo" style="background-image:url(<span class="re1">#GET</span><span class="re40">{media}</span>);"> <div class="contenu-content"> <a href="<span class="re1">#URL_ARTICLE</span>" class="btn"><span class="re1">#TITRE</span></a> </div> </div> </article> <span class="re15"></BOUCLE_listArticles></span> </div> <span class="re15"></B_listArticles></span> </div> <script> jQuery(function($)<span class="re40">{ $("<span class="re4">[</span>#<span class="re4">(</span><span class="re1">#ENV</span>{id-carousel,owl-rub-art-<span class="re1">#ID_RUBRIQUE</span>}<span class="re4">)</span><span class="re4">]</span>").owlCarousel({ loop:true,<span class="re4">[</span> items: <span class="re4">(</span><span class="re1">#ENV</span>{items, 1}<span class="re4">)</span>,<span class="re4">]</span><span class="re4">[</span> margin:<span class="re4">(</span><span class="re1">#ENV</span>{margin}<span class="re4">)</span>,<span class="re4">]</span><span class="re4">[</span> dots:<span class="re4">(</span><span class="re1">#ENV</span>{dots, false}<span class="re4">)</span>,<span class="re4">]</span><span class="re4">[</span> nav:<span class="re4">(</span><span class="re1">#ENV</span>{navigation, true}<span class="re4">)</span>,<span class="re4">]</span><span class="re4">[</span> autoplay: <span class="re4">(</span><span class="re1">#ENV</span>{autoplay, true}<span class="re4">)</span>,<span class="re4">]</span><span class="re4">[</span> autoplayHoverPause: <span class="re4">(</span><span class="re1">#ENV</span>{autoplayHoverPause, true}<span class="re4">)</span>,<span class="re4">]</span><span class="re4">[</span> lazyLoad: <span class="re4">(</span><span class="re1">#ENV</span>{lazyLoad}<span class="re4">)</span>,<span class="re4">]</span><span class="re4">[</span> animateIn:'<span class="re4">(</span><span class="re1">#ENV</span>{animateIn}<span class="re4">)</span>',<span class="re4">]</span><span class="re4">[</span> animateOut:'<span class="re4">(</span><span class="re1">#ENV</span>{animateOut}<span class="re4">)</span>',<span class="re4">]</span><span class="re4">[</span> autoplayTimeout: <span class="re4">(</span><span class="re1">#ENV</span>{autoplayTimeout}<span class="re4">)</span>,<span class="re4">]</span><span class="re4">[</span> autoHeight: <span class="re4">(</span><span class="re1">#ENV</span>{autoHeight}<span class="re4">)</span>,<span class="re4">]</span><span class="re4">[</span> URLhashListener:<span class="re4">(</span><span class="re1">#ENV</span>{URLhashListener}<span class="re4">)</span>, startPosition: 'URLHash',<span class="re4">]</span> navText : ['<span class="icon icon-chevron-thin-left" aria-hidden="true"></span><span class="icon visuallyhidden"><span class="re30"><:owlcarousel:prec:></span>','<span class="icon icon-chevron-thin-right" aria-hidden="true"></span><span class="icon visuallyhidden"><:owlcarousel:suiv:></span></span>'], responsive:{ 0:{ items:1 }<span class="re4">[</span>, 640:{ items:<span class="re4">(</span><span class="re1">#ENV</span>{items}<span class="re4">)</span> }<span class="re4">]</span> } }); }</span>); </script> <span class="re15"></BOUCLE_kelRub></span></code></pre></div> <p>Voila © chez moi ce modèle marche ^^, j'ai juste supprimé le paramètre mot_clef de la boucle pour le test.</p> <p>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 <a href="https://contrib.spip.net/Selections-editoriales" class="spip_out" rel='nofollow external'>selection éditoriales</a> pour gérer les contenus, que les mots-clefs.</p> Owl Carousel 2 2019-03-26T16:14:50Z https://files.spip.org/Owl-Carousel-2#comment500595 2019-03-26T16:14:50Z <p>Bonjour,</p> <p>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.<br class="autobr" /> 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 ?</p> <p>Votre aide me serait d'un grand secours, et désolée si jamais le code vous tire des larmes, je débute ^^</p> <div class="precode"><pre dir="ltr" style="text-align: left;" class="spip"><code><span class="re1">#SET</span><span class="re40">{container,<span class="re1">#ENV</span>{container,}}</span> <span class="re11"><BOUCLE_kelRub</span><span class="re12">(RUBRIQUES)</span><span class="re13"><span class="re41">{id_rubrique=<span class="re1">#ENV</span><span class="re40">{id_rubrique}</span>}</span></span><span class="re10">></span> <span class="re1">#SET</span><span class="re40">{id_owl,<span class="re1">#ENV</span>{id-carousel,owl-rub-art-<span class="re1">#ID_RUBRIQUE</span>}}</span> <div class="<span class="re1">#GET</span><span class="re40">{container}</span>" id="mon_monde"> <div class="fond_gris"> <h2>Bienvenue dans mon monde...</h2> </div> <span class="re15"><B_listArticles></span> <a href="<span class="re1">#URL_RUBRIQUE</span>"><span class="re1">#TITRE</span></a> <div<span class="re4">[</span> id="<span class="re4">(</span><span class="re1">#GET</span><span class="re40">{id_owl}</span><span class="re4">)</span>" <span class="re4">]</span>class="rubrique owl-carousel owl-theme<span class="re4">[</span> <span class="re4">(</span><span class="re1">#ENV</span><span class="re40">{css}</span><span class="re50">|attribut_html</span><span class="re4">)</span><span class="re4">]</span>"> <span class="re11"><BOUCLE_listArticles</span><span class="re12">(ARTICLES)</span><span class="re13"><span class="re41">{id_rubrique}</span><span class="re41">{!par id_article}</span><span class="re41">{par <span class="re1">#ENV</span><span class="re40">{tri}</span>}</span></span><span class="re10">></span> <article class="contenu"> <div class="couv-photo" style="background-image:url(<span class="re11"><BOUCLE_couv_photo</span><span class="re12">(DOCUMENTS spip_documents_liens)</span><span class="re13"><span class="re41">{mots_liens.id_mot=8}</span> <span class="re41">{id_article}</span><span class="re41">{mode=document}</span><span class="re41">{extension==jpg<span class="re50">|png</span><span class="re50">|gif</span>}</span></span><span class="re10">></span><span class="re1">#URL_DOCUMENT</span><span class="re15"></BOUCLE_couv_photo></span>);"> <div class="contenu-content"> <a href="<span class="re1">#URL_ARTICLE</span>" class="btn"><span class="re1">#TITRE</span></a> </div> </div> </article> <span class="re15"></BOUCLE_listArticles></span> </div> <span class="re15"></B_listArticles></span> </div> <script> jQuery(function($)<span class="re40">{ $("<span class="re4">[</span>#<span class="re4">(</span><span class="re1">#ENV</span>{id-carousel,owl-rub-art-<span class="re1">#ID_RUBRIQUE</span>}<span class="re4">)</span><span class="re4">]</span>").owlCarousel({ loop:true,<span class="re4">[</span> items: <span class="re4">(</span><span class="re1">#ENV</span>{items, 1}<span class="re4">)</span>,<span class="re4">]</span><span class="re4">[</span> margin:<span class="re4">(</span><span class="re1">#ENV</span>{margin}<span class="re4">)</span>,<span class="re4">]</span><span class="re4">[</span> dots:<span class="re4">(</span><span class="re1">#ENV</span>{dots, false}<span class="re4">)</span>,<span class="re4">]</span><span class="re4">[</span> nav:<span class="re4">(</span><span class="re1">#ENV</span>{navigation, true}<span class="re4">)</span>,<span class="re4">]</span><span class="re4">[</span> autoplay: <span class="re4">(</span><span class="re1">#ENV</span>{autoplay, true}<span class="re4">)</span>,<span class="re4">]</span><span class="re4">[</span> autoplayHoverPause: <span class="re4">(</span><span class="re1">#ENV</span>{autoplayHoverPause, true}<span class="re4">)</span>,<span class="re4">]</span><span class="re4">[</span> lazyLoad: <span class="re4">(</span><span class="re1">#ENV</span>{lazyLoad}<span class="re4">)</span>,<span class="re4">]</span><span class="re4">[</span> animateIn:'<span class="re4">(</span><span class="re1">#ENV</span>{animateIn}<span class="re4">)</span>',<span class="re4">]</span><span class="re4">[</span> animateOut:'<span class="re4">(</span><span class="re1">#ENV</span>{animateOut}<span class="re4">)</span>',<span class="re4">]</span><span class="re4">[</span> autoplayTimeout: <span class="re4">(</span><span class="re1">#ENV</span>{autoplayTimeout}<span class="re4">)</span>,<span class="re4">]</span><span class="re4">[</span> autoHeight: <span class="re4">(</span><span class="re1">#ENV</span>{autoHeight}<span class="re4">)</span>,<span class="re4">]</span><span class="re4">[</span> URLhashListener:<span class="re4">(</span><span class="re1">#ENV</span>{URLhashListener}<span class="re4">)</span>, startPosition: 'URLHash',<span class="re4">]</span> navText : ['<span class="icon icon-chevron-thin-left" aria-hidden="true"></span><span class="icon visuallyhidden"><span class="re30"><:owlcarousel:prec:></span>','<span class="icon icon-chevron-thin-right" aria-hidden="true"></span><span class="icon visuallyhidden"><:owlcarousel:suiv:></span></span>'], responsive:{ 0:{ items:1 }<span class="re4">[</span>, 640:{ items:<span class="re4">(</span><span class="re1">#ENV</span>{items}<span class="re4">)</span> }<span class="re4">]</span> } }); }</span>); </script> <span class="re15"></BOUCLE_kelRub></span></code></pre></div> Owl Carousel 2 2019-02-04T08:20:03Z https://files.spip.org/Owl-Carousel-2#comment499904 2019-02-04T08:20:03Z <p>Oups, message en doublon, petit bug au moment de l'édition… <br class="autobr" /> Bref, bonne journée !</p> Owl Carousel 2 2019-02-04T08:18:33Z https://files.spip.org/Owl-Carousel-2#comment499903 2019-02-04T08:18:33Z <p>Merci, merci, merci… ça fonctionne :-) !!!<br class="autobr" /> Très bonne semaine</p> Owl Carousel 2 2019-02-03T17:39:34Z https://files.spip.org/Owl-Carousel-2#comment499900 2019-02-03T17:39:34Z <p>Bonsoir,<br class="autobr" /> la ligne 60 doit aussi avoir le nombre 5 pour changer au-delà de 640px... ?</p> Owl Carousel 2 2019-02-02T19:33:44Z https://files.spip.org/Owl-Carousel-2#comment499892 2019-02-02T19:33:44Z <p>Bonsoir,<br class="autobr" /> Encore moi :-)<br class="autobr" /> 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 :-) ! <br class="autobr" /> 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. <br class="autobr" /> Qu'est-ce qui m'a échappé ici ?<br class="autobr" /> Bonne soirée</p> Owl Carousel 2 2018-12-10T15:39:18Z https://files.spip.org/Owl-Carousel-2#comment499068 2018-12-10T15:39:18Z <p>Bonjour,</p> <p>C'est noté, je creuserai ce plugin du coup pour d'autres usages…<br class="autobr" /> Merci encore pour le coup de main.</p> <p>Bonne semaine également</p> Owl Carousel 2 2018-12-10T07:11:24Z https://files.spip.org/Owl-Carousel-2#comment499060 2018-12-10T07:11:24Z <p>Bonjour,</p> <p>Pour la noisette selection_editoriales elle fonctionne avec le plugin homonyme :</p> <p><a href="https://contrib.spip.net/Selections-editoriales" class="spip_url spip_out auto" rel="nofollow external">https://contrib.spip.net/Selections-editoriales</a></p> <p>assez pratique pour gérer un sommaire</p> <p>(oui le js était dedans je devais pas être bien réveillé )</p> <p>Bonne semaine</p> Owl Carousel 2 2018-12-09T18:15:32Z https://files.spip.org/Owl-Carousel-2#comment499057 2018-12-09T18:15:32Z <p>Bonsoir Arnaud,</p> <p>Merci, ça fonctionne à merveille ainsi ! Et merci à nouveau pour votre réactivité :-)</p> <p>Le JS était bien dans la noisette, mais en dehors de la boucle… ça fait une différence ?</p> <p>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 !</p> <p>Encore un grand merci :-)</p> Owl Carousel 2 2018-12-09T16:22:30Z https://files.spip.org/Owl-Carousel-2#comment499056 2018-12-09T16:22:30Z <p>Bonjour,</p> <p>Ceci devrait mieux fonctionner,<br class="autobr" /> si on souhaite afficher les articles d'une rubrique sous forme de carousel</p> <p>par exemple pour une noisette/modele a inclure, nommé <br class="autobr" /> <code>owlcarousel-rubrique_articles</code></p> <div class="precode"><pre dir="ltr" style="text-align: left;" class="spip"><code><span class="re11"><BOUCLE_kelRub</span><span class="re12">(RUBRIQUES)</span><span class="re13"><span class="re41">{id_rubrique=<span class="re1">#ENV</span><span class="re40">{id_rubrique}</span>}</span></span><span class="re10">></span> <span class="re4">[</span><h2><span class="re4">(</span><span class="re1">#TITRE</span><span class="re4">)</span></h2><span class="re4">]</span> <span class="re15"><B_listArticles></span> <div<span class="re4">[</span> id="<span class="re4">(</span><span class="re1">#ENV</span><span class="re40">{id-carousel,owl-rub-art-<span class="re1">#ID_RUBRIQUE</span>}</span><span class="re4">)</span>" <span class="re4">]</span>class="rubrique owl-carousel owl-theme<span class="re4">[</span> <span class="re4">(</span><span class="re1">#ENV</span><span class="re40">{css}</span><span class="re50">|attribut_html</span><span class="re4">)</span><span class="re4">]</span>"> <span class="re11"><BOUCLE_listArticles</span><span class="re12">(ARTICLES)</span><span class="re13"><span class="re41">{id_rubrique}</span><span class="re41">{par <span class="re1">#ENV</span><span class="re40">{tri}</span>}</span></span><span class="re10">></span> <article class="contenu"> <span class="re4">[</span><div class="contenu-thumbnail"><span class="re4">(</span><span class="re1">#LOGO_ARTICLE</span><span class="re4">)</span></div><span class="re4">]</span> <div class="contenu-content"> <h2 class="title<span class="re4">[</span> <span class="re4">(</span><span class="re1">#EDIT</span><span class="re40">{titre}</span><span class="re4">)</span><span class="re4">]</span>"><span class="re4">[</span><span class="re4">(</span><span class="re1">#TITRE</span><span class="re4">)</span><span class="re4">]</span></h2> <span class="re4">[</span><div class="descriptif<span class="re4">[</span> <span class="re4">(</span><span class="re1">#EDIT</span><span class="re40">{descriptif}</span><span class="re4">)</span><span class="re4">]</span>"> <span class="re4">(</span><span class="re1">#DESCRIPTIF</span><span class="re4">)</span> </div><span class="re4">]</span> <a href="<span class="re1">#URL_ARTICLE</span>" class="btn"><span class="re1">#TITRE</span></a> </div> </article> <span class="re15"></BOUCLE_listArticles></span> </div> <span class="re15"></B_listArticles></span> <script> jQuery(function($)<span class="re40">{ $("<span class="re4">[</span>#<span class="re4">(</span><span class="re1">#ENV</span>{id-carousel,owl-rub-art-<span class="re1">#ID_RUBRIQUE</span>}<span class="re4">)</span><span class="re4">]</span>").owlCarousel({ <span class="re4">[</span>navigation : <span class="re4">(</span><span class="re1">#ENV</span>{navigation,true}<span class="re4">)</span>,<span class="re4">]</span> slideSpeed : 300, paginationSpeed : 400, items : 1<span class="re4">[</span>, autoplay :<span class="re4">(</span><span class="re1">#ENV</span>{autoplay,false}<span class="re4">)</span>,<span class="re4">]</span><span class="re4">[</span> autoplayHoverPause : <span class="re4">(</span><span class="re1">#ENV</span>{autoplayHoverPause,false}<span class="re4">)</span>,<span class="re4">]</span><span class="re4">[</span> lazyLoad : <span class="re4">(</span><span class="re1">#ENV</span>{lazyLoad,false}<span class="re4">)</span>,<span class="re4">]</span> navText : ["<span class="re30"><:owlcarousel:prec:>","<:owlcarousel:suiv:></span>"] }); }</span>); </script> <span class="re15"></BOUCLE_kelRub></span></code></pre></div> <p>a appeler dans un squelette ainsi</p> <div class="coloration_code cadre"><div class="spip_spip cadre"><div class="spip"><ol><li class="li1"><div class="de1"><span class="re21"><INCLURE<span class="re40">{fond=noisettes/owlcarousel-rubrique_articles,id_rubrique=7,env,ajax}</span> /</span><span class="re23">></span></div></li> </ol></div></div></div> <p>je corrige aussi la noisette à laquelle il manquait le js (a force de surcharger on passe à coté ^^)<br class="autobr" /> et j'ajouterais certainement celle ci …</p> Owl Carousel 2 2018-12-09T14:15:04Z https://files.spip.org/Owl-Carousel-2#comment499054 2018-12-09T14:15:04Z <p>Bonjour,</p> <p>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 : <br class="autobr" /> critère inconnu =<br class="autobr" /> sur la boucle _listSelection (de la ligne 29… 1ère ligne du code adapté comme ci-dessous).</p> <p>Aucun résultat ne s'affiche d'ailleurs… J'appelle la noisette de la façon suivante sur le sommaire :</p> <div class="precode"><pre dir="ltr" style="text-align: left;"><code><INCLURE{fond=noisettes/owlcarousel-selections_editoriales, objet=rubrique, id_objet=13, animateOut=fadeOut, env, ajax }/></code></pre></div> <p>Quelqu'un peut-il m'aider à trouver ce qui ne va pas ?</p> <div class="precode"><pre dir="ltr" style="text-align: left;" class="spip"><code><span class="re11"><BOUCLE_listSelections</span><span class="re12">(RUBRIQUES)</span><span class="re13"><span class="re41">{identifiant=<span class="re1">#GET</span><span class="re40">{identifiant}</span>}</span></span><span class="re10">></span> <span class="re15"><B_listContenus></span> <div class="rubrique js-cover-carousel owl-carousel owl-theme<span class="re4">[</span> <span class="re4">(</span><span class="re1">#CHAMP_SQL</span><span class="re40">{css}</span><span class="re50">|attribut_html</span><span class="re4">)</span><span class="re4">]</span>"> <span class="re11"><BOUCLE_listContenus</span><span class="re12">(ARTICLES)</span><span class="re13"><span class="re41">{id_rubrique}</span><span class="re41">{par <span class="re1">#GET</span><span class="re40">{tri}</span>}</span></span><span class="re10">></span> <article class="contenu<span class="re4">[</span> <span class="re4">(</span><span class="re1">#CHAMP_SQL</span><span class="re40">{css}</span><span class="re50">|attribut_html</span><span class="re4">)</span><span class="re4">]</span>"> <span class="re4">[</span><div class="contenu-thumbnail"><span class="re4">(</span><span class="re1">#LOGO_ARTICLES</span><span class="re4">)</span></div><span class="re4">]</span> <div class="contenu-content entry article hentry"> <div class="title entry-title"> <span class="re4">[</span><span class="re4">(</span><span class="re1">#GET</span><span class="re40">{link_title}</span><span class="re50">|==</span><span class="re40">{true}</span><span class="re50">|oui</span><span class="re4">)</span><a href="<span class="re1">#URL</span>"<span class="re4">]</span> <h2<span class="re4">[</span> class="<span class="re4">(</span><span class="re1">#EDIT</span><span class="re40">{titre}</span><span class="re4">)</span>"<span class="re4">]</span>><span class="re4">[</span><span class="re4">(</span><span class="re1">#TITRE</span><span class="re4">)</span><span class="re4">]</span></h2> <span class="re4">[</span><span class="re4">(</span><span class="re1">#GET</span><span class="re40">{link_title}</span><span class="re50">|==</span><span class="re40">{true}</span><span class="re50">|oui</span><span class="re4">)</span></a><span class="re4">]</span> </div> <span class="re4">[</span><div class="descriptif <span class="re4">[</span><span class="re4">(</span><span class="re1">#EDIT</span><span class="re40">{descriptif}</span><span class="re4">)</span> <span class="re4">]</span>entry-content"> <span class="re4">(</span><span class="re1">#DESCRIPTIF</span><span class="re4">)</span> </div><span class="re4">]</span><span class="re4">[</span><span class="re4">(</span><span class="re1">#GET</span><span class="re40">{link_title}</span><span class="re50">|!=</span><span class="re40">{true}</span><span class="re50">|oui</span><span class="re4">)</span> <a href="<span class="re1">#URL</span>" class="<span class="re1">#GET</span><span class="re40">{link_class, cover-link}</span>"> <span><span class="re1">#GET</span><span class="re40">{link_txt, voir : <span class="re1">#TITRE</span> }</span></span> </a><span class="re4">]</span> </div> </article> <span class="re15"></BOUCLE_listContenus></span> </div> <span class="re15"></B_listContenus></span> <span class="re15"></BOUCLE_listSelections></span> </code></pre></div> Owl Carousel 2 2018-10-02T08:09:47Z https://files.spip.org/Owl-Carousel-2#comment498353 2018-10-02T08:09:47Z <p>Bonjour Mist. GraphX, et désolée de revenir si tard !</p> <p>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é !</p> <p>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…</p> <p>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 :</p> <div class="coloration_code cadre"><div class="spip_spip cadre"><div class="spip"><ol><li class="li1"><div class="de1"><span class="re4">[</span><span class="re4">(</span><span class="re1">#MODELE</span><span class="re40">{article_owl}</span><span class="re4">)</span><span class="re4">]</span></div></li> </ol></div></div></div> <p>et c'est ce que je fais donc tout va bien ! Il s'affiche seulement quand on appelle la galerie via le raccourci <tt><articlexx|owl></tt> directement dans un article, comme c'est expliqué plus haut dans cette page… Ou alors c'est moi qui ai mal compris :-) ?</p> <p>Belle journée</p> Owl Carousel 2 2018-09-29T07:46:16Z https://files.spip.org/Owl-Carousel-2#comment498311 2018-09-29T07:46:16Z <p>ça ne m'embête pas, c'est toujours intéressant de voir des cas différents d'intégration.</p> <p>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 <code><styles></code> sont supprimées et les css retournée en texte brut, c'est du au filtre supprimer_tag.</p> <p>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.</p> <p>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).</p> <p>Si vous avez une url a fournir, pour voir ce que ça donne, dès fois que j'ai mal compris le soucis...</p> <p>Sinon un exemple de <a href="https://duo-absinthe.com" class="spip_out" rel='nofollow external'>carousel infini ici</a> sur le sommaire dans la section Écouter, commander les albums, les pochettes des produits défilent avec le texte en touch/drag.</p> <p>D'ailleurs au passage le player vidéo est fait avec owl aussi.</p> Owl Carousel 2 2018-09-28T17:56:28Z https://files.spip.org/Owl-Carousel-2#comment498308 2018-09-28T17:56:28Z <p>J'ai enfin eu le temps de tester ce soir… Merci ! C'est magique :-) !</p> <p>… 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.</p> <p>D'ailleurs, sur cette boucle, la 7 et la 1 sont les mêmes ??<br class="autobr" /> Ç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 :-)</p> <p>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 :<br class="autobr" /> #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 ; (...)</p> <p>… Enfin seulement quand on appelle la galerie avec le raccourci SPIP <tt><articlexx|owl></tt>, ce qui n'est pas mon cas, car j'appelle le modèle directement dans le squelette et là, pas de souci :-)</p> <p>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 !</p> Owl Carousel 2 2018-09-27T21:35:47Z https://files.spip.org/Owl-Carousel-2#comment498276 2018-09-27T21:35:47Z <p>Mille mercis Mist. GraphX ! Je n'ai pas eu le temps de tester, mais dès que possible, et je ferai un meilleur retour… :-)</p> Owl Carousel 2 2018-09-27T15:56:15Z https://files.spip.org/Owl-Carousel-2#comment498273 2018-09-27T15:56:15Z <p><a href="https://zone.spip.org/trac/spip-zone/changeset/111720/spip-zone" class="spip_url spip_out auto" rel="nofollow external">https://zone.spip.org/trac/spip-zone/changeset/111720/spip-zone</a></p> <p>Voila ce sera intégré dans le prochain paquet généré.</p> Owl Carousel 2 2018-09-27T15:41:29Z https://files.spip.org/Owl-Carousel-2#comment498272 2018-09-27T15:41:29Z <p>Dans les modèles du plugin on appel colorbox par la class <code>js-colorbox</code> (voir le js du modèle).</p> <p>pour rétablir le comportement de spip il faut remplacer par la class <code>mediabox</code> et d'ajouter l'attribut title sur le lien, ce qui affiche bien le titre du document ensuite quand on ouvre la popup.</p> <p>Ceci résout le problème des images aussi et utilisant les paramètres définis dans la configuration de spip.</p> <p>Je reporte ça sur les modèles du plugin, merci du signalement.</p> Owl Carousel 2 2018-09-27T11:15:36Z https://files.spip.org/Owl-Carousel-2#comment498268 2018-09-27T11:15:36Z <p>Bonjour, et merci pour cette réponse rapide !</p> <p>Ok pour la boucle, même si ça paraît bizarre ces totaux qui ne correspondent pas à la réalité :-)</p> <p>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.</p> <p>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.</p> <p>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 ?</p> <p>D'avance merci pour votre aide.</p> Owl Carousel 2 2018-09-27T06:37:12Z https://files.spip.org/Owl-Carousel-2#comment498265 2018-09-27T06:37:12Z <p>Bonjour,</p> <p>Effectivement l'option loop de owl carousel permet de simuler un défilement infini et recopiant les slides avant et après.</p> <p>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 : <a href="https://github.com/jackmoore/colorbox/issues/158" class="spip_url spip_out auto" rel="nofollow external">https://github.com/jackmoore/colorbox/issues/158</a></p> Owl Carousel 2 2018-09-26T12:05:57Z https://files.spip.org/Owl-Carousel-2#comment498258 2018-09-26T12:05:57Z <p>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 :-)</p> <p>Je ne trouve toujours pas comment conserver la légende dans la colorbox…</p> <p>…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.</p> <p>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 !)</p> <p>J'avais oublié de préciser : SPIP 3.2.0 !!</p> Owl Carousel 2 2018-09-26T10:24:13Z https://files.spip.org/Owl-Carousel-2#comment498256 2018-09-26T10:24:13Z <p>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…</p> Owl Carousel 2 2018-09-26T10:00:29Z https://files.spip.org/Owl-Carousel-2#comment498254 2018-09-26T10:00:29Z <p>Bonjour,</p> <p>D'abord un grand merci pour ce plugin que je découvre et qui a l'air génial !</p> <p>Je rencontre cependant 2 problèmes que je ne parviens pas à régler :</p> <p>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 ?</p> <p>2/ La légende disparaît dans l'image agrandie dansla Mediabox…???</p> <p>D'avance merci pour votre aide.</p> Owl Carousel 2 2018-08-25T08:54:15Z https://files.spip.org/Owl-Carousel-2#comment497984 2018-08-25T08:54:15Z <p>Le cache de l'espace privé est dans local/cache/css et local/cache/js pour info</p> Owl Carousel 2 2018-08-25T05:46:26Z https://files.spip.org/Owl-Carousel-2#comment497979 2018-08-25T05:46:26Z <p>Bonjour,</p> <p>J'ai publié une version ajoutant une configuration supplémentaire pour inssérer les styles et js dans l'espace privé.</p> <p>ce sera la v 1.0.13</p> <p><a href="https://zone.spip.org/trac/spip-zone/changeset/111429/spip-zone" class="spip_url spip_out auto" rel="nofollow external">https://zone.spip.org/trac/spip-zone/changeset/111429/spip-zone</a></p> <p>Bonne journée.</p> Owl Carousel 2 2018-08-24T17:41:17Z https://files.spip.org/Owl-Carousel-2#comment497976 2018-08-24T17:41:17Z <p>Bonjour,<br class="autobr" /> 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.<br class="autobr" /> y a t-il un moyen pour le voir correctement ?<br class="autobr" /> merci</p> Owl Carousel 2 2018-08-23T10:21:05Z https://files.spip.org/Owl-Carousel-2#comment497955 2018-08-23T10:21:05Z <p>Je ne connais pas le fichier inclure/logos.html, mais sur le fichier modeles/article_owl.html oui avec la syntaxe appropriée : <a href="https://programmer.spip.net/MODELE" class="spip_url spip_out auto" rel="nofollow external">https://programmer.spip.net/MODELE</a></p> Owl Carousel 2 2018-08-23T10:12:33Z https://files.spip.org/Owl-Carousel-2#comment497954 2018-08-23T10:12:33Z <p>J'ai essayé, mais ça reste en “.owl-nav.disabled” donc no affiché.<br class="autobr" /> Mais d'ailleurs, peut-on passer le paramètre dans le squelette ?</p> <div class="coloration_code cadre"><div class="spip_spip cadre"><div class="spip"><ol><li class="li1"><div class="de1"><span class="re21"><INCLURE<span class="re40">{fond=inclure/logos, items=6, navigation=true, lang}</span>/</span><span class="re23">></span> </div></li> </ol></div></div></div> Owl Carousel 2 2018-08-23T09:53:55Z https://files.spip.org/Owl-Carousel-2#comment497953 2018-08-23T09:53:55Z <p>Bonjour, de rien, et les paramètres proposent navigation=true ...<br class="autobr" /> <a href="https://contrib.spip.net/Owl-Carousel-2#parametres" class="spip_url spip_out auto" rel="nofollow external">https://contrib.spip.net/Owl-Carousel-2#parametres</a></p> Owl Carousel 2 2018-08-23T09:18:58Z https://files.spip.org/Owl-Carousel-2#comment497952 2018-08-23T09:18:58Z <p>Bonjour Chankalan et merci !</p> <p>C'est Tip top, comme sur des roulettes. <br class="autobr" /> Sauf le nav:true qui ne fonctionne pas quoiqu'on fasse. Comment faire pour faire apparaître des flèches pour prévenir (sur les desktop) que c'est un bandeau scrollable ?</p> Owl Carousel 2 2018-08-03T08:04:10Z https://files.spip.org/Owl-Carousel-2#comment497840 2018-08-03T08:04:10Z <p>ouahh merci !!!</p> Owl Carousel 2 2018-08-03T07:35:21Z https://files.spip.org/Owl-Carousel-2#comment497839 2018-08-03T07:35:21Z <p>Bonjour Kiki,</p> <p>Ce paramètre n'était pas rajouté dans ce modèle, mais juste dans les squelettes situés dans le dossier noisettes/ du plugin.</p> <p>Je l'ai rajouté ce sera dispo dans le prochain paquet généré.</p> <p>Bonne journée.</p> Owl Carousel 2 2018-08-02T16:31:59Z https://files.spip.org/Owl-Carousel-2#comment497821 2018-08-02T16:31:59Z <p>Bonjour<br class="autobr" /> le plugin est super je l'ai installé sur un spip3.18<br class="autobr" /> mais j'aimerai ajouter un effet de transition “fade” car d'origine c'est un peu brutal/direct comme transition.</p> <p>j'ai essayé :</p> <div class="coloration_code cadre"><div class="spip_spip cadre"><div class="spip"><ol><li class="li1"><div class="de1"><article2106<span class="re50">|owl</span><span class="re50">|docs=4140</span>,4141,4867<span class="re50">|dots=false</span><span class="re50">|autoplay=true</span><span class="re50">|animateOut=fade</span>></div></li> </ol></div></div></div> <p>mais ça marche pas ...</p> <p>Merci pour votre aide ;)</p> <p>Kiki</p> Owl Carousel 2 2018-07-28T05:27:58Z https://files.spip.org/Owl-Carousel-2#comment497789 2018-07-28T05:27:58Z <p>Le plus simple est de s'appuyer sur les codes présents sur a démo de owl carousel<br class="autobr" /> Par exemple, si tu veux reproduire l'exemple présent sur la page <a href="https://owlcarousel2.github.io/OwlCarousel2/demos/basic.html" class="spip_url spip_out auto" rel="nofollow external">https://owlcarousel2.github.io/OwlCarousel2/demos/basic.html</a><br class="autobr" /> 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”)</p> <div class="precode"><pre dir="ltr" style="text-align: left;" class="spip"><code><span class="re15"><B_carousel></span> <div class="owl-carousel owl-theme"> <span class="re11"><BOUCLE_carousel</span><span class="re12">(ARTICLES)</span><span class="re13"><span class="re41">{par date}</span><span class="re41">{inverse}</span><span class="re41">{0,5}</span></span><span class="re10">></span> <div class="item"><span class="re1">#TITRE</span></div> <div class="item"><span class="re1">#DESCRIPTIF</span></div> <span class="re15"></BOUCLE_carousel></span> </div> <span class="re15"></B_carousel></span></code></pre></div> Owl Carousel 2 2018-07-27T19:20:03Z https://files.spip.org/Owl-Carousel-2#comment497788 2018-07-27T19:20:03Z <p>Bonjour,<br class="autobr" /> 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.<br class="autobr" /> Pouvez-vous m'aider svp?<br class="autobr" /> Merci d'avance.</p> Owl Carousel 2 2018-07-06T10:26:36Z https://files.spip.org/Owl-Carousel-2#comment497643 2018-07-06T10:26:36Z <p>Bonjour,<br class="autobr" /> oui, en utilisant le paramètre items dans le modèle article_owl.html<br class="autobr" /> <code><article1|owl|items=4></code><br class="autobr" /> on aura déjà 4 vignettes en même temps au-dessus de 640px de large, et en-dessous il n'y en aura qu'une seule.<br class="autobr" /> <a href="https://zone.spip.org/trac/spip-zone/browser/spip-zone/_plugins_/owlcarousel/trunk/modeles/article_owl.html#L70" class="spip_url spip_out auto" rel="nofollow external">https://zone.spip.org/trac/spip-zone/browser/spip-zone/_plugins_/owlcarousel/trunk/modeles/article_owl.html#L70</a></p> <p>Pour affiner il faut prendre exemple et se faire un modèle perso... ?</p> Owl Carousel 2 2018-07-06T09:30:59Z https://files.spip.org/Owl-Carousel-2#comment497640 2018-07-06T09:30:59Z <p>Bonjour,</p> <p>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<br class="autobr" /> ou, pour le dire différemment, comment rendre ce défilement de vignettes responsive ?</p> <p>Et, j'aurais dû commencer par ça, merci pour cet excellent plugin !</p> Owl Carousel 2 2018-05-21T06:11:04Z https://files.spip.org/Owl-Carousel-2#comment497022 2018-05-21T06:11:04Z <p>Bonjour,</p> <p>J'ai modifié les modèles, du plugin, afin que ce soit plus facile, mais en résumé :</p> <p>Dans les options de owl vous pouvez changer le text avec l'option <code>navText</code></p> <div class="coloration_code cadre"><div class="spip_spip cadre"><div class="spip"><ol><li class="li1"><div class="de1"> navText : ['<span class="icon icon-precedent"></span>','<span class="icon icon-suivant"></span>'],</div></li> </ol></div></div></div> <p>les chaines de langue sont déjà dans lang/owlcarousel_fr.</p> <p>vous pouvez donc aussi depuis une surcharge de lang</p> <div class="precode"><pre dir="ltr" style="text-align: left;" class="php"><code> <span class="co1">// P</span> <span class="st_h">'prec'</span><span class="sy0">=></span><span class="st_h">'<span class="icon icon-precedent"></span>'</span><span class="sy0">,</span> <span class="st_h">'suiv'</span><span class="sy0">=></span><span class="st_h">'<span class="icon icon-suivant"></span>'</span></code></pre></div> <p>les styles css sont a adapter ensuite.</p> <p>et si on veut faire quelque chose d'accessible ce serait plutot</p> <div class="coloration_code cadre"><div class="spip_spip cadre"><div class="spip"><ol><li class="li1"><div class="de1">'<span class="icon icon-precedent" aria-hidden="true"></span><span class="visuallyhidden">Précédent</span>'</div></li> </ol></div></div></div> Owl Carousel 2 2018-05-21T04:34:59Z https://files.spip.org/Owl-Carousel-2#comment497021 2018-05-21T04:34:59Z <p>Je voudrais changer «prev» par un flèche en fontawesome<br class="autobr" /> Je ne trouve pas où est:<br class="autobr" /> <code><div class="owl-prev">prev</div></code><br class="autobr" /> Merci</p> Owl Carousel 2 2018-02-26T13:19:39Z https://files.spip.org/Owl-Carousel-2#comment496049 2018-02-26T13:19:39Z <p>Bonjour,</p> <p>effectivement il y'avais une coquille dans le modèle, au niveau de</p> <div class="precode"><pre dir="ltr" style="text-align: left;"><code>{navigation,#ENV{navigation}}</code></pre></div> <p>c'est</p> <div class="precode"><pre dir="ltr" style="text-align: left;"><code>{navigation=#ENV{navigation}}</code></pre></div> <p>je fais la correction merci du retour</p> Owl Carousel 2 2018-02-26T12:49:02Z https://files.spip.org/Owl-Carousel-2#comment496048 2018-02-26T12:49:02Z <p>Bonjour,<br class="autobr" /> encore moi. J'utilise oEmbed.<br class="autobr" /> 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</p> <div class="precode"><pre dir="ltr" style="text-align: left;"><code><owlvideoplayer|id_objet=106|objet=rubrique></code></pre></div> <p>et j'ai parametre d'inclusion incorrect env</p> Owl Carousel 2 2018-02-12T12:14:34Z https://files.spip.org/Owl-Carousel-2#comment495847 2018-02-12T12:14:34Z <p>Bonjour,</p> <p>ça à l'air envisageable, on me suggère sur IRC que le plugin SlickSlider prend en charge ce type d'option.</p> <p>Cela dit ce n'est pas compliqué a rajouter au plugin owl, via des animations css3 et les options</p> <div class="precode"><pre dir="ltr" style="text-align: left;"><code>animateOut animateIn</code></pre></div> <p>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…</p> <p><a href="https://owlcarousel2.github.io/OwlCarousel2/demos/animate.html" class="spip_url spip_out auto" rel="nofollow external">https://owlcarousel2.github.io/OwlCarousel2/demos/animate.html</a></p> Owl Carousel 2 2018-02-12T11:36:59Z https://files.spip.org/Owl-Carousel-2#comment495846 2018-02-12T11:36:59Z <p>merci beaucoup.<br class="autobr" /> Avez vous une idée pour le défilement vertical ?</p> Owl Carousel 2 2018-02-11T21:15:07Z https://files.spip.org/Owl-Carousel-2#comment495845 2018-02-11T21:15:07Z <p>Bonsoir,<br class="autobr" /> si je me trompe pas, ça sert aussi à suivre le diaporama dans l'historique de navigation, et ça peut être souhaité.<br class="autobr" /> Bon, j'ai modifié le modèle article_owl.html pour qu'il prenne le paramètre URLhashListener=true pour activer ce mécanisme.</p> Owl Carousel 2 2018-02-11T20:01:57Z https://files.spip.org/Owl-Carousel-2#comment495844 2018-02-11T20:01:57Z <p>Bonsoir,<br class="autobr" /> C'est en fait le <code>data-hash=""</code> qui est dans le html. Ceci permet de piloter les items du carousel si vous utilisez des vignettes ou autres éléments.</p> <p>Et si il y'a plusieurs carousel a piloter le bon.</p> <p>Si vous n'utilisez pas de vignette le <code>data-hash=</code> peut être supprimé.</p> <p>Je vois que vous avez aussi des erreurs javascript sur flexslider et anything slider …</p> Owl Carousel 2 2018-02-11T18:00:02Z https://files.spip.org/Owl-Carousel-2#comment495843 2018-02-11T18:00:02Z <p>bonsoir,</p> <p>1- savez vous pourquoi le numéro de l'image en cours s'affiche dans l'adresse comme cela : <br class="autobr" /> <a href="https://paroissesaintjeandulez.cef.fr/#1363" class="spip_url spip_out auto" rel="nofollow external">https://paroissesaintjeandulez.cef.fr/#1363</a></p> <p>mieux si j'ai un deuxième slider dans la page d'id slider_carrousel ( en local pour l'instant)<br class="autobr" /> j'ai soit #slider_carrousel soit le numero de l'image du bandeau dans l'adresse<br class="autobr" /> j'ai du mettre queque chose en trop dans le js..</p> <p>2- est-ce qu'il existe un mode défilement vertical ?</p> <p>cela dit je trouve ce slider efficace</p> Owl Carousel 2 2018-02-07T17:27:01Z https://files.spip.org/Owl-Carousel-2#comment495781 2018-02-07T17:27:01Z <p>Bonsoir,</p> <p>merci pour le retour, effectivement ça a pus changé entre la version précédente de owl et celle actuelle.</p> <p>je corrige ça …</p> Owl Carousel 2 2018-02-07T17:19:30Z https://files.spip.org/Owl-Carousel-2#comment495780 2018-02-07T17:19:30Z <p>bonsoir,<br class="autobr" /> merci pour ce magnifique plugin d'un slider que je ne connaissait pas.<br class="autobr" /> Pouvoir “glisser” sur un mobile pour changer d'image c'est super.</p> <p> Pour info il me semble qu'il y a des anciens paramètre dans les noisettes. par exemple <br class="autobr" /> <code> navigationText : ["<:owlcarousel:prec:>","<:owlcarousel:suiv:>"],</code><br class="autobr" /> navigationText ne marche pas chez moi mais navText oui ( j'ai regarde dans la librairie javascript)</p> Owl Carousel 2 2018-01-16T16:19:10Z https://files.spip.org/Owl-Carousel-2#comment495371 2018-01-16T16:19:10Z <p>Bonjour,<br class="autobr" /> avez-vous suivi la procédure expliquée ici ? <a href="https://www.spip.net/fr_article3396.html" class="spip_url spip_out auto" rel="nofollow external">https://www.spip.net/fr_article3396.html</a><br class="autobr" /> Ensuite, pour l'usage, c'est expliqué dans le texte ci-dessus...</p> Owl Carousel 2 2018-01-16T15:46:04Z https://files.spip.org/Owl-Carousel-2#comment495370 2018-01-16T15:46:04Z <p>Bonsoir à tous, je viens de voir ce plugin mais j'arrive pas à le mettre en marche sur mon site.</p> <p>Quelqu'un peut-il me donner la démarche à suivre???<br class="autobr" /> Merci</p>