Flash diaporama

Publié le : 1er avril 2010 – Dernière modification le 2 octobre 2019 – par tubbs – 68 commentaires

1
2
3
4
5
28 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})]

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

Discussion

5 ans 1 an 3 mois Sans limite
par date
Filtrer

29 discussions

  • 3
    marjorie

    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 ?

    Répondre à ce 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)

    • tubbs

      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.

    • seelig

      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

  • iFUz

    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

  • 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

    Répondre à ce message

  • Bat

    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

    Répondre à ce message

  • cmarty

    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.

    Répondre à ce message

  • roro

    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

    Répondre à ce 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.

    Répondre à ce 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

    Répondre à ce 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

    • john

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

    • Julien

      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 ?

    • tubbs

      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.

    • Julien

      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 !

    • Julien

      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 3e 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 ?

    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 :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

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.

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

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom