Galerie avec bouton précédent/suivant

**Benben1337** · 28/06/2015, 23h54

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 :

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

**01001111** · 03/07/2015, 02h06

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 html :

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

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 javascript :

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

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"));
}

**Benben1337** · 04/07/2015, 16h36

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 ?

**01001111** · 04/07/2015, 20h51

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 html :

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
 
<!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>

**Benben1337** · 05/07/2015, 01h53

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.

Galerie avec bouton précédent/suivant

JavaScript

Discussions similaires

Partager

Partager