Accueil du site > Affichage multimédia > Galeries et diaporamas > Flash diaporama > Flash diaporama

Flash diaporama

1er avril 2010 – par tubbs – 62

26 votes

Un diaporama pour Flash Player 9. Divers aspects du diaporama sont paramétrables (taille, couleurs, taille miniatures, lecture automatique, ...).

Démonstration

Voir un exemple en ligne.

Installation

L’installation se fait comme un plugin classique.

Utilisation

L’utilisation de ce plugin nécessite l’utilisation la balise#INSERT_HEAD dans vos squelettes.

Le diaporama s’affiche grâce à la balise #FLASH_DIAPORAMA dans vos squelettes. Elle accepte 3 paramètres : largeur, hauteur et squelette du fichier XML qui va être généré par SPIP. Ce dernier paramètre est optionnel, par défaut le fichier appelé est flash_diaporarma.xml. Vous pouvez utiliser cette balise dans les rubriques, articles, brèves et sur la page sommaire.

Exemples d’utilisation de la balise #FLASH_DIAPORAMA :

[(#FLASH_DIAPORAMA{600, 400, flash_diaporarma_2.xml})]
[(#FLASH_DIAPORAMA{100%, 400})]

Télécharger

Paramétrage

Aspect

Editez le fichier flash_diaporarma.xml.html ou le fichier squelette que vous avez passé en paramètre afin de personnaliser votre diaporama.

Vous pouvez changer la valeur des attributs de la balise Diaporama. Renseignez bien toutes les propriétés, mais faites bien attention à rester cohérent. Certaines propriétés se passent de commentaire. Pour celles moins explicites, je fournirai quelques explications au besoin.

On peut jouer avec les réglages, notamment sur les miniatures, la taille de la zone des miniatures la réduction des photos et miniatures (en pourcentage), le nombres de lignes de miniatures maximum, etc. Je n’ai pas réalisé de tests exhaustifs, donc, il se peut qu’il y ait des comportements bizarres selon les configurations.

	police="Arial"
	zonesMiniaturesOuvertureAuto="true"
	lectureAutomatique="false"
	delaiPhoto="4000"
	ombreSousPhoto="true"
	epaisseurLignesZonesMiniatures="0"
	hauteurTraitChargement = « 2 »
	hauteurZoneOver="50"
	alignementTexte="right"
	tailleTexte="10"
	tailleMiniature="70"
	nombreLignesMiniature="2"
	adapterColonne="true"
	vitesseAffichagePhoto="1"
	vitesseOuvertureZoneMiniature="2"
	reductionPhoto=".02"
	reductionMiniature=".3"
	couleurTexte="0x000000"
	couleurOmbre="0x000000"
	couleurFondBouton="0xCCCCCC"
	couleurFleche="0xFFFFFF"
	couleurBordFleche="0x000000"
	couleurFond="0xFFFFFF"
	couleurTexteChargement="0x000000"
	couleurFondChargement="0xFFFFFF"
	couleurTraitChargement = « 0x000000 »
	couleurFondBoutonLecturePause="0xFFFFFF"
	couleurBoutonLecturePause="0x000000"
	couleurFondMiniature="0xFFFFFF"
	couleurLignesZonesMiniatures="0x000000"
	couleurFondZoneMiniature="0x000000"
	couleurFondZoneOver="0xFFFFFF"
	alphaOmbre=".7"
	alphaFondBouton="0"
	alphaFleche="1"
	alphaBordFleche="1"
	alphaBoutonOver="1"
	alphaBoutonOut=".2"
	alphaFondZoneMiniature="1"
	alphaLignesZonesMiniatures="0"
	alphaFondChargement=".8"
	alphaFondZoneOver="1"
	alphaTraitChargement=".8"
	alphaBoutonLecturePause="1"
	alphaFondBoutonLecturePause=".8"
	texteChargement="<:flash_diaporama:chargement_flash_diaporama :>"
	texteOuvrirNouvelleFenetre="<:flash_diaporama:voir_image_nouvel_onglet_flash_diaporama :>"

Photos

Toujours dans le même fichier, écrivez les boucles de sélection de vos images. Attention à bien conserver la structure existante.

Vous pouvez donner un titre et une description à vos photos, ils seront affiché dans la zone sous la photo. Il est aussi possible de choisir l’alignement du texte en modifiant la propriété alignementTexte du fichier XML, elle accepte 4 valeurs : « left », « right », « center » et « justify ».

La limite théorique de taille des photos est de 2880 pixels en largeur et hauteur.

Cet exemple récupère les photos de la rubrique en cours, sinon celles de l’article en cours, puis en dernier recours toutes les photos du site.

<B_flashdiaporama>
<BOUCLE_flashdiaporama(DOCUMENTS){id_rubrique}{mode=image}{doublons}>
<Photo src="#URL_DOCUMENT"><Description><![CDATA[[(#TITRE) ][(#DESCRIPTIF)]]]></Description></Photo>
</BOUCLE_flashdiaporama>
</B_flashdiaporama>
<B_fd_article>
<BOUCLE_fd_article(DOCUMENTS){id_article}{mode=image}{doublons}>
<Photo src="#URL_DOCUMENT"><Description><![CDATA[[(#TITRE) ][(#DESCRIPTIF)]]]></Description></Photo>
</BOUCLE_fd_article>
</B_fd_article>
<BOUCLE_portfolio(DOCUMENTS){tout}{mode=image}{doublons}>
<Photo src="#URL_DOCUMENT"><Description><![CDATA[[(#TITRE) ][(#DESCRIPTIF)]]]></Description></Photo>
</BOUCLE_portfolio>
<//B_fd_article>
<//B_flashdiaporama>

Télécharger

Fichiers de langue

Editer le fichier de langue flash_diaporama_xx.php du répertoire lang afin de changer le texte de téléchargement des images et le texte du menu contextuel (clique droit). Vous pouvez ajouter d’autres fichiers de langues.

Exemple de squelette :

#HTTP_HEADER{Content-Type: text/xml; charset=utf-8}
<Diaporama
police="Arial"
zonesMiniaturesOuvertureAuto="true"
lectureAutomatique="false"
delaiPhoto="4000"
ombreSousPhoto="true"
epaisseurLignesZonesMiniatures="0"
hauteurTraitChargement = "2"
hauteurZoneOver="50"
alignementTexte="right"
tailleTexte="10"
tailleMiniature="70"
nombreLignesMiniature="2"
adapterColonne="true"
vitesseAffichagePhoto="1"
vitesseOuvertureZoneMiniature="2"
reductionPhoto=".02"
reductionMiniature=".3"
couleurTexte="0x000000"
couleurOmbre="0x000000"
couleurFondBouton="0xCCCCCC"
couleurFleche="0xFFFFFF"
couleurBordFleche="0x000000"
couleurFond="0xFFFFFF"
couleurTexteChargement="0x000000"
couleurFondChargement="0xFFFFFF"
couleurTraitChargement = "0x000000"
couleurFondBoutonLecturePause="0xFFFFFF"
couleurBoutonLecturePause="0x000000"
couleurFondMiniature="0xFFFFFF"
couleurLignesZonesMiniatures="0x000000"
couleurFondZoneMiniature="0x000000"
couleurFondZoneOver="0xFFFFFF"
alphaOmbre=".7"
alphaFondBouton="0"
alphaFleche="1"
alphaBordFleche="1"
alphaBoutonOver="1"
alphaBoutonOut=".2"
alphaFondZoneMiniature="1"
alphaLignesZonesMiniatures="0"
alphaFondChargement=".8"
alphaFondZoneOver="1"
alphaTraitChargement=".8"
alphaBoutonLecturePause="1"
alphaFondBoutonLecturePause=".8"
texteChargement="<:flash_diaporama:chargement_flash_diaporama:>"
texteOuvrirNouvelleFenetre="<:flash_diaporama:voir_image_nouvel_onglet_flash_diaporama:>">
<B_flashdiaporama>
<BOUCLE_flashdiaporama(DOCUMENTS){id_rubrique}{mode=image}{doublons}>
<Photo src="#URL_DOCUMENT"><Description><![CDATA[[(#TITRE) ][(#DESCRIPTIF)]]]></Description></Photo>
</BOUCLE_flashdiaporama>
</B_flashdiaporama>
<B_fd_article>
<BOUCLE_fd_article(DOCUMENTS){id_article}{mode=image}{doublons}>
<Photo src="#URL_DOCUMENT"><Description><![CDATA[[(#TITRE) ][(#DESCRIPTIF)]]]></Description></Photo>
</BOUCLE_fd_article>
</B_fd_article>
<BOUCLE_portfolio(DOCUMENTS){tout}{mode=image}{doublons}>
<Photo src="#URL_DOCUMENT"><Description><![CDATA[[(#TITRE) ][(#DESCRIPTIF)]]]></Description></Photo>
</BOUCLE_portfolio>
<//B_fd_article>
<//B_flashdiaporama>
</Diaporama>

Télécharger

Remarque

Ce plugin nécessite Flash Player 9 pour fonctionner correctement.

Si le fichier XML ne retourne aucune photo, le diaporama est tout simplement supprimé de la page.

On peut naviguer entre les photos avec TAB, ouvrir la photo courante dans un autre onglet par le menu contextuel.

Il est en état de développement, mais fonctionne normalement sur quelques sites en production.

Notes

Le SWF du plugin est inclus (et exclus si pas de photo à afficher) dans la page HTML grâce à la librairie javascript swfobject. Il est écrit en AS3 avec FlashDevelop et compilé avec Flex SDK.

Téléchargements

Plugin :

Flash diaporama

Sources :

Source du Flash

Vos commentaires

0 | 10 | 20

# Le 28 septembre 2011 à 21:08, par Jean Christophe Villeneuve En réponse à : Flash diaporama

Bonsoir

J’utilise avec bonheur ce plugin sur ce site
Tout fonctionne super sauf pour l’ineffable MSIE

En effet avec MSIE, les popups (fausses popups en css) qui s’ouvrent au survol des centres (les noms des communes à droite) passent au-dessous du diaporama. J’ai bien mis un z-index élevé (300) mais rien n’y fait.

Une idée de ce que je pourrais essayer ?
- # ^ Le 28 septembre 2011 à 21:13, par Jean Christophe Villeneuve En réponse à : Flash diaporama
  
  Je viens de m"apercevoir que le souci se pose aussi avec Chrome et Safari.
  Il n’y a qu’avec Firefox que ça roule.
Répondre à ce message
# Le 20 février 2011 à 16:05, par TOF En réponse à : Flash diaporama

salut

je vien d’instaler le pluging , sous spip 2.1.8
j’ai ajouter la balise dans le squellet article
j’ai bien un bloc de 600 par 400 qui apparait mais il est vide, rien que dale ???

detail, je ne sais pas quoi faire avec le fichier « source flash »

merci tof
- # ^ Le 27 juillet 2011 à 14:19, par Fred En réponse à : Flash diaporama
  
  Bonjour,
  
  j’ai exactement le même problème que TOF. Quelqu’un pourrait-il nous aider ?
  
  Merci,
  
  Fred
- # ^ Le 27 juillet 2011 à 14:28, par Fred En réponse à : Flash diaporama
  
  J’ai trouvé, il y a une faute de frappe dans l’exemple fourni !!!
  
  Il faut taper : flash_diaporama2.xml et non flash_diaporarma2.xml
  
  Fred
Répondre à ce message
# Le 29 avril 2011 à 12:14, par Michel En réponse à : Flash diaporama

Bonjour et merci pour cet excellent plugin...

J’en ai usé et abusé dans mon site perso http://mm.photos.online.fr pour y exposer un bon millier de photos
L’adaptation ne m’a posé aucun problème, que ça soit en page d’accueil (10 photos prises au hasard sur le site) ou dans les galeries (j’ai simplement utilisé dans la boule mot-clé « photos » affecté aux galeries de photos)

Je dirai pour ma part que ce plugin est stable et abouti
Encore merci et un grand bravo...
- # ^ Le 23 mai 2011 à 00:09, par Michel En réponse à : Flash diaporama
  
  Je viens « seulement » de me relire
  
  Il faut corriger ainsi !
  (j’ai simplement utilisé dans la boucle le mot-clé « photos » affecté aux galeries de photos)
Répondre à ce message
# Le 5 avril 2011 à 11:05, par jmarc dufour En réponse à : Flash diaporama

Bonjour,
bravo pour ce plugin,
Voici mon probleme :
si je met :

[(#FLASH_DIAPORAMA{570, 500, flash_diaporama2.xml})]

directement dans le squelette de mon article, aucun probleme, le plugin s’affiche très bien.

Mais si je fais un appel (avec mot-cle ) du genre :

<BOUCLE_flash-diaporama (ARTICLES){id_article}{type_mot==images}> <BOUCLE_mot3(MOTS){id_article}{titre=flash1}{0,1}> [(#INCLURE{fond=inc-flash-diaporama}{env=#ENV}{lang})]</BOUCLE_mot3> </BOUCLE_flash-diaporama>

avec dans le fichier « inc-flash-diaporama.html »
[(#FLASH_DIAPORAMA{570, 500, flash_diaporama2.xml})]

plus rien, le plugin ne s’affiche plus...
une idée ?

Pour info dans « flash_diaporama2.xml.html » j’ai :

<B_flashdiaporama> <BOUCLE_flashdiaporama(DOCUMENTS){id_rubrique}{mode=image}{doublons}> <Photo src="#URL_DOCUMENT"><Description><![CDATA[[(#TITRE) ][(#DESCRIPTIF)]]]></Description></Photo> </BOUCLE_flashdiaporama> </B_flashdiaporama> <B_fd_article> <BOUCLE_fd_article(DOCUMENTS){id_article}{mode=document}{extension IN png,jpg,gif}{doublons}> <Photo src="#URL_DOCUMENT"><Description><![CDATA[[(#TITRE) ][(#DESCRIPTIF)]]]></Description></Photo> </BOUCLE_fd_article> </B_fd_article> <//B_fd_article> <//B_flashdiaporama> </Diaporama>

merci d’avance,
Jmarc
- # ^ Le 5 avril 2011 à 23:42, par jmarc dufour En réponse à : Flash diaporama
 
 Bon,
 désolé pour le bruit,
 je viens de trouver une solution qui fonctionne bien
 (en procédant par éliminations..) :
 je mets :
 
 <BOUCLE_flash-diaporama (ARTICLES){id_article}> [(#FLASH_DIAPORAMA{570, 500, flash_diaporama2.xml})] </BOUCLE_flash-diaporama>
 
 dans le fichier (ici : inc-flash-diaporama.html) a appeler et le diaporama apparaît bien.
 
 Jmarc
Répondre à ce message
# Le 3 mars 2011 à 14:17, par DM En réponse à : Flash diaporama

Bonjour,
Le diaporama fonctionne sur ma page Accueil, en chargeant les fichiers images joints d’une rubrique. J’ai mis des titres aux images, en français et anglais avec les balises Multi.
Seulement, les titres images s’affichent toujours en français dans le diaporama, sans tenir compte du contexte de langue.

J’ai essayé diverses bidouilles dans ma boucle Spip du fichier xml ou dans la balise #FLASH_DIAPORAMA, rien trouvé qui marche.
Des solutions ? Est-ce possible de faire afficher le bon titre suivant une langue ?

D’autre part, est-il possible d’appeler ce diaporama par un modèle spip (<flash_diaporama|XXXXX> ?) dans le texte de tel ou tel article choisi ?

Merci d’avance pour toute piste utile

PS, ma boucle pour la home page :

<B_flashdiaporama> <BOUCLE_flashdiaporama(DOCUMENTS){id_rubrique=2}{par hasard}{mode=document}{extension IN png,jpg,gif}{doublons}> <Photo src="#URL_DOCUMENT"><Description><![CDATA[[(#TITRE) ][(#DESCRIPTIF)]]]></Description></Photo> </BOUCLE_flashdiaporama>

Répondre à ce message
# Le 16 février 2011 à 13:31, par DM En réponse à : Flash diaporama

Sympa ce plugin, il me va pour la home page. _Comment faire pour créer plusieurs types de diaporama différents (avec des paramètres et des boucles spip différentes) dans un même site ?

J’ai créé par ex un fichier flash_diapoarticles.xml, appelé par la balise [(#FLASH_DIAPORAMA{620,420,flash_diapoarticles.xml})], mais la zone Flash s’affiche vide d’images....

On dirait que seul le xml flash_diaporarma_2.xml peut être pris en compte ?

Merci pour toute info utile, DM
- # ^ Le 16 février 2011 à 13:49, par DM En réponse à : Flash diaporama
 
 Je me réponds, suite à d’autres essais.
 En fait on peut bien appeler d’autres xml, mea culpa.
 C’est la boucle fournit par l’exemple qui ne donne pas d’images, j’ai essayé autre chose, comme
 
 <BOUCLE_portfolio(DOCUMENTS){id_article}{mode=document}{extension IN png,jpg,gif}{!par date}{par num titre}{doublons}> <Photo src="#URL_DOCUMENT"><Description><![CDATA[[(#TITRE) ][(#DESCRIPTIF)]]]></Description></Photo> </BOUCLE_portfolio>
 
 , mais ça ne donne rien non plus.
 
 Quelle serait alors la bonne boucle pour intégrer les images d’un article dans le Flash diaporama ?
 
 Merci
Répondre à ce message
# Le 24 novembre 2010 à 14:04, par Lio En réponse à : Flash diaporama

juste pour signaler une petite faute de frappe dans ton exemple que j’ai bêtement copié/collé : diaporarma

[(#FLASH_DIAPORAMA600, 400, flash_diaporarma_2.xml)]
- # ^ Le 8 février 2011 à 09:18, par neofutur En réponse à : Flash diaporama
  
  effectivement pour que ca marche avec l exemple par defaut, il faut au choix :
  * remplacer flash_diaporarma_2.xml par flash_diaporarma_.xml
  ou
  * copier le ficher flash_diaporarma_.xml pour creer un nouveau fichier remplacer flash_diaporarma_2.xml
  
  avec l exemple par defaut, betement copie/colle, rien ne marche :p
Répondre à ce message
# Le 14 décembre 2010 à 21:25, par marjorie En réponse à : Flash diaporama

Bonjour,

je me sers de ce plugin pour afficher la prevue d’un manuel, chaque image = 1 page. J’aurais donc aimé que lorsqu’on clique sur une image, on puisse avoir un lien vers l’article où l’on trouve la page en plus grand ( pour chaque page, ou presque, j’ai créé un article qui reprend les textes et les images...). Est-ce possible d’inclure la possibilité de faire un lien ?
- # ^ Le 14 décembre 2010 à 21:26, par marjorie En réponse à : Flash diaporama
  
  j’en profite pour donner le lien pour montrer ce que ça donne :
  http://www.collegedevinci.com/-Manuel-en-ligne-de-grec-ancien-
- # ^ Le 15 décembre 2010 à 13:59, par marjorie En réponse à : Flash diaporama
  
  Je me réponds moi-même. j’ai un peu rusé en réussissant à afficher une image qui renvoie vers un article dans la zone de texte sous l’image...
  
  Je ne sais pas si la fonction que j’aurais aimée (un lien directement sur l’image) est possible.
- # ^ Le 8 février 2011 à 08:55, par neofutur En réponse à : Flash diaporama
  
  je suis aussi interesse par cette fonctionnalite, que chaque image du disporama pointe vers l url de l article concerne ( j utilise ce plugin pour afficher les images de tous les articles de la rubrique en cours )
Répondre à ce message
# Le 22 novembre 2010 à 21:18, par plouplou14 En réponse à : Flash diaporama

bonjour,
Je reprends l’administration d’un site SPIP 2.0.10 et j’ai intégré le flash diaporama dans mon sommaire. Il fonctionne très bien, sauf que je ne comprends pas pourquoi il ne m’affiche que 9 photos (de différents articles) alors que le site en contient plusieurs dizaines ?

désolé pour ma question, mais le diaporama balaye-t-il un repertoire en particulier ? sous www/local ? (nb : le site est hebergé chez ovh)
- # ^ Le 24 novembre 2010 à 14:48, par tubbs En réponse à : Flash diaporama
 
 Bonjour Plouplou,
 Tu peux écrire tes propres boucles de sélection de photos, sinon la boucle par défaut récupère les photos de la rubrique en cours, sinon celles de l’article en cours, puis en dernier recours toutes les photos du site.
- # ^ Le 13 décembre 2010 à 01:22, par seelig En réponse à : Flash diaporama
 
 Pour ne pas afficher 400 photos, j’ai ajouté des critères dans la boucle, qui ne sont pas interprétés (les 20 dernières images de la rubrique 21, par date inverse. Que faire ?
 
 <BOUCLE_flashdiaporama(DOCUMENTS){id_rubrique=21}{mode=image}{par date}{inverse}{doublons} {0, 20} >
Répondre à ce message
# Le 7 septembre 2010 à 01:39, par iFUz En réponse à : Flash diaporama

bonjour
j essaie de faire tourner ce plugin avec zpip et toute la nébuleuse, mais j ai l impression d’ écrire un bouquin en copier coller sans savoir qui est le héros !
Est ce que quelqu’ un l’ a testé positivement avec spip 21, doublé de zpip avec html5 le tout sur la page sommaire..... j m arrète là !
merci par avance

Répondre à ce message

0 | 10 | 20

Répondre à cet article

Qui êtes-vous ?

Nom [Se connecter]
Courriel (non publié)

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

Texte de votre message

Ajouter un document

gif, jpg, png

SPIP-Contrib

Flash diaporama

Démonstration

Installation

Utilisation

Paramétrage

Remarque

Notes

Téléchargements

Rubriques

Derniers commentaires

Compatibilité

Téléchargement(s)

Vos commentaires

Répondre à cet article

Ça discute par ici

Une licence pour un article

Plugin Parrainage

Formulaire de contact libre

Plugin Mot de Passe Compliqué

Navigation AJAX

Ça spipe par là

SPIP Blog

SPIP Party

SPIP Forums

SPIP-Zone

SPIP SVN