Galerie avec bouton précédent/suivant

Version imprimable

Bonsoir

Voila j'ai trouvé un code tout simple qui m'a permis de faire une galerie d'image, seulement il ne marche pas sur chrome donc je voudrais ajouter des boutons suiv/prec mais je ne sais pas par ou commencer ... voici le code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<div id="gallery">
 
     <div id="panel">
          <img id="largeImage" src="images/image_1_large.jpg" alt=""/>
      </div>
 
     <div id="description"><span>img1</span></div>
 
     <div id="thumbs">
          <img src="images/image_1_thumb.jpg" alt="img1" />
          <img src="images/image_2_thumb.jpg" alt="img2" />
          <img src="images/image_3_thumb.jpg" alt="img3" />
          <img src="images/image_4_thumb.jpg" alt="img4" />
          <img src="images/image_5_thumb.jpg" alt="img5" />
     </div>
          <script>
               $('#thumbs').delegate('img','click', function(){
                    $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
                    $('#description span').html($(this).attr('alt'));
               });
          </script>
</div>  <!-- END gallery -->

Si quelqu'un peut assigner des boutons à ce code ... Merci de votre aide.

Bonsoir,

tu peux utiliser la propriété css float avec comme valeur left et un positionnement en relatif pour positionner tes flèches à gauche et à droite des thumbs, mais dans ce cas ne pas oublier de :
. mettre les thumbs en float:left;
. mettre un dernier noeud (div vide par exemple) en positionnement relatif et avec clear:both; et height:0; pour éviter la perte du repère dans liste d'affichage.

les éléments de flèches auront un onclick de valeur suivante par exemple:
Code:

1 2 3 <a href="#" onclick="changeImage('prev');"><img src="left.png"/></a> <a href="#" onclick="changeImage('next');"><img src="right.png"/></a>
enfin tu peux passer d'image en image avec un repérage du genre:
Code:

1 2 3 4 5 6 7 function changeImage(sens) { var current=$('#largeImage').attr('src').replace("large", "thumb"); var elm=document.querySelector('[src='+current+']'); elm=(sens=="prev"?elm.previousSibling||elm.parentNode.lastChild:elm.nextSibling||elm.parentNode.firstChild); $('#largeImage').attr('src', elm.src.replace("thumb", "large")); }

04/07/2015, 16h36
Benben1337

Donc j'ai bien mes images afficher avec <a> mais il ne se passe rien quand je click sur mes flèches je dois rater quelque chose au niveau du onclick et du script.

Ton script js est bien relation avec les <a> ?
Et il n'y a rien a mettre dans href ?

Le script ne marchait pas car
1° la source est parfois renseignée en absolu si changement
2° il y a certains navigateurs qui ajoutent des noeuds de texte entre les img (ce qui reste actuellement un mystère pour moi)

voici le code corrigé

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
 
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div id="gallery">
 
     <div id="panel">
          <img id="largeImage" src="images/image_1_large.jpg" alt=""/>
      </div>
 
     <div id="description"><span>img1</span></div>
      <a href="#" onclick="changeImage('prev');"><img src="left.png"/></a>
     <div id="thumbs">
          <img src="images/image_1_thumb.jpg" alt="img1" />
          <img src="images/image_2_thumb.jpg" alt="img2" />
          <img src="images/image_3_thumb.jpg" alt="img3" />
     </div>
     <a href="#" onclick="changeImage('next');"><img src="right.png"/></a>
          <script>
                window.onload=function() {
                       $('#thumbs').delegate('img','click', function(){
                                $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
                                $('#description span').html($(this).attr('alt'));
                       });
                }
               function changeImage(sens) {
                        var current=$('#largeImage').attr('src').replace("large", "thumb");
                        // find relative path
                        while (current.indexOf("/")!==-1 && document.querySelector('img[src=\''+current+'\']')===null) {
                                current=current.substr(current.indexOf("/")+1);
                                console.log(current);
                        }
                        var elm=document.querySelector('img[src=\''+current+'\']');
                        elm=(sens=="prev"?elm.previousSibling||elm.parentNode.lastChild:elm.nextSibling||elm.parentNode.firstChild);
                        while (elm.nodeName=="#text") {
                                elm=(sens=="prev"?elm.previousSibling||elm.parentNode.lastChild:elm.nextSibling||elm.parentNode.firstChild);
                        }
                        $('#largeImage').attr('src', elm.src.replace("thumb", "large"));
                        $('#description span').html(elm.alt);
                }
          </script>
          <script type="text/javascript" src="jquery-2.1.4.min.js"></script>
</div>  <!-- END gallery -->
</body>
</html>

05/07/2015, 01h53
Benben1337

D'accord je comprends un peu mieux, c'est plus complexe que je pensais. Je vais détailler le code et essayer de perfectionné tout ça, ca me familiariseras mieux avec js.

Merci pour ton aide.