Lien de référence : https://owlcarousel2.github.io/OwlCarousel2/
Installation
Configuration
Vous pouvez activer l’insertion des styles et javascript du plugin dans l’espace public et dans l’espace privé de spip sur la page de configuration du plugin.
Exemples
Des exemples utilisables dans vos squelettes se trouvent dans le dossier « noisettes » du plugin. Ce répertoire est plus un outil pour squelette, et destiné plus particulièrement à l’intégration.
Les noisettes fournies peuvent servir de point de départ et ne conviendront certainement pas à tous les cas d’utilisation en l’état.
Il faut plus les considérer comme des extraits de code facilitant l’intégration à votre projet.
Modèle
Un modèle est tout prêt pour afficher les documents d’un article de type jpg, gif ou png dans un diaporama insérable de cette manière :
<articleX|owl>
où « X » est l’id de l’article, pour afficher toutes les images de cet article.
Quelques paramètres permettent de modifier quelques réglages, et se définissent de cette manière lors de l’inclusion du modèle :
<articleX|owl|parametre=valeur>
- id-carousel=unikid : id unique du carousel, doit être renseigné si plusieurs carousels dans la même page.
- caption=oui : afficher la description de l’image
- tri=titre : (rang_lien par defaut) spécifier l’ordre de tri des documents
- dots=false (true par defaut) : affiche les points pour changer d’image
- navigation=true (false par defaut) : afficher les boutons précédents/suivants
- items=2 (1 par défaut) : pour afficher plusieurs images en même temps
- margin=10 : pour ajouter une marge entre chaque image, en pixels
- docs=1,2,3 : affiche uniquement les documents 1, 2 et 3. Dans ce cas, le numéro identifiant de l’article est optionnel, vous pouvez donc écrire
<article|owl|docs=1,2,3>pour afficher ce diaporama n’importe où dans le site, tant que les documents existent dans la médiathèque - caption_css=monstyle : ajouter des css sur la description (par exemple : invisible)
- autoHeight=true : pour que la hauteur soit adaptée à chaque diapositive
- autoplay=true (false par défaut) : le carousel démarre automatiquement
- autoplayHoverPause=true (false par défaut) : pause au survol en mode autoplay
- autoplayTimeout=6500 (5000 par défaut, en milliseconde) : durée d’affichage d’une diapositive
- lazyLoad=true (false par défaut) : ne charge que les images visibles pour optimiser le chargement.
- animateIn= une classe css animation CSS3. par défaut seul fadeOut est proposé par le plugin.
- animateOut= une classe css animation CSS3. par défaut seul fadeOut est proposé par le plugin.
- URLhashListener=true : pour suivre le diaporama dans l’historique de navigation.
- largeur=200 : redimenssionne les images à 200px de large.
- left|center|right : alignement du diaporama à gauche, au centre ou à droite.
Particularité
Avec le paramètre docs=1,2,3,4 et dans le cas où on n’utilise pas un numéro d’article, exemple : <article|owl|docs=1,2,3,4>
alors il faut ajouter le paramètre |tri=titre :
<article|owl|docs=1,2,3,4|tri=titre>
(le tri sur rang_lien ne peut exister s’il n’y a pas de numéro d’article)
Discussions par date d’activité
13 discussions
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
Bonjour,
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 ?
je t’ai mis en ligne le site de test :
exemple très visible sur http://test3.montpellier2.web-ecclesial.fr/spip.php?rubrique49
puis aussi sur http://test3.montpellier2.web-ecclesial.fr/spip.php?rubrique16 ( on voit le trait a droite du titre par exemple )
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...
apparemment ce n’est pas un p de css mais plutot de la position de l’image précédente
Répondre à ce message
Bonjour,
Dans l’espace privé, si je suis au niveau de « modifier cet article », je vois bien le slider
si je clique sur modifier puis sur un des onglet de visualisation ( voir ou modif/voir) , j’ai le code javascript propre au modèle qui s’affiche et pas le slider.
Est-ce normal ou est-ce un soucis sur mon site ?
Bonjour,
c’est bien normal, le javascript n’est pas exécuté à cet endroit, c’est fait pour y vérifier les styles sur le texte. Pour voir la page telle que si elle était publiée, il faut passer par « prévisualiser ».
Bonjour,
C’est due a une sécurité de spip qui désactive le javascript des modèles car ils sont considérés comme malveillants insérés depuis une saisie textarea.
Ceci est principalement due au fait que l’édition des articles/objets spip peut aussi être publique et donc possiblement utilisable pour insérer des scripts malveillants.
Si votre site n’utilise pas l’édition coté publique, il est possible d’assouplir cette rêgle, qui rend un peut inutile la prévisualisation en mode édition.
Pour mieux comprendre https://www.spip.net/fr_article4642.html
Je vais essayer de trouver le temps (demain ^^) de rédiger une petite note sur les options possibles, mais on ne peut pas l’intégrer au plugin en standard, pour les raisons précédentes.
Répondre à ce message
Bonjour.
Petite « surprise » avec le modèle de base (super pratique, merci) : si on utilise la syntaxe docs=1,2,3 ... , pas de problème tant qu’on conserve le numéro de l’article (<articleX|owl|docs=...>, mais lorsqu’on supprime, ça déclenche une erreur de la bdd sur le tri par « rang_lien », qui n’existe pas.
Si je rajoute explicitement « tri=titre » , tout fonctionne. Pas grave donc, mais il serait peut-être judicieux de l’indiquer dans le mode d’emploi ?
Merci pour ce super gadget.
Alain
Ah oui bien vu ! S’il n’y a pas d’article on ne peut pas se baser sur rang_lien, forcément...
J’ajoute ça dans la doc, merci !
Répondre à ce message
Ajouter un commentaire
Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :
Merci d’avance pour les personnes qui vous aideront !
Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.
Suivre les commentaires :
|
