Discussion :

[eyango]

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.

[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/

+

[eyango]

ok merci,
J'y jette un coup d'oeil.
D'autres propositions svp ?

[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

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

[eyango]

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

Y a t il d'autres propositions ?

[sachav]

Diaporama tout simple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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