SPIP-Contrib

SPIP-Contrib

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

288 Plugins, 197 contribs sur SPIP-Zone, 197 visiteurs en ce moment

Accueil > Affichage multimédia > Galeries et diaporamas > Slick > Slick

Slick

17 mai 2017 – par chankalan, jeanmarie, nostromo, Phenix – 14 commentaires

13 votes

Intégration à SPIP du carrousel Slick : https://kenwheeler.github.io/slick/

Fonctions de Slick

Son utilisation permet d’afficher une liste d’éléments défilants, en l’occurrence ici une série de photographies.
Par les configurations proposées, il est possible de mettre en place des effets de fondus enchaînes, de sélectionner le nombre d’images visibles et d’appliquer un défilement automatique ou manuel.

Installation et configuration

Une fois le plugin installé comme les autres, la page de configuration est accessible soit par ecrire/?exec=configurer_slick soit par le menu « Squelettes > Slick Slideshow », permettant d’ajuster les paramètres suivants :

  • activer automatiquement : oui ou non
  • Sélécteur jQuery pour Slick : choisir l’élément par une classe ou un id
  • Elément à utiliser comme Slide : cibler l’élément HTML qui sera une diapositive, il doit être directement dans l’élément sélectionné précédemment.
  • Nombre de slide à afficher : le nombre de diapositives visibles
  • Nombre de slide à déplacer : le nombre de diapositives qui se déplacent en même temps
  • AutoPlay : lecture automatique ou non
  • Vitesse de l’autoplay : le déclenchement après le chargement
  • Fade : effet de fondu entre les diapositives
  • Vitesse de l’animation : la rapidité de la transition
  • Vertical : si non ce sera horizontal
  • Lazyload : ne pas charger les images avant de les voir, puis les charger dès qu’on veut les voir (ondemand), ou bien charger déjà les prochaines (avant de les voir, progressive)
  • Centrer les éléments : ...
  • Animation CSS3 (easing) : effet d’accélération/ralentissement lors des transitions
  • Afficher les bulles de contrôle
  • Pause au survol
  • Pause au survol des bulles de contrôle
  • Support du RTL : si oui, on adapte le diaporama à l’environnement de langue, et dont le sens de lecture peut aller de la droite vers la gauche.
  • Hauteur automatique : si oui, la hauteur s’adaptera à la hauteur de chaque diapositive. Sinon la plus haute sera la hauteur du diaporama.
  • Flèches précédent/suivant : utiliser la navigation précédent/suivant (non par défaut)

Affichage dans les textes

Avec les paramètres par défaut, il suffit d’avoir des images dans son site et d’insérer le diaporama dans un texte avec le modèle suivant :
<slick|>
Dix images du site au hasard seront affichées avec les paramètres optionnels que vous pourrez ajouter :

  • largeur : <slick|largeur=550> - la largeur en pixels
  • hauteur : <slick|hauteur=200> - la hauteur en pixels
  • nombre : <slick|nombre=16> - le nombre d’images qu’on veut afficher

Exemple : <slick|largeur=650|hauteur=320|nombre=20>

Il ne faut inclure qu’une seule fois le modèle sur la même page, car il contient un identifiant qui doit rester unique (#slick).

Pour les autres paramètres, la configuration générale du plugin les règle. Voir la page « Squelettes > Slick Slideshow ».

Il est possible de personnaliser le modèle en le surchargeant : copiez le fichier du plugin modeles/slick.html et dans le dossier squelettes/modeles en le renommant comme vous voulez. Vous pourrez le personnaliser et l’appeler dans vos textes de la même manière que l’autre <monmodele|>

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

Dernière modification de cette page le 22 mai 2017

Retour en haut de la page

Vos commentaires

  • Le 10 juillet à 19:47, par graphie En réponse à : Slick

    Bonjour,

    En activant « Compactage des scripts et CSS » de SPIP, je m’aperçois que slick.js ne fait pas partie des scripts "compacté", alors que les CSS le sont bien.

    Je loupe quelque chose ou pas ?

    Merci,
    françois

    • Le 10 juillet à 20:01, par Phenix En réponse à : Slick

      Tu ne loupes rien, c’est voulut.

      Le compresseur de SPIP compresse mal le JS de Slick, du coup ce n’est pas compatible.

      J’ai exclu Slick de la compression, le temps que le compresseur soit patcher.

    • Le 10 juillet à 20:56, par graphie En réponse à : Slick

      Merci merci pour le retour !
      Au passage, il serait peut-être intéressant de faire charger la version minimisée : slick.min.js.

    Répondre à ce message

  • Le 27 juin à 19:14, par Manu En réponse à : Slick

    Sinon, il y a une solution assez simple que j’utilise régulièrement :
    dans inclure/head.html

    [(#COMPOSITION|=={sommaire}|oui)
    ici l'appel au js et aux css
    ]

    La limite du truc, c’est que, bien sûr, ’il faut répéter la condition pour cibler les autres pages dans lesquelles on souhaite utiliser le script.

    • Le 28 juin à 11:51, par graphie En réponse à : Slick

      Oui, merci Manu.

      Il se trouve que j’utilise ZCore, donc pas de souci pour gérer un head spécifique pour chaque page : sommaire/article/rubrique/etc.

      L’idée était de pouvoir gérer le chargement des scripts à partir de l’interface du plugin ;-)

    Répondre à ce message

  • Le 24 juin à 18:49, par graphie En réponse à : Slick

    Bonjour,

    Quand le plugin est actif, les js/css de Slick sont chargés sur toutes les pages via #INSERT_HEAD / #INSERT_HEAD_CSS.
    Y aurait-il une solution pour ne charger ces éléments que sur certaines pages ? En l’occurrence la page=sommaire ;-)

    Merci pour ce plugin,
    françois

    • Le 25 juin à 16:32, par Phenix En réponse à : Slick

      Hello,

      Non, rien n’est encore prévu pour faire cela.

      C’est un problème assez complexe à gérer, peut être que SPIP fournira un jour ce genre de mécanisme, mais pour le moment, il n’y a rien de cela :)

    • Le 25 juin à 16:45, par graphie En réponse à : Slick

      Merci Phénix,

      Et bien : insertion manuelle, tant pis !!

    • Le 27 juin à 10:39, par jeanmarie En réponse à : Slick

      Hello,

      pour un problème similaire sur Responsive Nav, j’ai bricolé un truc (en local) avec le pipeline affichage_final comme dans Anything Slider : https://zone.spip.org/trac/spip-zone/browser/_plugins_/anythingslider/trunk/anythingslider_pipelines.php. Ca permet de n’insérer les scripts que si une certaine classe est présente dans la page.
      Mais ça oblige à ce que le diaporama ait obligatoirement cette classe...

    • Le 27 juin à 13:08, par graphie En réponse à : Slick

      Oh c’est gentil !!
      Merci pour le tuyau / pipeline jeanmarie : j’y regarde !!

    • Le 28 juin à 11:26, par Manu En réponse à : Slick

      Ah, désolé, ma réponse ne s’est pas logée au bon endroit
      https://contrib.spip.net/Slick#forum492671

    Répondre à ce message

  • Le 20 juin à 10:41, par Alex En réponse à : Slick

    Sympa le plugin ! Et bravo.

    Si j’ai bien compris le paramétrage, <slick|largeur=650|hauteur=320|nombre=20 signifie que le carrousel aura une largeur de 650px et une hauteur de 320 px.

    Or j’ai jeté un coup d’oeil dans le modèle <slick|> du plugin. On trouve dans la boucle DOCUMENTS les critères suivants :

    1. BOUCLE_documents_slide(DOCUMENTS)
    2. {largeur >= #GET{largeur}}
    3. {hauteur >= #GET{hauteur}}

    Télécharger

    qui permettent de sélectionner les documents de type image dont la largeur est supérieure ou égale à #GETlargeur et la hauteur supérieure ou égale à #GEThauteur.

    Ce qui signifierait dans notre exemple que seules et seulement les images d’une largeur supérieure à 650 px ET d’une hauteur de 320 px seraient sélectionnées. Ce qui lie les dimensions du carroussel avec les images qui peuvent y être affichées.

    Où est-ce que je me trompe ?

    Répondre à ce message

  • Le 21 mai à 20:31, par baloo En réponse à : Slick

    Bonjour,
    merci pour ce plugin qui de plus a l’air de fonctionner en 3.2
    Juste une remarque : chez moi slick ne fonctionne pas dans l’espace privé

    Répondre à ce message

  • Le 21 mai à 08:58, par jpcrea En réponse à : Slick

    Merci pour la qualité de ce plugin et de sa documentation.
    Pour afficher seulement les images d’un article, j’ai créé un modèle de boucle contenant l’id de l’article :

    <BOUCLE_documents_slide(DOCUMENTS) {id_article}.....
    tout simplement.

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?
  • [Se connecter]

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

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

Retour en haut de la page

Ça discute par ici

  • Champs Extras 3

    16 janvier 2012 – 588 commentaires

    Ce plugin permet de créer et/ou de gérer des champs supplémentaires dans les objets éditoriaux de SPIP. Il permet donc de prendre en compte et d’afficher de nouveaux éléments dans n’importe quel objet éditorial de SPIP. Screencast Vous n’aimez pas (...)

  • Plugin Domlang : Domaines par secteur de langue

    4 septembre – commentaires

    Domlang est un plugin qui permet d’associer un nom de domaine ou un sous-domaine à un secteur de langue. Ce plugin convient pour un site qui utilise des secteurs de langues. En configuration, pour chaque secteur, vous pourrez définir une URL (...)

  • Plugin Speedsyndic 2

    11 octobre 2010 – 24 commentaires

    Ce plugin est une version compatible spip 2.0.x / 2.1 du plugin Speedsyndic Note : Une bonne partie du texte ci-dessous a été pompé de cet article, expliquant la version précédente du plugin. je n’ai fait qu’adapter le code pour spip 2, ajouter une (...)

  • Formidable, le générateur de formulaires

    23 janvier 2012 – 2229 commentaires

    Un générateur de formulaires facilement configurable pour les non-informaticiens et facilement extensible pour les développeurs. Introduction L’objectif était de créer un plugin permettant de générer des formulaires. Historiquement, 2 plugins (...)

  • Statuts d’articles par lots

    19 mai 2015 – 13 commentaires

    Ce plugin permet de modifier rapidement le statut des articles d’une rubrique ou de tout un site. Une fois installé, le plugin propose une entrée « Statuts d’articles » dans le menu Publication. Un formulaire permet de sélectionner les articles à (...)

Ça spipe par là