SPIP-Contrib

SPIP-Contrib

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

288 Plugins, 197 contribs sur SPIP-Zone, 173 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.

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 ?

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

  • Slick

    17 mai – commentaires

    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 (...)

  • Google Custom Search

    27 mars 2007 – 35 commentaires

    Anciennement appelé Google Ajax Search, Le plugin permet d’ajouter un formulaire de recherche google dans votre squelette. le formulaire utilise l’API de recherche AJAX de Google

  • Mailsubscribers

    16 janvier 2013 – 302 commentaires

    Ce plugin permet de gérer les inscriptions (ou abonnements) à la diffusion de contenu par email. Mailsubscribers permet de gérer les inscriptions par Opt-in simple ou double et la désinscription par URL. Ce plugin gère également plusieurs listes (...)

  • Des blocs dépliables

    6 janvier 2008 – 478 commentaires

    Cet outil vous permet de créer des blocs dont le titre cliquable peut rendre un contenu visible ou invisible, voire de les munir d’une adresse pour que le bloc visible soit récupéré en AJAX. Ces blocs sont disponibles dans tous vos contenus SPIP (...)

  • oEmbed

    4 décembre 2013 – 119 commentaires

    C’est quoi ce truc ? oEmbed est un protocole ouvert qui permet d’insérer le contenu d’une page web dans une autre page. Le contenu inséré peut être de plusieurs types : photo, vidéo, URL ou extrait HTML. L’échange d’information a lieu entre un site (...)

Ça spipe par là