SPIP-Contrib

SPIP-Contrib

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

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

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

Slick

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

11 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

  • MediaBox

    10 mai 2010 – 514 commentaires

    Avertissement Le présent plugin est installé et activé par défaut sur toute les version de SPIP > 3.0. Inutile donc de l’installer manuellement sauf si vous utilisez SPIP 2.1. Aperçu La MediaBox est une Boîte multimédia polyvalente et (...)

  • Sommaire automatique

    31 janvier 2013 – 14 commentaires

    Ce plugin repère les intertitres des textes de vos articles et s’en sert pour génèrer un sommaire. Ce dernier peut être inséré automatiquement au début de chaque article, ou utilisé dans les squelettes pour générer un sommaire sur n’importe quel autre (...)

  • La Fabrique

    20 avril 2012 – 316 commentaires

    La Fabrique est un outil pour webmestres ou développeurs qui souhaitent créer des plugins. La Fabrique est capable de générer le code source minimal d’un plugin pour SPIP 3 (elle accélère donc le démarrage d’un plugin) et peut s’occuper également de (...)

  • Enluminures typographiques V3

    25 juillet 2009 – 186 commentaires

    Les Enluminures typographiques V3 permettent d’ajouter au Porte plume les raccourcis typographiques présents dans le Plugin Barre Typographique Enluminée. C’est une extension du PortePlume. Pour la documentation d’usage, se reporter à celle du (...)

  • Refonte de l’identité graphique

    10 juillet – 36 commentaires

    Lors de la SPIP Party 2017 à Toulouse, un nouveau contributeur est venu nous présenter son travail sur une refonte du logo. Au delà de la refonte du logo, c’est une toute nouvelle identité graphique pour SPIP que Jordan nous propose. Voici une (...)

Ça spipe par là