Diaporama images avec bouton

[ranell]

Bonsoir,

Je cherche un diaporama tout simple avec 4 boutons : suivant/précédent/debut/fin sans défilement automatique ni boucle.

avec un petit effet de transition entre les images!

Si vous connaissez des liens/exemples ça serait hyper utile

Merci

ps: j'ai cherché sur le net, il y'en a plein , mais je ne trouve pas avec 4 bouton, de plus je ne suis pas pro en jquery!

[andry.aime]

Cherche un plugin de jQuery.

A+

[ranell]

J'ai cherché sur le net, je n'ai pas vraiment trouvé ce que je cherche .
finalement je me suis mise à faire un diapo tout simple
débutant comme algo, mais bon ca marche
Seul problème, quand on clique sur un lien suivant ou precedent plusieurs fois de suite, on tombe que un moment de vide , pas terrible à voir!
du coup je me demande comment désactiver les lien suivant/précedent pendant n secondes

Merci!

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
48
49
<?php
$trouve=true;
$nbtotal=0;
for($i=1;$trouve;$i++)
{
if(file_exists('01/image'.$i.'.jpg'))
$nbtotal++;
else $trouve=false;
} 
?>
<img src='01/image1.jpg' id="case" width="845" height="362px" alt="" />
<div  style="" id="suiv">suiv</div>
<div  style="" id="prec">prec</div>
<div  style="" id="debut">debut</div>
<div  style="" id="fin">fin</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
  debut=1;
  tot=parseInt("<?php echo $nbtotal; ?>");
 
 
     $("#debut").click(function () {	
	debut=1;
document.getElementById('case').src="01/image1.jpg";
document.getElementById('case').style.display='none';
 $("#case").hide().fadeIn(); });   
 
 $("#fin").click(function () {	
	debut=tot;
document.getElementById('case').src="01/image"+tot+".jpg";
document.getElementById('case').style.display='none';
 $("#case").hide().fadeIn(); });
 
 
 
    $("#suiv").click(function () {	
	if (debut<tot) {debut++;
document.getElementById('case').src="01/image"+debut+".jpg";
document.getElementById('case').style.display='none';
 $("#case").hide().fadeIn(); }});
 
 
 
  $("#prec").click(function () { 
	if (debut!=1) {	debut--;
document.getElementById('case').src="01/image"+debut+".jpg";
document.getElementById('case').style.display='none';
 $("#case").hide().fadeIn();  }}); 
   </script>

[Loceka]

Tu peux mettre une variable globale (comme ta variable "debut", qui au passe n'a pas une très bonne dénomination) contenant la date à laquelle tu as cliqué sur le bouton pour la dernière fois et, dans tes fonctions, rajouter une condition qui fait que ton code n'est pas exécuté si la date actuelle est trop proche de la date sauvegardée.