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
Installation
- Téléchargez l’archive dans le dossier plugins de votre SPIP
- 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 :
<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) :
[(#MODELE{fluxslider})]
Ou si l’on souhaite utiliser l’article 32 comme réservoir d’images depuis un squelettes :
[(#MODELE{fluxslider}{id_fluxslider=32})]
Pour fabriquer dans un article le diaporama des documents 4,2,5,7 et 9 :
<fluxslider_doc|id=4,2,5,7,9|controls=false>
Pour le même résultat depuis un squelette :
[(#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/.
Discussions par date d’activité
9 discussions
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
voir l’exemple ici
la page en question http://www.dbdcoaching.fr/spip.php?article9
Répondre à ce message
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
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 ;-)
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.
@+
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
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
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 !
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
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
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/ :
- Dans le répertoire noisettes/ :
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
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...
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 ...)
@+
okk merci beaucoup ! le plugin est vraiment bien
Répondre à ce message
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é… !
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 ...)
@+
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 !
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 :
Voici les transitions possibles pour mettre dans ton array :
@+
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
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 :(
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
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 : |