Flash diaporama

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})]

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[[<b>(#TITRE)</b><br/>][(#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[[<b>(#TITRE)</b><br/>][(#DESCRIPTIF)]]]></Description></Photo>
</BOUCLE_fd_article>
</B_fd_article>
<BOUCLE_portfolio(DOCUMENTS){tout}{mode=image}{doublons}>
<Photo src="#URL_DOCUMENT"><Description><![CDATA[[<b>(#TITRE)</b><br/>][(#DESCRIPTIF)]]]></Description></Photo>
</BOUCLE_portfolio>
<//B_fd_article>
<//B_flashdiaporama>

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[[<b>(#TITRE)</b><br/>][(#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[[<b>(#TITRE)</b><br/>][(#DESCRIPTIF)]]]></Description></Photo>
</BOUCLE_fd_article>
</B_fd_article>
<BOUCLE_portfolio(DOCUMENTS){tout}{mode=image}{doublons}>
<Photo src="#URL_DOCUMENT"><Description><![CDATA[[<b>(#TITRE)</b><br/>][(#DESCRIPTIF)]]]></Description></Photo>
</BOUCLE_portfolio>
<//B_fd_article>
<//B_flashdiaporama>
</Diaporama>

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

updated on 2 October 2019

Discussion

29 discussions

  • 3

    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?

    Reply to this message

  • 2
    plouplou14

    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)

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

    • 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} >

    Reply to this message

  • 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

    Reply to this message

  • Jean-Jacques

    Bonjour !

    D’abord, je trouve ce plugin vraiment très bien et plein de possibilités.
    Malgré tout le bien que l’on peut penser de jquery and co, flash semble plus performant, plus fluide, ... et en plus quand il y a une parfaite intégration avec notre CMS favori ..

    Ensuite, je me permets (quel toupet !) une toute petite remarque et qui ne concerne pas que cet article : la documentation est en train de glisser vers un mode forum, ou chacun d’entre nous jargonne en spip sans se rendre compte que les débutants n’y comprennent plus rien ...

    Mais avant tout merci
    Cordialement

    Reply to this message

  • Bonjour,

    J’ai installé ce plugin sur mon site ( http://www.lp-jard.fr/spip ) et il fonctionne très bien.

    Seulement, j’aurais voulu savoir si il était possible de trouver un diaporama où le chargement des images se fait une par une mais sans utiliser Flash ??

    Meric beaucoup

    Reply to this message

  • Bonjour,

    J’ai pu installer ce plugin en suivant bêtement les instructions données...
    Bravo pour ce diapo, le rendu est très efficace, j’en suis très contente !

    Cependant, j’ai un soucis d’affichage. Mes photos -qui sont pourtant de bonne qualité sur photoshop- sortent très mal à l’écran (voir photo jointe). Les textes sont quasiment illisibles ... J’ai essayé de modifier la taille, le format, de mes images, rien à faire...

    Avez-vous déjà rencontré ce problème d’affichage avec ce plugin? Quelqu’un aurai-t-il une idée de la nature du problème ? (format du fichier, taille de l’image, format du pixel, mon navigateur...?)

    Merci d’avance pour vos réponses.

    Reply to this message

  • Bonjour à tous,

    Je cherche à mettre ce pluging sur mon site en local, je débute en spip et je voudrais comprendre quelques trucs.

    Quand vous dites “#INSERT_HEAD dans vos squelettes etc”
    Je place cela entre tout les

    des pages contenu dans le squelette ?

    Et pour : “ 1.
    [(#FLASH_DIAPORAMA600, 400, flash_diaporarma_2.xml)]
    2.
    [(#FLASH_DIAPORAMA100%, 400)]”

    Je vais de même dans tout les body de mes squelettes ?

    Et pour les images je les renseignent dans le xml ou je les lies via ajouter document dans mon articles ?

    Merci d’avance à vous.
    Cordialement

    Reply to this message

  • Bonsoir,

    Bon désolé ça fait 6h que j’essaie tout ce qui est écrit rien ne fonctionne.

    Qui à dit que c’était facile à mettre en place ??

    J’ai insérer la balise head et le reste au bon endroit.

    J’ai bien un bloc qui apparait sur ma page je l’ai entouré avec des +++ en haut et en bas du code qui
    devrait permettre l’affichage mais y à rien entre...

    Flash est activé.

    Est-ce que c’est déjà arrivé parmi vous ?

    J’utilise le dernier spip je l’ai télécharger cette après-midi.

    Reply to this message

  • Patrick

    Bonjour,
    Le plugin fonctionne tout à fait à ma convenance, aussi bien en Spip201 qu’en Spip210.
    Question “graphique”:
    J’aimerais mettre une couleur de fond transparente à la place de couleurFond=“0xE2E2E2” dans les fichier “flash_diaporama.xml.html”.
    J’ai fait plusieurs essais de codes que je connaissais (transparent, none), tous me renvoient un fond noir.
    Sinon, bien sur, le code couleur est bien répercuté (il s’agit ici d’un gris).
    Quelqu’un a t il une idée?
    Ou cela dépend il du swf, et on n’y peut rien?
    Merci

    Reply to this message

  • 5
    Manu_TJ

    Merci pour ce plugin sympa et facile à mettre en oeuvre.
    Sur mon site, lors de l’activation, j’avais un certain nombre de choses qui ne fonctionnaient plus. Après recherche, je pense en avoir trouvé la cause : le fichier flash_diaporama_head.php contient le code suivant :

    <?php
    function flash_diaporama_insert_head($flux)
    {
        $flux ='<script src="'._DIR_PLUGIN_FLASH_DIAPORAMA.'javascript/swfobject.js" type="text/javascript"></script>';
        return $flux;
    }
    ?>

    D’après moi, le code devrait être

    <?php
    function flash_diaporama_insert_head($flux)
    {
        $flux .='<script src="'._DIR_PLUGIN_FLASH_DIAPORAMA.'javascript/swfobject.js" type="text/javascript"></script>';
        return $flux;
    }
    ?>

    En effet, tous les appels d’autres plugins cherchant à insérer du code entre les balises head sont ignorés, l’ajout du . avant le = rétablit le flux.

    A+
    Manu

    • bonjour, peut-on avoir un exemple en action.
      Merci.

    • Bonjour !
      Je suis en SPIP 2.1.
      J’ai installé le pluin, déposé la balise dans mon fichier article.html mais quelquesoit l’article, il m’affiche les photos de l’article 167 de mon site.
      Je n’ai aps modifier le fichier xml.html fournit par défaut
      J’ai mis la balise par défaut sans sprécifié le dernier argument qui correspndant on nom du fichier xml.

      J’avoue ne rien y comprendre...
      Quelqu’un a une idée ?

    • Bonjour,
      Est-ce que tu n’as des images que dans l’article 167 ? Si oui, tu devrais modifier les boucles du fichier par défaut, ou en créer un autre dans ton répertoire squelette qui ne récupère que les photos des articles et que tu passerai en paramètre, par exemple :

      <BOUCLE_fd_article(DOCUMENTS){id_article}{mode=image}{doublons}>
      <Photo src="#URL_DOCUMENT"><Description><![CDATA[[<b>(#TITRE)</b><br/>][(#DESCRIPTIF)]]]></Description></Photo>
      </BOUCLE_fd_article>

      Par défaut, le fichier XML 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.
      J’espère que ça pourra t’aider.

    • Si je met la boucle ci-dessus dans le fichier xml a la place de l’autre, le lecteur flash ne s’affiche pas.
      Je précise que chaque article qui existe contient des photos toutes au format jpp.

      Si je laisse les boucles par défaut il m’affiche les photos de l’article numéro 167 quelquesoit l’article consulté.
      Si je définit un autre fichier XML aussi bien au sein du squelette qu’au sein du dossiser du plugin, j’ai soit un joli rectangle blanc d’affiché sans photo, soit pas de lecteur flash dutout.

      J’ai comme une impression que la balise se recalcule pas forcment bien en dynamique en fonction de l’id_article. Apres chaque manipulation, je prend soin de vider le cache au cas ou.
      Ca ne marche toujours pas, c’est vraiment étrange !

    • On est bien daccord... Pour que le lecteur flash s’affiche au sein de ma page article.html, j’ajoute la balise #FLAS.... en specifnant la taille (100%,500 et pas de 3ème argument car fichier xml par defaut).
      Je modifie ensuite le fichier xml en faisant simplement la boucle fd_article cité ci-dessus et c’est tout non ?
      Ma balise est bien interpretée dans la page html mais le fichier xml me pose des problèmes, pourtant j’ai simplement modifé la couleur de fond aui était en 0xffff pour mettre 0x0000 (fond noir au lieu de blanc) et j’ai modifier la boucle pour ne traiter que les article en la remplcacant par celle citée ci-dessus. Et rien ne s’affiche.

      Une idée ?

    Reply to this message

Comment on this article

Who are you?
  • [Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom