SPIP-Contrib

SPIP-Contrib

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

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

Accueil > Affichage multimédia > Galeries et diaporamas > Flux Slider > FluxSlider

FluxSlider

9 novembre 2011 – par ngombe – 23 commentaires

11 votes

Attention, cette contribution est EN CHANTIER : elle n’est peut-être pas fonctionnelle.

Flux Slider pour SPIP permet d’intégrer des diaporamas en JQuery dans vos articles et squelettes.

Introduction

Flux Slider pour SPIP permet d’agrémenter facilement vos articles et squelettes de diaporamas en JQuery.

Pour voir une démo c’est par ici : http://webtice.ac-guyane.fr/contrib/spip.php?article6

Dépendances

Nécessaire :
-  # INSERT_HEAD
-  CFG

Recommandé :
-  Palette
-  FancyBox

Installation

  1. Téléchargez l’archive dans le dossier plugins de votre SPIP
  2. Activez le plugin depuis l’espace privé.

N’oubliez pas de sélectionner une méthode de fabrication des vignettes dans Configuration > Fonction avancées de SPIP !

Description

Ce plugin ajoute les modèles de balises paramétrables suivantes :

  • fluxsliderXX : XX est un numéro d’article optionnel si définit dans CFG
  • fluxslider_rubXX : XX numéro de la rubrique
  • fluxslider_doc|id=n,... : n,... une série de documents images

Utilisation

Pour afficher tous les documents du portfolio de l’article 24 depuis un article :

  1. <fluxslider24|controls=false>

Dans un squelette on utilise la syntaxe suivante (sans argument id_article) pour afficher les images de l’article par défaut (définit dans CFG) :

  1. [(#MODELE{fluxslider})]

Ou si l’on souhaite utiliser l’article 32 comme réservoir d’images depuis un squelettes :

  1. [(#MODELE{fluxslider}{id_fluxslider=32})]

Pour fabriquer dans un article le diaporama des documents 4,2,5,7 et 9 :

  1. <fluxslider_doc|id=4,2,5,7,9|controls=false>

Pour le même résultat depuis un squelette :

  1. [(#MODELE{fluxslider_doc}{id='4|2|5|7|9'}{controls=false})]

Paramètres

  • delay=true/false : Délai entre les transitions (si autoplay=true)
  • autoplay=true/false : Démarrer la présentation
  • pagination=true/false : Afficher les puce de paginations
  • captions=true/false : Afficher le titre des images
  • controls=true/false : Afficher les flèches de direction
  • portfolio=oui/non : Utiliser uniquement le portfolio

Compatibilité

Pour voir les transitions votre navigateur doit gérer les transitions 3D CSS3 :
-  Safari
-  Chrome
-  Firefox 5+
-  IE10

Liens

Pour ajouter un lien sur une image on renseigne dans le champ description du fichier :
-  article31313 pour pointer vers l’article 31313 (forgera le lien spip.php ?article31313)
-  doc43129 pour déclencher fancybox (si installé)
-  Un lien type http://www.perdu.com/ ou ftp://ftp.lip6.fr

Configuration

Ce formulaire permet de modifier rapidement les options d’affichage.

JPEG - 95.9 ko

Conditions d’utilisation

Ce plugin est une adaptation pour SPIP du script « Flux-Slider » créé par Joe Lambert, distribué sous licence MIT.

Pour plus d’informations, reportez-vous au site http://www.joelambert.co.uk/.

Voir en ligne : http://plugins.spip.net/fluxslider

Dernière modification de cette page le 17 septembre 2014

Retour en haut de la page

Vos commentaires

  • Le 18 mars 2015 à 01:43, par oliv316 En réponse à : FluxSlider

    Bonjour
    super plugin mais je n’arrive pas a redimensionner la taille du diaporama sans tronquer les images
    je voudrais faire du 700 x 300 , mes image on bien cette taille là mais il les redimensionne automatiquement , on dirait que le plugin ne supporte que le 4x3
    merci d’avance pour votre aide

    Répondre à ce message

  • Le 13 juin 2012 à 17:49, par popojcb En réponse à : Flux Slider

    Bonjour A tous !
    Pour les amateurs tels que moi, comment remplacer la fancybox, par la mediabox.

    J’ai bien essayer dans les noisettes de remplacer les occurrences .fancybox par .mediabox, mais cela ne suffit pas.

    Merci pour votre aide, si cela est possible.

    Bien à tous.

    Répondre à ce message

  • Le 26 novembre 2011 à 13:00, par Hervé BERNARD En réponse à : Flux Slider

    Merci ngombe pour ce plugin qui se me en place rapidement :-)

    Des petites remarques :
    -  Sur IE7 les effets d’animation n’opèrent pas chez moi (pas de problème avec Firefox, Chrome, Opera)...
    -  Serait-il possible de mettre en place un système de preload ou autre afin d’éviter au premier affichage de la page de voir furtivement toutes les images du diaporama les unes sous les autres....
    -  Attention, au niveau du paramétrage du plugin dans CFG, la petite boite qui pointe vers la documentation de fluxslider amène vers une page 404...

    Merci z’en tout cas ;-)

    • Le 28 novembre 2011 à 15:49, par ngombe En réponse à : Flux Slider

      Salut Hervé,

      -  Je n’utilise plus fenêtre depuis des lustres (ils en sont à IE9 je crois, ha oui ça marche pas sous XP, je me souviens pourquoi j’utilise plus leur OS maintenant ...) donc là dessus je peux pas trop t’aider...
      -  Le preload est déjà là, par contre un peu de css pour cacher les images sauf la première permettrais de pas avoir cet effet furtif...
      -  Merci pour l’info, je corrigerais le lien vers la doc dès que possible.

      @+

    • Le 5 mai 2012 à 15:51, par guillaume En réponse à : Flux Slider

      Bonjour,
      Au sujet de ce « preload » tu dis que l’on peut utiliser un peu de css pour cacher les images. Où puis-je trouver le fichier css et la ou les lignes en questions à modifier ?
      merci d’avance

    Répondre à ce message

  • Le 25 janvier 2012 à 19:09, par Yannick En réponse à : Flux Slider

    Je reviens à la charge pour une nouvelle question :
    je charge mes articles (avec un diaporama fluxSlider) en ajax, et donc le javascript ne se lance pas au chargement de la page ajaxée…

    Donc rien ne s’affiche ; est-il possible de remédier à ce problème ?

    Merci !

    Répondre à ce message

  • Le 15 janvier 2012 à 17:46, par Babache04 En réponse à : Flux Slider

    Bonjour,

    J’ai mis en place ce plugin sur mon site, dans le bandeau.

    J’ai eu beaucoup de mal car, il ne se lançait pas. Il a fallus que je mette un lien vers la librairie jQuery dans le code avant d’inclure mon modèle fluxslider.

    Maintenant j’aimerais mettre 3 fluxsliders dans le bandeau, mais lorsque je lance 3 modèles à la suite, seulement le premier prend l’effet slider, les 2 autres ne sont qu’une liste d’image.

    Est-ce possible de placer plusieurs sliders dans le bandeau ?

    Merci pour ce plugin en tout cas !

    • Le 16 janvier 2012 à 03:18, par ngombe En réponse à : Flux Slider

      Salut Babache,
      Etrange de pas avoir jQuery direct dans le header... Quel version de spip / squelettes tu utilise ?

      3 slider sur la même page c’est pas possible avec le modèle en l’état.

      Si tu veux tenter tu devra créer 3 div avec des id différents (genre #sliders1 #sliders2 et #sliders3) pour jouer 3 sliders en même temps.

      Tu devras peut être aussi surcharger la css et les ressources nécessaire pour le rendu seront triplées :-)

      Je sais pas si ça tournerai avec flux car j’ai pas essayé, mais tu peux le faire avec nivo (plusieurs animations simultanées)...

    Répondre à ce message

  • Le 9 décembre 2011 à 09:37, par beatrice En réponse à : Flux Slider

    Bonjour,
    comment m’y prendre pour , pour appeler les 4 premier articles d’une rubrique.
    j’ai créer modeles/fluxslider_4rub.html
    [(#SETid_rubrique,[(#ENVid_fluxslider, #CONFIGfluxslider/id_defaut, 0 )] )]
    [(#SETwidth,[(#ENVwidth, #CONFIGfluxslider/width, 640 )] )]
    [(#SETheight,[(#ENVheight, #CONFIGfluxslider/height, 480 )] )]
    [(#SETdelay,[(#ENVdelay, #CONFIGfluxslider/delay, 4000 )] )]
    [(#SETautoplay,[(#ENVautoplay, #CONFIGfluxslider/autoplay, true )] )]
    [(#SETpagination,[(#ENVpagination, #CONFIGfluxslider/pagination, false )] )]
    [(#SETcaptions,[(#ENVcaptions, #CONFIGfluxslider/captions, false )] )]
    [(#SETcontrols,[(#ENVcontrols, #CONFIGfluxslider/controls, false )] )]
    [(#SETportfolio,[(#ENVportfolio, #CONFIGfluxslider/portfolio, ’non’ )] )]
    [(#SETimagealign,[(#ENVimagealign, #CONFIGfluxslider/imagealign,’center’ )] )]
    [(#SETimagebackcolor,[(#ENVimagebackcolor, #CONFIGfluxslider/imagebackcolor,’transparent’ )] )]

    [(#INCLUREfond=noisettes/fluxslider_4rub,
    id_rubrique=#GETid_rubrique,
    width=#GETwidth,
    height=#GETheight,
    delay=#GETdelay,
    autoplay=#GETautoplay,
    paginations=#GETpagination,
    captions=#GETcaptions,
    controls=#GETcontrols,
    imagealign=#GETimagealign,
    imagebackcolor=#GETimagebackcolor
    )]
    puis créer ma noisettes/fluxslider_4rub.html


    [(#DESCRIPTIF| ?’’,’ ’)
    [(#FICHIER|image_passe_partout#WIDTH,#HEIGHT
    |image_recadre#WIDTH,#HEIGHT,#IMAGEALIGN,#IMAGEBACKCOLOR
    |inserer_attributtitle,(#TITRE
    |inserer_attributrel,#FICHIER|image_reduire#CONTROLNAVTHUMBSWIDTH,#CONTROLNAVTHUMBSHEIGHT|extraire_attributsrc
    )]
    ]
    [(#DESCRIPTIF| ?’ ’,’’)
    [(#SETlien,#VAL’spip.php ?’#DESCRIPTIF|attribut_html|replace’ ’,’’)]
    [(#SETfancyornot,’’)]
    [(#DESCRIPTIF|matchdoc|==doc| ?
    [(#PLUGINFANCYBOX|oui)
    [(#SETfancyornot, [(#CONFIGfancybox/selecteur_commun,’.fancybox’|replace’\.’,’’)])]
    ]
    [(#SETlien, #URL_DOCUMENT)]
    )]
    [(#DESCRIPTIF|matchhttp|==http| ?
    [(#SETlien, (#DESCRIPTIF)]
    )]

    [(#FICHIER|image_passe_partout#WIDTH,#HEIGHT
    |image_recadre#WIDTH,#HEIGHT,#IMAGEALIGN,#IMAGEBACKCOLOR
    |inserer_attributtitle,(#TITRE
    |inserer_attributrel,#FICHIER|image_reduire#CONTROLNAVTHUMBSWIDTH,#CONTROLNAVTHUMBSHEIGHT|extraire_attributsrc
    )]

    ]

    puis dans mon sommaire j’ai mis [(#MODELESfluxslider_4rubid_fluxslider=N° de la rub)]
    et oups rien ne fonctionne ! Que faire, merci d’avance pour votre aide
    béa

    • Le 15 décembre 2011 à 14:51, par ngombe En réponse à : Flux Slider

      Salut Béatrice,

      Je me rend compte grâce à ton message que les modèles fluxslider_doc et fluxslider_rub spécifiés dans la doc ne sont pas sur la zone (je devais manquer de sommeil) donc voilà ce que ça donnes :

      -  Dans le répertoire modeles/ :

      • fluxslider_doc.html
      1. [(#REM) modèle Fluxslider pour une rubrique :
      2. - Depuis un article : < fluxslider_doc|id=.,.,.. >
      3. - Selon le modele CROCHET(# MODELE{fluxslider_doc}{id=.,.,..})CROCHET
      4. ]
      5.  
      6. [(#SET{id,[(#ENV{id, #CONFIG{fluxslider/id_defaut, 0} })]} )]
      7. [(#SET{width,[(#ENV{width, #CONFIG{fluxslider/width, 640} })]} )]
      8. [(#SET{height,[(#ENV{height, #CONFIG{fluxslider/height, 480} })]} )]
      9. [(#SET{delay,[(#ENV{delay, #CONFIG{fluxslider/delay, 4000} })]} )]
      10. [(#SET{autoplay,[(#ENV{autoplay, #CONFIG{fluxslider/autoplay, true} })]} )]
      11. [(#SET{pagination,[(#ENV{pagination, #CONFIG{fluxslider/pagination, false} })]} )]
      12. [(#SET{captions,[(#ENV{captions, #CONFIG{fluxslider/captions, false} })]} )]
      13. [(#SET{controls,[(#ENV{controls, #CONFIG{fluxslider/controls, false} })]} )]
      14. [(#SET{portfolio,[(#ENV{portfolio, #CONFIG{fluxslider/portfolio, 'non'} })]} )]
      15. [(#SET{imagealign,[(#ENV{imagealign, #CONFIG{fluxslider/imagealign,'center'} })]} )]
      16. [(#SET{imagebackcolor,[(#ENV{imagebackcolor, #CONFIG{fluxslider/imagebackcolor,'transparent'} })]} )]
      17.  
      18. [(#INCLURE{fond=noisettes/fluxslider_document,
      19. id=#GET{id},
      20. width=#GET{width},
      21. height=#GET{height},
      22. delay=#GET{delay},
      23. autoplay=#GET{autoplay},
      24. paginations=#GET{pagination},
      25. captions=#GET{captions},
      26. controls=#GET{controls},
      27. imagealign=#GET{imagealign},
      28. imagebackcolor=#GET{imagebackcolor}
      29. })]

      Télécharger

      • fluxslider_rub.html
      1. [(#REM) modèle Fluxslider pour une rubrique :
      2. - Depuis un rubrique : < fluxslider_rubXX >, alors affiche les documents de la rubrique XX
      3. - Selon le modele CROCHET(# MODELE{fluxslider_rub}{id_fluxslider_rub=XX})CROCHET
      4. ]
      5.  
      6. [(#SET{id_rubrique,[(#ENV{id_fluxslider_rub, #CONFIG{fluxslider/id_defaut, 0} })]} )]
      7. [(#SET{width,[(#ENV{width, #CONFIG{fluxslider/width, 640} })]} )]
      8. [(#SET{height,[(#ENV{height, #CONFIG{fluxslider/height, 480} })]} )]
      9. [(#SET{delay,[(#ENV{delay, #CONFIG{fluxslider/delay, 4000} })]} )]
      10. [(#SET{autoplay,[(#ENV{autoplay, #CONFIG{fluxslider/autoplay, true} })]} )]
      11. [(#SET{pagination,[(#ENV{pagination, #CONFIG{fluxslider/pagination, false} })]} )]
      12. [(#SET{captions,[(#ENV{captions, #CONFIG{fluxslider/captions, false} })]} )]
      13. [(#SET{controls,[(#ENV{controls, #CONFIG{fluxslider/controls, false} })]} )]
      14. [(#SET{portfolio,[(#ENV{portfolio, #CONFIG{fluxslider/portfolio, 'non'} })]} )]
      15. [(#SET{imagealign,[(#ENV{imagealign, #CONFIG{fluxslider/imagealign,'center'} })]} )]
      16. [(#SET{imagebackcolor,[(#ENV{imagebackcolor, #CONFIG{fluxslider/imagebackcolor,'transparent'} })]} )]
      17.  
      18. [(#INCLURE{fond=noisettes/fluxslider_rubrique,
      19. id_rubrique=#GET{id_rubrique},
      20. width=#GET{width},
      21. height=#GET{height},
      22. delay=#GET{delay},
      23. autoplay=#GET{autoplay},
      24. paginations=#GET{pagination},
      25. captions=#GET{captions},
      26. controls=#GET{controls},
      27. imagealign=#GET{imagealign},
      28. imagebackcolor=#GET{imagebackcolor}
      29. })]

      Télécharger

      -  Dans le répertoire noisettes/ :

      • fluxslider_document.html
      1. <B_doc>
      2. <div id="fluxslider">
      3. <BOUCLE_doc(DOCUMENTS){extension IN png,jpg,gif}{id_document==^((#ID|replace{',',|}|sinon{.*}))$}{par num titre, date}>
      4.  
      5. [(#DESCRIPTIF|?{'',' '})
      6. [(#FICHIER|image_passe_partout{#WIDTH,#HEIGHT}
      7. |image_recadre{#WIDTH,#HEIGHT,#IMAGEALIGN,#IMAGEBACKCOLOR}
      8. |inserer_attribut{title,[(#TITRE|supprimer_numero)]}
      9. |inserer_attribut{rel,#FICHIER|image_reduire{#CONTROLNAVTHUMBSWIDTH,#CONTROLNAVTHUMBSHEIGHT}|extraire_attribut{src}}
      10. )]
      11. ]
      12. [(#DESCRIPTIF|?{' ',''})
      13. [(#SET{lien,#VAL{'spip.php?'#DESCRIPTIF}|attribut_html|replace{' ',''}})]
      14. [(#SET{fancyornot,''})]
      15. [(#DESCRIPTIF|match{doc}|=={doc}|?{
      16. [(#PLUGIN{FANCYBOX}|oui)
      17. [(#SET{fancyornot, [(#CONFIG{fancybox/selecteur_commun,'.fancybox'}|replace{'\.',''})]})]
      18. ]
      19. [(#SET{lien, #URL_DOCUMENT})]
      20. })]
      21. [(#DESCRIPTIF|match{http}|=={http}|?{
      22. [(#SET{lien, [(#DESCRIPTIF|textebrut)]})]
      23. })]
      24. <a href="#GET{lien}" [class="(#GET{fancyornot})"]>
      25. [(#FICHIER|image_passe_partout{#WIDTH,#HEIGHT}
      26. |image_recadre{#WIDTH,#HEIGHT,#IMAGEALIGN,#IMAGEBACKCOLOR}
      27. |inserer_attribut{title,[(#TITRE|supprimer_numero)]}
      28. |inserer_attribut{rel,#FICHIER|image_reduire{#CONTROLNAVTHUMBSWIDTH,#CONTROLNAVTHUMBSHEIGHT}|extraire_attribut{src}}
      29. )]
      30. </a>
      31. ]
      32. </BOUCLE_doc>
      33. </div>
      34. </B_doc>
      35.  
      36. <br style="clear:both"/>
      37. <script type="text/javascript">
      38. $(window).load(function() {
      39. window.flxslider = new flux.slider('#fluxslider', {
      40. [autoplay: (#AUTOPLAY),]
      41. [pagination: (#PAGINATIONS),]
      42. [captions: (#CAPTIONS),]
      43. [controls: (#CONTROLS),]
      44. transitions: [ #CONFIG{fluxslider/transitions,"'zip'"} ],
      45. width: #WIDTH,
      46. height: #HEIGHT
      47. });
      48. });
      49. </script>
      50. </B_doc>

      Télécharger

      • fluxslider_rubrique.html
      1. <B_doc>
      2. <div id="fluxslider">
      3. <BOUCLE_doc (DOCUMENTS) {id_rubrique=#ID_RUBRIQUE} {extension IN png,jpg,gif} {par num titre}>
      4.  
      5. [(#DESCRIPTIF|?{'',' '})
      6. [(#FICHIER|image_passe_partout{#WIDTH,#HEIGHT}
      7. |image_recadre{#WIDTH,#HEIGHT,#IMAGEALIGN,#IMAGEBACKCOLOR}
      8. |inserer_attribut{title,[(#TITRE|supprimer_numero)]}
      9. |inserer_attribut{rel,#FICHIER|image_reduire{#CONTROLNAVTHUMBSWIDTH,#CONTROLNAVTHUMBSHEIGHT}|extraire_attribut{src}}
      10. )]
      11. ]
      12. [(#DESCRIPTIF|?{' ',''})
      13. [(#SET{lien,#VAL{'spip.php?'#DESCRIPTIF}|attribut_html|replace{' ',''}})]
      14. [(#SET{fancyornot,''})]
      15. [(#DESCRIPTIF|match{doc}|=={doc}|?{
      16. [(#PLUGIN{FANCYBOX}|oui)
      17. [(#SET{fancyornot, [(#CONFIG{fancybox/selecteur_commun,'.fancybox'}|replace{'\.',''})]})]
      18. ]
      19. [(#SET{lien, #URL_DOCUMENT})]
      20. })]
      21. [(#DESCRIPTIF|match{http}|=={http}|?{
      22. [(#SET{lien, [(#DESCRIPTIF|textebrut)]})]
      23. })]
      24. <a href="#GET{lien}" [class="(#GET{fancyornot})"]>
      25. [(#FICHIER|image_passe_partout{#WIDTH,#HEIGHT}
      26. |image_recadre{#WIDTH,#HEIGHT,#IMAGEALIGN,#IMAGEBACKCOLOR}
      27. |inserer_attribut{title,[(#TITRE|supprimer_numero)]}
      28. |inserer_attribut{rel,#FICHIER|image_reduire{#CONTROLNAVTHUMBSWIDTH,#CONTROLNAVTHUMBSHEIGHT}|extraire_attribut{src}}
      29. )]
      30. </a>
      31. ]
      32. </BOUCLE_doc>
      33. </div>
      34. </B_doc>
      35.  
      36. <br style="clear:both"/>
      37. <script type="text/javascript">
      38. $(window).load(function() {
      39. window.flxslider = new flux.slider('#fluxslider', {
      40. [autoplay: (#AUTOPLAY),]
      41. [pagination: (#PAGINATIONS),]
      42. [captions: (#CAPTIONS),]
      43. [controls: (#CONTROLS),]
      44. transitions: [ #CONFIG{fluxslider/transitions,"'zip'"} ],
      45. width: #WIDTH,
      46. height: #HEIGHT
      47. });
      48. });
      49. </script>
      50. </B_doc>

      Télécharger

    • Le 15 décembre 2011 à 15:04, par ngombe En réponse à : Flux Slider

      Re,

      En effet ta demande n’est pas très claire...

      Souhaite-tu afficher les documents des 4 premiers (plus récent ?) articles d’une rubrique ou bien les logos des articles d’une rubrique ?

      Regarde les boucles proposés dans le forum de nivoslider, il y a des demandes similaires.

      @+

    Répondre à ce message

  • Le 27 novembre 2011 à 11:28, par adrien En réponse à : Flux Slider

    Merci pour ce pluggin !

    Je ne trouve pas la feuille css des fleches de navigation ni le fichier ou sont les guillement << et >>, l’outil de dev de chrome me dit que la div s’appelle element.style mais je ne la trouve nulle par...

    • Le 28 novembre 2011 à 15:55, par ngombe En réponse à : Flux Slider

      Salut Adrien,

      Les flèches sont construites dans le flux.js...

      Essaye la Web Developer Bar pour FF, sinon il existe un équivalent pour chrome ...

      De toute façon tout se passe dans le répertoire du plugin (CSS ...)

      @+

    • Le 28 novembre 2011 à 22:13, par adrien En réponse à : Flux Slider

      okk merci beaucoup ! le plugin est vraiment bien

    Répondre à ce message

  • Le 20 novembre 2011 à 00:10, par Yannick En réponse à : Flux Slider

    Très bon plugin merci !
    Par contre, j’ai mis un bon bout de temps à me rendre compte que ce plugin ne fonctionne pas si le plugin mediathèque est activé… !

    • Le 22 novembre 2011 à 17:54, par ngombe En réponse à : Flux Slider

      Salut Yannick,
      J’utilise la médiathèque et fluxslider sur de nombreux sites sans aucun souci ...
      Peut être as-tu plus de détails sur ce dysfonctionnement (squelettes, erreurs js, pas d’affichage partie privée/publique ...)
      @+

    • Le 22 novembre 2011 à 18:13, par Yannick En réponse à : Flux Slider

      Ah ok, moi ca n’affichait rien, aucune erreur, juste rien. J’avoue ne pas avoir creusé plus loin le problème car je n’avais plus besoin du plugin médiatheque.

      J’en profite pour te poser une petite question : j’ai essayé d’enlever l’option par défaut qui fait tourner aléatoirement toutes les transitions, mais je n’y arrive pas. Peux-tu me dire simplement quel .js est concerné pour ce faire ?

      Merci !

    • Le 22 novembre 2011 à 18:39, par ngombe En réponse à : Flux Slider

      J’avais voulu mettre le choix dans CFG, mais le temps m’as manqué... Peut être au prochain épisode :)

      Par défaut le plugin joue toutes les transitions, le js est généré par les noisettes des modèles.

      Si tu n’en veux que certaines (ou une seule) tu doit ajouter le paramètre transitions dans ce bloc :

      1. <script type="text/javascript">
      2. $(window).load(function() {
      3. window.flxslider = new flux.slider('#fluxslider', {
      4. [autoplay: (#AUTOPLAY),]
      5. [pagination: (#PAGINATIONS),]
      6. [captions: (#CAPTIONS),]
      7. [controls: (#CONTROLS),]
      8. transitions: [ 'warp', 'zip', 'blocks' ],
      9. width: #WIDTH,
      10. height: #HEIGHT
      11. });
      12. });
      13. </script>

      Télécharger

      Voici les transitions possibles pour mettre dans ton array :

      2D bars, blinds, blocks, concentric, warp, zip
      3D bars3d, blinds3d, cube, tiles3d

      @+

    • Le 22 novembre 2011 à 20:24, par Yannick En réponse à : Flux Slider

      génial, merci.
      Du coup j’ai rajouté l’effet swipe qui donne quand même moins mal à la tête !
      Un grand merci ngombe pour cette contrib et ces conseils

    Répondre à ce message

  • Le 10 novembre 2011 à 09:46, par CilkO En réponse à : Flux Slider

    bonjour
    super plugin qui fonctionne très très bien bien, je l attendais avec impatience :) il produit sans flash un diaporama d une propreté impeccable super boulot, donc grand grand merci !
    cependant y a t il dans ce que tu as prévu, la possibilité comme pour le plug Spip jQuery Cycle, que les photos portrait se recadre d elle mm ?? ou doit on forcément les préparer en amont ?
    car ss cfg je ne trouve pas la solution :(

    • Le 10 novembre 2011 à 19:41, par ngombe En réponse à : Flux Slider

      Salut,

      Tu peux essayer de remplacer les filtres image_passe_partout et image_recadre par un image_reduire dans les noisettes du plugin, mais je pense pas que le résultat sera meilleur.

      Comme pour nivoslider il est préférable de n’avoir que des photos en mode paysage ... Ou bien uniquement des portraits mais le passage d’une orientation à l’autre fera obligatoirement perdre un partie de l’image ou fera apparaître des ’vides’.

      L’idéal comme tu l’as si bien dit, c’est de préparer ses images en amont.

      @+

    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

  • Un retour d’expérience d’utilisation de Formidable

    26 octobre – commentaires

    Il s’agissait de créer un formulaire d’inscription à un évènement modérer les inscriptions dans le privé publier les inscriptions dans le public Nous avons discuté de cette présentation lors de l’apéro SPIP du 15 février 2016 à la Cantine (...)

  • Métas +

    3 décembre – 14 commentaires

    Améliorez l’indexation de vos articles dans les moteurs et leur affichage sur les réseaux sociaux grâce aux métadonnées Dublin Core, Open Graph et Twitter Card. Installation Activer le plugin dans le menu dédié. Dans le panel de configuration, (...)

  • Adaptive Images

    15 novembre 2013 – 69 commentaires

    Un plugin pour permettre aux sites responsive d’adapter automatiquement les images de la page à l’écran de consultation. Adaptive Images, que l’on pourrait traduire par Images adaptatives, désigne la pratique qui vise à adapter les taille, (...)

  • Social tags

    8 septembre 2008 – 428 commentaires

    Le plugin Social Tags permet d’ajouter des icônes de partage de liens vers les sites tels que Digg, Facebook, Delicious.... Une fois le plugin installé et activé (voir doc.), le choix des sites se fait via un menu de configuration. Insertion (...)

  • Module de Paiement Stripe

    17 octobre – commentaires

    Stripe est un prestataire de paiement externe https://stripe.com/fr qui propose une API moderne et une interface de paiement extrêmement conviviale et efficace. Ce module permet les paiements à l’acte et les paiement récurrents. Configuration (...)

Ça spipe par là