Accès rapide : Aller au contenu de l'article |  Aller au menu |  Liste complète des articles  |  Aide  |  Contact |
bandeau

Accueil > Aides pour les nuls > Diaporama

Diaporama



FTP : installation et usage

Un album photos
Une vidéo

 Installer plein d’images sur le site spip

Il faut disposer d’un FTP et du mot de passe de connexion. Aller dans le site distant : dans le dossier www, on trouve un dossier tmp et, dans ce dernier on trouve un dossier upload.

C’est dans ce dossier « upload » qu’il faut envoyer toutes les photos par PTP. C’est assez facile car l’envoi se fait sans empêcher de continuer un autre travail sur l’ordinateur.

Ensuite, il faut cliquer en bas à droite de l’article,sur le petit triangle noir.

upload-1

On trouve alors un autre écran, cliquer alors sur le triangle noir qui se trouve juste au dessus de « choisir ». On peut ainsi mettre quelques photos seulement ou les installer toutes en même temps. Quand le choix est fait, cliquer sur « choisir »

upload-2

Si l’opération est réussie, il vaut mieux supprimer les fichiers du dossier upload (Spip en crée une copie à un autre endroit du serveur).


 Simple : le plugin DIAPO

On trouve explications et téléchargement ici : http://www.spip-contrib.net/Plugin-Diapo. Hélas il ne fonctionne plus avec la version 2.1 de spip.

Quand il est installé et activé, il suffit d’écrire <diapoXXX> pour voir apparaître toutes les images de la page XXX.

Comment faire ? voir plus loin


 Un diaporama powerpoint

Inserer1

Regarder, en bas de page, l’outil « joindre un document » et cliquer sur le petit triangle noir qui se trouve, à gauche, à côté de Télécharger à partir de votre ordinateur.

Il s’ouvre alors la fenêtre ci-contre :

Inserer2

 

Entrer l’adresse internet du diaporama powerpoint
Ici pour moi c’est :
http://www.journal-la-mee.fr/IMG/ppt/PabloNeruda2007.ppt

Cliquer sur Choisir

Puis revenir sur la page et cliquer sur « modifier la page » et y mettre le document qui est ici :

Pablo Neruda

Enregistrer et tout est bon


 Insérer un diaporama dans une page

C’est pas si compliqué qu’on pourrait le penser.
Voir le document détaillé ci-joint.

Faire un diaporama, explications détaillées

Limites :
– cela ne va pas pour un site contraint à l’accessibilité aux aveugles, à cause de l’utilisation d’un tableau
– le validateur W3c refuse le « formname » mais je n’ai pas trouvé ce qu’il fallait mettre


  Insérer un diaporama javascript : compliqué

Pour un spipien chevronné, le javascript c’est pas fameux. Moi pour l’instant c’est ce que j’ai trouvé de plus facile.

1) quelque chose à mettre dans « article.html » (une bonne fois pour toutes)
2) préparer les photos
3) quelque chose à mettre dans la page souhaitée.

Donc on y va :

1) dans la page « article.html », mettre le script suivant entre <head> .... </head> :

<!-- DEBUT DU SCRIPT DIAPORAMA-->
<script
type="text/javascript">
var current = 0;

function next(){ // forward one image
if(document.formname.slide[current+1]){
document.images.show.src = document.formname.slide[current+1].value;
document.formname.slide.selectedIndex = ++current;}
else{first();}}

function previous(){ // back on image
if((current-1) >= 0){
document.images.show.src = document.formname.slide[current-1].value;
document.formname.slide.selectedIndex= --current;}
else{last();}}

function first(){ // jump to first image
current=0;
document.images.show.src = document.formname.slide[0].value;
document.formname.slide.selectedIndex=0;}

function last(){ // this is jump to last image
current=(document.formname.slide.length-1);
document.images.show.src = document.formname.slide[current].value;
document.formname.slide.selectedIndex=current;}

function ap(text){ // this controls the auto-play and/or auto-stop
document.formname.slidebutton.value=(text == "Stop") ? "Start" : "Stop";
rotate();}

function change(){ // this is for the pulldown menu
current=document.formname.slide.selectedIndex;
document.images.show.src = document.formname.slide[current].value;}

function rotate() {
if (document.formname.slidebutton.value == "Stop") {
current = (current == document.formname.slide.length-1) ? 0 : current+1;
document.images.show.src = document.formname.slide[current].value;
document.formname.slide.selectedIndex = current;
window.setTimeout("rotate()", 5000);}}
// End --></script> </p>

<!-- FIN DU SCRIPT DIAPORAMA-->

Quand c’est fait, envoyer « article.html » vers le site distant. Et on n’en parle plus. Ca marchera pour tous les diaporamas du site.

On peut aussi ne pas mettre le script ci-dessus dans article.html, mais le mettre à chaque page où l’on souhaite installer un diaporama (moi je le mets dans le post-scriptum). Voir ce script dans le document ci-dessous

txt/script-diaporama
 
 
 
 
 

2) préparer les photos. Si l’on veut faire des photos
sur les « pompiers », préparer un dossier « pompiers »
dans lequel il y a dans l’ordre : photo1.jpg, photo2.jpg, photo3.jpg etc.

Puis envoyer ce dossier « pompiers » dans le site distant,
en regardant bien son adresse.
Pour vérifier : taper l’adresse, par exemple du genre :
http://MonSite/pompiers/photo1.jpg
et voir si on trouve bien la photo souhaitée.
Cette adresse va re-servir tout de suite.

Pour moi ce sera ici :
http://www.journal-la-mee.fr/IMG/jpg/pompiers/photo1.jpg

3) si l’on souhaite mettre le diaporama à la page 5011,comme ici,
taper ceci, en guise de texte, dans la page 5011 :

<form name="formname" action="index.php">
<div style="text-align: center;"><table cellspacing="1" cellpadding="4" bgcolor="#FFF4c9" summary="diaporama"  >
   <tr>
     <td align="center"><b>DIAPORAMA</b> </td>
   </tr>

   <tr>
     <td align="center" bgcolor="white" width="400" height="300"><img src="http://www.journal-la-mee.fr/IMG/jpg/pompiers/photo1.jpg" name="show" width="350"  alt="" /></td>
   </tr>
   <tr>
     <td align="center" bgcolor="#660033"><select name="slide" onchange="change();" size="1">
       <option value="http://www.journal-la-mee.fr/IMG/jpg/pompiers/photo1.jpg" selected="selected"  >Un PMA</option>
       <option value="http://www.journal-la-mee.fr/IMG/jpg/pompiers/photo2.jpg">Le matériel de montage</option>
       <option value="http://www.journal-la-mee.fr/IMG/jpg/pompiers/photo3.jpg">Le matériel de soins</option>
       <option value="http://www.journal-la-mee.fr/IMG/jpg/pompiers/photo4.jpg">Tapis de sol</option>
       <option value="http://www.journal-la-mee.fr/IMG/jpg/pompiers/photo5.jpg">Dérouler la toile</option>
       <option value="http://www.journal-la-mee.fr/IMG/jpg/pompiers/photo6.jpg">Déployer la toile</option>
       <option value="http://www.journal-la-mee.fr/IMG/jpg/pompiers/photo7.jpg">Quatre bouches de gonflage et un compresseur</option>
       <option value="http://www.journal-la-mee.fr/IMG/jpg/pompiers/photo8.jpg">Des hommes, arc-boutés, retiennent la toile</option>
       <option value="http://www.journal-la-mee.fr/IMG/jpg/pompiers/photo9.jpg">Barres métalliques pour écarter les boudins d'air</option>
       <option value="http://www.journal-la-mee.fr/IMG/jpg/pompiers/photo10.jpg">Cela prend tournure</option>
       <option value="http://www.journal-la-mee.fr/IMG/jpg/pompiers/photo11.jpg">Installer les projecteurs</option>
       <option value="http://www.journal-la-mee.fr/IMG/jpg/pompiers/photo12.jpg">Le PMA, vu de l'extérieur</option>
       <option value="http://www.journal-la-mee.fr/IMG/jpg/pompiers/photo13.jpg">Le PMA, vu de l'intérieur</option>
       <option value="http://www.journal-la-mee.fr/IMG/jpg/pompiers/photo14.jpg">Dernières explications</option>
       <option value="http://www.journal-la-mee.fr/IMG/jpg/pompiers/photo15.jpg">25 minutes de montage. Merci les Pompiers</option>
       </select></td>
   </tr>
   <tr>
     <td align="center" bgcolor="#C0C0C0"><img src="http://www.journal-la-mee.fr/IMG/jpg/FL/G-fin.jpg" onclick="first();"title="Début" alt="" />
     <img src="http://www.journal-la-mee.fr/IMG/jpg/FL/G.jpg" onclick="previous();" title="Précédente" alt="" /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
     <img src="http://www.journal-la-mee.fr/IMG/jpg/FL/D.jpg" onclick="next();" title="Suivante"  alt="" />
     <img src="http://www.journal-la-mee.fr/IMG/jpg/FL/D-fin.jpg" onclick="last();" title="Fin" alt="" />
     </td>
   </tr>
 </table>
</div>
</form>

(en adaptant à votre situation)
Attention de bien respecter les espaces, un de plus ou un de moins, des fois, ça peut faire « des choses » !

Pour vous y repérer facilement, voir les documents PSPad ci-contre :

Diapo-lisez-moi
Diaporama-pompiers

Cela donne ceci :

DIAPORAMA
 

Attention, il n’est possible d’avoir qu’un seul diaporama par page !

J’ai trouvé des explications ici :
http://www.toulouse-renaissance.net/c_outils/c_diaporama_direction.htm

Un diaporama sans javascript
... on peut donc faire sans cela. Mais je n’ai pas bien compris.
Quelques explications ici :
http://www.spip-contrib.net/DiapoSpip-squelette-de,13

On peut désactiver l’interdiction du javascript,
mais cela me paraît difficile pour moi :
http://www.mmt-fr.org/article166.html

 Jolis boutons

En réalité, au lieu d’avoir des boutons ordinaires du type :
j’ai voulu avoir une petite image :

 

Pour cela, j’ai d’abord fabriqué l’image, que j’ai envoyée par ftp
voir : http://www.journal-la-mee.fr/IMG/jpg/FL/G-fin.jpg

Puis j’ai remplacé :

<input type="button" onclick="first();" value="|&lt;&lt;" title="Début" style="border:1 SOLID #e6e6e6;">

par

<img src="http://www.journal-la-mee.fr/IMG/jpg/FL/G-fin.jpg" onclick="first();"title="Début"  alt="">

En fait : input type="button" value="|&lt;&lt;" SOLID #e6e6e6;
a été remplacé par : img src=« http://www.journal-la-mee.fr/IMG/jpg/FL/G-fin.jpg »

Pour un diaporama permanent, voir ici :
http://so.fun.free.fr/modules/blog/article.php?id_article=16

mais attention :
1) il faut bien dimensionner les photos avant toute chose
2) il faut mettre le script dans une page « article.html » ou « sommaire.html » ou « recherche.html » mais alors le diaporama se trouvera dans toutes les pages de ce type.

Cela peut être bien si, au sommaire, on souhaite faire défiler une série de photos. (Mais on ne peut pas mettre de légende)


On peut aussi

 récupérer des vidéos

Exemples :

Le Monde.fr : Les images de la semaine du 20 au 24

 Un générateur de diaporamas : slide.com

– a) aller sur le site http://www.slide.com/
– b) s’inscrire .... et ne pas oublier ses codes !
– c) on peut tout de suite fabriquer son diaporama. Pour cela :

    • 1. Cliquer sur « créer un slide show » (nom anglais de diaporama)
    • 2. Choisir le style dans le cadre de droite, moi j’ai choisi du classique
      en cliquant sur « sliding » ou sur « gallery »
    • 3. Cliquer sur « mes fichiers » ou autre chose
    • 4. Cliquer sur « browse » pour sélectionner les photos
      il est toujours possible, après coup, de changer l’ordre des photos
      ou le nom des photos, et la couleur du fond
    • 5. Cliquer sur « sauvegarder »
    • 6. On découvre alors le code à copier dans la page du site, soit directement, soit en mode source.

Attention, il faut modifier le code pour éviter les erreurs de validation. Il faut mettre celui-ci :

<div style="text-align: center;"><object type="application/x-shockwave-flash" data="http://widget-6b.slide.com/widgets/slideticker.swf" style="width:482px;height:400px;" ><param name="flashvars" value="site=widget-6b.slide.com&channel=576460752306308971&cy=be&il=1" /></object></div>

Voilà ce que ça donne :

Quelques explications :

<div style="text-align: center;">... </div> : ceci crée une boite centrée dans la page.

<object type="application/x-shockwave-flash" data="http://widget-6b.slide.com/widgets/slideticker.swf" : ceci met le diaporama qui se trouve à l'adresse :  http://widget-6b.slide.com/widgets/slideticker.swf

On peut aussi utiliser http://www.rockyou.com et http://www.crazyprofile.com ................. c’est aussi facile et plus discret. Problème : tout en anglais (mais assez facile à comprendre). Qui fera quelque chose en français ?