Comment faire défiler plusieurs images avec effet de transition

Version imprimable

31/01/2008, 15h25
eyango

Comment faire défiler plusieurs images avec effet de transition

Bonjour à tous,
Vous l'aurez compris, je recherche un script dhtml, javascript ou php me permettant de faire défiler sur une page des images avec des effets de transition.

En fait moi je voudrais faire tourner mes images en boucles avec à chaque fois une nouvelle transition. que ceci puisse fonctionner sur un maximun de navigateurs et si possible qu'en passant la souris sur une image, le défilement s'arrete et en cliquant dessus, qu'on puisse être redirigé vers une autre page.

J'ai fait quelques recherches sur google mais j'ai pas trouvé mon bonheur, pouvez vous m'aider svp ?
Merci d'avance.
31/01/2008, 18h17
picwic

Salut,

Peut-être que le la librairie javascript Ligthbox fera ton bonheur.

Je n'ai pas pu vérifier le lien (pas d'accés autorisé depuis mon taff) mais ça doit être par là:
http://www.huddletogether.com/projects/lightbox/

+
01/02/2008, 10h55
eyango

ok merci,
J'y jette un coup d'oeil.
D'autres propositions svp ?
01/02/2008, 11h41
eyango

Bonjour,
je viens de faire un tour sur le lien concernant Lightbox JS. Malheureusement, ce n'est pas ce que je recherche; EN fait, je voudrais que mes images défilent en page d'accueil de mon application web. et comme je l'ai expliqué dans mon premier message, en cliquant sur une image, on pourrait accéder à une autre page (un peu comme dans un menu). il y a des possibilités de faire défiler les images en boucle tant qu'on reste sur la page d'accueil; Je voudrais y rajouter les effets de transition pour que la façon d'apparaitre varie d'une image à l'autre.
Avez vous des propositions ?
Merci d'avance
01/02/2008, 12h18
hellspawn_ludo

Bonjour,

J'ai posté le code du diaporama avec fondu.

Regarde ici : http://www.developpez.net/forums/sho...68#post2911668

J'espère que ça te servira.
01/02/2008, 15h56
eyango

Effectivement, ça rentre dans le cadre de ce que je recherche... merci

Y a t il d'autres propositions ?

Diaporama tout simple :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<script language="javascript">
var imagesTodisplay = new Array();
imagesTodisplay[0] = "monimage1.jpg"; // TOUJOURS COMMENCER PAR imagesTodisplay[0]
imagesTodisplay[1] = "monimage2.jpg";
imagesTodisplay[2] = "monimage3.jpg";
imagesTodisplay[3] = "monimage4.jpg";
// ET AINSI DE SUITE
imageWidth = 500;
imageHeight = 500;
changeSpeed = 50; // CHANGE SPEED : MIN = 10, MAX = 300
imageStay = 5;    // IMAGE STAYS AT 100% DURING x SECONDS
diaporama = new Object();
counter = 0;
diaporama.initialize = function() {
document.write("<img src='"+imagesTodisplay[0]+"' id='diapimage' style='width: "+imageWidth+"px; height: "+imageHeight+"px; filter: alpha(opacity=0); opacity: 0' />");
diaporama.addOpacity();
}
diaporama.addOpacity = function() {
document.getElementById('diapimage').filters.alpha.opacity+=changeSpeed/10;
 
if(document.getElementById('diapimage').filters.alpha.opacity==100) {
setTimeout("diaporama.decreaseOpacity()",imageStay*1000);
} else {
setTimeout("diaporama.addOpacity()",50);
}
}
diaporama.decreaseOpacity = function() {
document.getElementById('diapimage').filters.alpha.opacity-=changeSpeed/10;
 
if(document.getElementById('diapimage').filters.alpha.opacity==0) {
counter++;
diaporama.changeImage();
} else {
setTimeout("diaporama.decreaseOpacity()",50);
}
}
diaporama.changeImage = function() {
if(counter==imagesTodisplay.length) {
counter = 0;
document.getElementById('diapimage').src = imagesTodisplay[counter];
} else {
document.getElementById('diapimage').src = imagesTodisplay[counter];
}
diaporama.addOpacity()
}
diaporama.initialize();
</script>

Ce code est a adapter pour firefox, en rajoutant Object.style.opacity apres chaque changement de Object.filters.alpha.opacity... (Et ne pas oublier de mettre par exemple 0,8 au lieu de mettre 80...)