OVH Cloud OVH Cloud

Faire défiler des images (pour SAM peut-être)

26 réponses
Avatar
jmrw
Bonjour,

Sur la page http://www.jmrw.com/Chess/Tableau_echecs/index.htm se trouvent
environ 500 images jpg que je voudrais faire défiler à une certaine cadence.

Y a-t-il une solution javascript pour faire cela?

Merci

jmrw

10 réponses

1 2 3
Avatar
jmrw
Problème Internet Explorer réglé
Ajout d'un choix pour la vitesse de défilement

Amélioration possible : choix aléatoire des images et non toujours le même.

jmrw

"SAM" a écrit dans le message
de news: 505cd006$0$21244$
Le 21/09/12 00:57, SAM a écrit :

Méthode par changement d'image :



Tentative de nettoyage ! ! ! !
hors les images, la 1 : 250ko, la 2 : 190 ko, l'originale : 350 ko

Mise en forme avec des tables
<http://cjoint.com/?BIvwv7FHUnK>
comme je n'ai rien ni compris à ces span et em stylés n'importe comment
zou ! je les ai un peu zappés (pas recontrôlé les codes de ...)

Mise en forme sans table :
<http://cjoint.com/?BIvwFLk9vXH>
cette fois avec simplification+contrôle des span
(enfin ... des em puisk'y a plus de span)


--
Stéphane Moriaux avec/with iMac-intel
Avatar
jmrw
petit problème :
"Click on the painting to get informations. There click on back-arrow on to
resume the
slideshow"
"click on back-arrow to resume the slideshow"" marche sous Firefox mais
pas sous IE.

jmrw



"SAM" a écrit dans le message
de news: 505cd006$0$21244$
Le 21/09/12 00:57, SAM a écrit :

Méthode par changement d'image :



Tentative de nettoyage ! ! ! !
hors les images, la 1 : 250ko, la 2 : 190 ko, l'originale : 350 ko

Mise en forme avec des tables
<http://cjoint.com/?BIvwv7FHUnK>
comme je n'ai rien ni compris à ces span et em stylés n'importe comment
zou ! je les ai un peu zappés (pas recontrôlé les codes de ...)

Mise en forme sans table :
<http://cjoint.com/?BIvwFLk9vXH>
cette fois avec simplification+contrôle des span
(enfin ... des em puisk'y a plus de span)


--
Stéphane Moriaux avec/with iMac-intel
Avatar
SAM
Le 23/09/12 09:28, jmrw a écrit :
petit problème :
"Click on the painting to get informations. There click on back-arrow on to
resume the slideshow"



Je n'ai pas vu ça.
Ça vient de sortir ?

(et en anglishe en plus ?!)

"click on back-arrow to resume the slideshow"" marche sous Firefox mais
pas sous IE.



Oui Eh ben non je ne suis pas là pour seconder M$ ! ! !
Quelle version d'IE ?


En fait c'est déjà assez extra que le "back button", au moins avec
Firefox, Safari et bien d'autres, revienne sur la page index des
tableaux, on aurait aussi bien pu s’attendre à ce que ça aille au
tableau précédent (comme avec le lien fait pour en haut de fenêtre)


Pour le coup du mode aléatoire ... ça va pas faire propre si ça affiche
2 ou 3 fois de suite la même vignette.
Et puis ... combien vont aller jusqu'à la 385 ième ?

Pour le réglage de vitesse :

<p>vitesse :
<button onclick="tempo += 500;if(tempo<1500)tempo00">-</button>
<button onclick="tempo -= 500">+</button>

Le coup de faire charger les images lourdes au lieu des imagettes (déjà
vues et en cache) n'est pas une bonne idée du tout. Du moins avec le
script tel qu'il est. Il faudrait à minima attendre de précharger la vue
suivante avant de changer de vue.

Là, perso, j'ai parfois des blancs assez longuets et beaucoup d’autres
plus court. L'ensemble est assez désagréable.

Et je te dis pas à 1 seconde on n'a quasi que du blanc, les images
n'apparaissant qu'en coups de flashes !

Il faut que tu testes :
- avec les pages et images sur un serveur distant
- en ayant préalablement vidé le cache du navigateur


--
Stéphane Moriaux avec/with iMac-intel
Avatar
jmrw
Je vais examiner tes suggestions.

Pour le moment j'ai renommé les images qui vont maintenant de 000.jpg à
516.jpg
Cela devrait permettre d'alléger le code.

Je pense maintenant à afficher les légendes en dessous des images dans le
diaporama.
Peut-être simplement créer un tableau avec les légendes.

Merci

jmrw








"SAM" a écrit dans le message
de news: 505fb09d$0$23473$
Le 23/09/12 09:28, jmrw a écrit :
petit problème :
"Click on the painting to get informations. There click on back-arrow on
to
resume the slideshow"



Je n'ai pas vu ça.
Ça vient de sortir ?

(et en anglishe en plus ?!)

"click on back-arrow to resume the slideshow"" marche sous Firefox mais
pas sous IE.



Oui Eh ben non je ne suis pas là pour seconder M$ ! ! !
Quelle version d'IE ?


En fait c'est déjà assez extra que le "back button", au moins avec
Firefox, Safari et bien d'autres, revienne sur la page index des tableaux,
on aurait aussi bien pu s’attendre à ce que ça aille au tableau précédent
(comme avec le lien fait pour en haut de fenêtre)


Pour le coup du mode aléatoire ... ça va pas faire propre si ça affiche 2
ou 3 fois de suite la même vignette.
Et puis ... combien vont aller jusqu'à la 385 ième ?

Pour le réglage de vitesse :

<p>vitesse :
<button onclick="tempo += 500;if(tempo<1500)tempo00">-</button>
<button onclick="tempo -= 500">+</button>

Le coup de faire charger les images lourdes au lieu des imagettes (déjà
vues et en cache) n'est pas une bonne idée du tout. Du moins avec le
script tel qu'il est. Il faudrait à minima attendre de précharger la vue
suivante avant de changer de vue.

Là, perso, j'ai parfois des blancs assez longuets et beaucoup d’autres
plus court. L'ensemble est assez désagréable.

Et je te dis pas à 1 seconde on n'a quasi que du blanc, les images
n'apparaissant qu'en coups de flashes !

Il faut que tu testes :
- avec les pages et images sur un serveur distant
- en ayant préalablement vidé le cache du navigateur


--
Stéphane Moriaux avec/with iMac-intel
Avatar
jmrw
Je fais comment pour afficher une zone de texte destinée à apparaître sous
les images à l'aide de la foncion diaporama() ?

jmw
Avatar
SAM
Le 24/09/12 12:19, jmrw a écrit :
Je vais examiner tes suggestions.

Pour le moment j'ai renommé les images qui vont maintenant de 000.jpg à
516.jpg
Cela devrait permettre d'alléger le code.



si les pages (tableaux ou autre) en relation avec
sont de même "nom"

Je pense maintenant à afficher les légendes en dessous des images dans le
diaporama.
Peut-être simplement créer un tableau avec les légendes.



Exactement.

et plus besoin de celui avec les Nº des images/pages corrects puisque
tout est bien ficelé, hein ?

cependant ... essayer de faire court !

Je ne vais pas te parler d'Ajax (qui permet de charger un peu ce qu'on
veut et l'insérer dans la page déjà affichée) si tu as déjà un peu de
mal avec le JS "standard" "de base" ;-)


--
Stéphane Moriaux avec/with iMac-intel
Avatar
SAM
Le 24/09/12 14:17, jmrw a écrit :
Je fais comment pour afficher une zone de texte destinée à apparaître sous
les images à l'aide de la fonction diaporama() ?



Ah Ah Ah Ah !



HTML :
=====
<div style="text-align:center">
<p>cliquer l'imagette pour voir la grande vue</p>
<dl id="vue">
<dd><a href="">&nbsp;</a></dd>
<dt></dt>
</dl>
<p><button onclick="if(!play)diaporama();"> play </button>
<button onclick="tempo+P0;">+</button>
vitesse
<button onclick="tempo-P0;">-</button>
<button onclick="stop();"> stop </button>
</p>
</div>

JS :
=== function affiche(n) {
var v = document.getElementById('vue');
v.getElementsByTagName('A')[0].style.backgroundImage =
'url(images/'+n+'jpg)';
v.getElementsByTagName('DT')[0].innerHTML = liste[n];
}
var liste = [
'Manuscrit <br>(VI<sup>e</sup>–VIII<sup>e</sup>
siècle)<br><em>Krishna and Radha playing chaturanga</em>',
'Abû al–Qâsim Firdawsî de
Tûs<br>(c.935–c.1020–26)<br>(Persian)<br><em>Tahmuras Defeats the Divs
(détail)</em>',

... etc.

'Consuelo Venturi<br>(b 1988)<br><em>The King Of Chess</em>'
];


Attention à "échapper" les '/' si posés après '<'
===> </ pour </

CSS :
====
#vue {
width: 200px;
height: 200px;
margin: auto;
background:
url(http://www.jmrw.com/Chess/Tableau_echecs/thumbnails/001.jpg)
no-repeat center center #ddd;
}
#vue dd,
#vue dt { margin: 0; padding: 2px; background: white; border: outset
gold 5px; }
#vue em { color: #555; font-size: 8px; }
#vue dd a { display: block; height: 11em; margin: 9px auto; border:
inset goldenrod 5px; background: no-repeat center center #ddd; color:#ddd;}


Voir :
http://fr.selfhtml.org/navigation/recherche/index.htm
http://fr.selfhtml.org/javascript/objets/document.htm
http://fr.selfhtml.org/javascript/objets/index.htm
http://fr.selfhtml.org/javascript/index.htm


--
Stéphane Moriaux avec/with iMac-intel
Avatar
SAM
Le 24/09/12 18:41, SAM a écrit :

var liste = [


(snip)
... etc.

'Consuelo Venturi<br>(b 1988)<br><em>The King Of Chess</em>'
];



Maintenant que tu t'es bien amusé à constituer ton array 'liste'
en fait ... il ne devrait pas il y en avoir besoin !

JS :
===
var album, albImage, albLegende, play, c=0, tempo = 2000, play = false;

function init() {
album = document.getElementById('album');
album = album.getElementsByTagName('DL');
var v = document.getElementById('vue');
albImage = v.getElementsByTagName('A')[0];
albLegende = v.getElementsByTagName('DT')[0];
diaporama();
}

function affiche(n) {
albImage.style.backgroundImage =
album[n].getElementsByTagName('A')[0].style.backgroundImage;
albLegende.innerHTML = album[n].getElementsByTagName('DT')[0].innerHTML;
}

function diaporama() {
c++;
if(c >= nb) c=0;
affiche(c);
play = setTimeout('diaporama()',tempo);

window.onload = init;



Pas testé mais ça devrait marcher (avec un mélange du html donné au
dernier post et celui de :
<http://cjoint.com/12sp/BIvwFLk9vXH_chess-tableaux_sam-sans-table_index.htm>
(sauf coquille ! ? ! ? !)

--
Stéphane Moriaux avec/with iMac-intel
Avatar
SAM
Le 24/09/12 20:13, SAM a écrit :
Le 24/09/12 18:41, SAM a écrit :

var liste = [


(snip)
... etc.

'Consuelo Venturi<br>(b 1988)<br><em>The King Of Chess</em>'
];



Maintenant que tu t'es bien amusé à constituer ton array 'liste'
en fait ... il ne devrait pas il y en avoir besoin !



Et qque chose qui en jetterait ?
(sans rien y comprendre en JavaScript !)

http://lytebox.com/
http://lytebox.com/images/milky_way.jpg


Sur la page de l'animation
- on appelle un fichier JS externe
- on crée le HTML kivabien (voir: http://lytebox.com/howTo.php)
et hop !

--
Stéphane Moriaux avec/with iMac-intel
Avatar
jmrw
Si vous m'envoyer votre adresse dans un email, je vous enverrai une
bouteille de vin d'Alsace.

Je vous doit au moins ça.

Pour faire ce que vous avez fait il m'aurait fallu une année.

jmrw (nul en javascript, mais têtu)
1 2 3