Démonstration
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 :
- Sources :
Discussions par date d’activité
29 discussions
Affichage :
Avec le squelette :
Je me retrouve avec l’affichahe :
{600,400}
à la place de l’affichage attendupourtant 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.
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
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 ?
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
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
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
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...
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
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 :
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 :
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 :
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 :
Répondre à ce message
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
, 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
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 :
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 : |