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

Discussion

29 discussions

  • Affichage :
    Avec le squelette :

    	<BOUCLE_fd_article(DOCUMENTS){id_article}{mode=image}{doublons}{vu = non}>
    	[(#FLASH_DIAPORAMA{600, 400})]
    	</BOUCLE_fd_article>

    Je me retrouve avec l’affichahe :

    {600,400} à la place de l’affichage attendu
    pourtant cela a déja marché comme cela il me semble.

     ?!?

    Répondre à ce message

  • Bonjour,

    j’utilise ce plugin avec succès dans un squelette mais j’aimerais l’utiliser directement dans le texte d’un article.
    j’ai donc entrepris de créer un modele spip
    après plusieurs essais j’ai constaté qu’il y avait un problème dans la récupération des paramètres du contexte.

    ci-dessous les codes des différents fichiers.

    ----
    
    fichier modele "mod_flashdiaporama.html"
    
    <!-- Flash diaporama -->
    <div>
    
    [(#FLASH_DIAPORAMA{600, 400, flash_diaporama.article})]
    
    </div>
    
    ----
    
    fichier xml  (juste la fin) 
    <HTML>
    <BOUCLE_flashdiaporama(DOCUMENTS){id_article}{mode=document} {extension IN png,jpg,gif}>
    <Photo src="#URL_DOCUMENT"><Description><![CDATA[[<b>(#TITRE)</b><br/>][(#DESCRIPTIF)]]]></Description></Photo>
    </BOUCLE_flashdiaporama>
    </HTML>
    
    
    
    ----
    
    texte dans mon article
    
    
    <mod_flashdiaporama|id_article=242>
    
    
    ----
    
    Résultat :
    
    rien n'est sélectionné aucune image
    
    mais si je force en dur dans le code le parametre id_article=242 alors cela fonctionne.
    
    <BOUCLE_flashdiaporama(DOCUMENTS){id_article=242}{mode=document} {extension IN png,jpg,gif}>
    <Photo src="#URL_DOCUMENT"><Description><![CDATA[[<b>(#TITRE)</b><br/>][(#DESCRIPTIF)]]]></Description></Photo>
    </BOUCLE_flashdiaporama>
    
    </Diaporama>

    y-t-il quelqu’un qui a déjà testé l’utilisation du plugin dans ce mode ?
    ou qui pourrait m’aider ?

    merci d’avance.

    Répondre à ce message

  • 2

    Bonjour

    Quelqu’un a t’il un site qui tourne avec ce plugins ?
    Je tente depuis 2 jours de le mettre en route sur un site Zpip mais rien ne veux marchez.
    Qui aurais ça ?

    • Doctor Bug

      Bonjour,

      je l’ai mis en place sur ce site SPIP2.1 : http://dtax.free.fr

      Ça fonctionne bien, je vais essayer de voir s’il fonctionne sur un SPIP3.0-RC

    • Fonctionne toujours parfaitement sur plus de 200 articles après une mise à jour sous SPIP 3.0.4 (et même avec IE)
      http://mm.photos.online.fr
      (voir mes « posts » d’avril et mai 2011 un peu plus bas - même si je ne l’utilise plus sur ma page d’accueil, ayant fait depuis d’autres choix de présentation)

    Répondre à ce message

  • 2

    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 ?

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

    • Même souci. Il faudrait ajouter un wmode sur le fichier flash_diaporama.php, mais je ne vois pas trop comment dans le javascript...

    Répondre à ce message

  • 2

    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

    • Bonjour,

      j’ai exactement le même problème que TOF. Quelqu’un pourrait-il nous aider ?

      Merci,

      Fred

    • 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

  • 1

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

    • Michel

      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

  • 1

    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[[<b>(#TITRE)</b><br/>][(#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[[<b>(#TITRE)</b><br/>][(#DESCRIPTIF)]]]></Description></Photo>
    </BOUCLE_fd_article>
    </B_fd_article>
    
    <//B_fd_article>
    <//B_flashdiaporama>
    </Diaporama>

    merci d’avance,
    Jmarc

    • 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

  • 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[[<b>(#TITRE)</b><br/>][(#DESCRIPTIF)]]]></Description></Photo>
    </BOUCLE_flashdiaporama>

    Répondre à ce message

  • 1

    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

    • 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[[<b>(#TITRE)</b><br/>][(#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

  • 1

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

    • 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

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