Discussion :

[Invité]

Hello

J'ai un soucis avec un slider horizontal qui me sert à sélectionner les albums photo avant d'afficher les photos y référent dans un autre bloc.

J'ai hébergé mon site ici : http://valef.fr/sites/spvconfrancon/content/photos.php

(Ne pas faire attention aux photos, logo, etc, ce n'est que temporaire bien sûr ).

Le soucis c'est que les albums suivants du flux (à droite donc) n'apparaissent pas et qu'il n'est pas possible de faire défiler plus d'un album sur la gauche.

Voulez-vous le code ou alors celui du site vous suffit ?


Cdt

[NoSmoking]

Bonjour,
comme tu as fixé une largeur à la DIV conteneur de tes photos le flux est respecté, les photos suivantes passe à la ligne.

En gros il te faut une DIV "fenêtre" et une DIV conteneur et c'est sur la DIV "fenêtre" que tu places une largeur.

[Invité]

Salut toi

Déjà je te remercie de ta réponse, cependant j'ai bien l'impression que c'est ce que j'ai fait...? Du moins sur la dernière version que j'ai mise en ligne

J'ai un div (largeur fixe, overflow caché) et un ul sans largeur dedans qui contient tous les li alignés.

Comment me suggères-tu donc de procéder ?


Merci.

[NoSmoking]

Il te suffit de redimensionner la DIV ou l'UL conteneur des vignettes.

Comme tu utilises le CSS3, nth-of-type(2), il serait plus judicieux d'utiliser les balises

Code html :

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

1
2
3
4
<figure>
  <img src="../img/centre/vehicules/fpt.png" alt=""/>
  <figcaption>Album 1</figcaption>
</figure>

[Invité]

Ah d'accord. Je ne connaissais pas du tout cette balise.


Tiens, une petite question en passant, où est-il possible d'apprendre ce genre de bonnes pratiques (du genre quelle balise est la mieux appropriée, quelle structure adopter par-ci par là, etc) ?
A chaque fois on me dit qu'il est plus judicieux d'utiliser cette balise plutôt qu'une autre, mais je me demande où les gens l'ont appris...


Mais même en utilisant la balise <figure>, si je redimensionne mon ul (conteneur des vignettes), il y a une barre horizontale de scroll, donc c'est ce que je voulais à tour prix éviter.

[NoSmoking]

Pour apprendre il y a les articles qui paraissent, ce que l'on appelle la veille technologique, le site officiel de la W3C, les on-dit, les forums....
- http://xhtml.developpez.com/cours/
- http://css.developpez.com/cours/
- http://developers.whatwg.org/

il y a une barre horizontale de scroll

la DIV conteneur de ta UL doit avoir un overflow:hidden.

[Invité]

Ok je te remercie, je ne connaissais pas le dernier lien.

Concernant le overflow:hidden j'ai effectivement fini par le trouver de mon côté, cependant je ne peux toujours pas déplacer plus d'une vignette sur la gauche et il n'apparaît que 7 vignettes sur les 12 présentes... :/

Tout le CSS est désormais OK, mais il reste ce petit détail...
Je pense qu'il ne prend pas en compte le " += " et le " -= " dans mon code jQuery ; qu'est ce que tu en penses ?


Sur la dernière version que j'ai mise en ligne, j'ai le même type de contenu (mais en vertical) et cela fonctionne très bien.

Mon site

[NoSmoking]

Je viens de regarder plus avant ton code, et je penses que tu n'a pas la bonne approche en utilisant un index et la modification du margin de l'élément contenant les vignettes.

En premier lieu je mettrais la DIV "fenêtre" en position:relative, ensuite la DIV "galerie" en position:absolute.

Code html :

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

1
2
3
4
5
6
7
<div id="fenetre" style="position:relative;overflow:hidden">
  <div id="galerie" style="position:absolute">
    <figure>
    <!-- le reste des images -->
    </figure>
  </div>                                
</div>

à partir de là on peut jouer sur la propriété left de la DIV "galerie".
- flèche DROITE, on décrémente la left de la distance entre 2 vignettes.
- flèche GAUCHE, on incrémente la left de la distance entre 2 vignettes.

La limite à GAUCHE sera de 0, 1st vignette affichée à gauche, la limite à DROITE sera nombre de vignettes visibles * distance entre 2 vignettes.

le code pourrait ressembler à cela

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
$(document).ready(function(){
  var inc = 143;        // distance entre 2 vignettes
  var posMax = inc*6;   // 6= nombre de vignettes visibles
 
  $('#leftClic').click(function() {
    var $obj = $('#galerie');
    // pour gestion re entrance, exit si en cours
    if( $obj.data('encours')) return;
    // get la position actuelle
    var pos = $obj.position().left;
    // test limite gauche
    if( pos < 0){
      // pose le flag action encours
      $obj.data('encours', true);
      $obj.animate({
          left: pos +inc
        }, 300, function(){ $(this).data('encours', false)} // en fin animation supprime le flag action encours
      );
    }
  });
 
  $('#rightClic').click(function() {
    var $obj = $('#galerie');
    // pour gestion re entrance, exit si en cours
    if( $obj.data('encours')) return;
    // get la position actuelle
    var pos = $obj.position().left;
    // test limite droite
    if( pos > -posMax){
      // pose le flag action encours
      $obj.data('encours', true);
      $obj.animate({
          left: pos -inc,
        }, 300, function(){ $(this).data('encours', false)} // en fin animation supprime le flag action encours
       );
    }
  });
});

je te laisse tester cela.

[Invité]

J'ai compris mon erreur et j'ai appris quelque-chose de très important que je pensais à tort connaître.
Je n'utilisais jamais le position: absolute car cela positionnait toujours mon div n'importe où dans la page ; j'ai enfin compris qu'il fallait mettre le div conteneur en position: relative OBLIGATOIREMENT (j'ai toujours pensé que cela était le cas par défaut).

Par conséquent, je n'ai eu qu'à changer dans mon code le marginLeft par un left ; tout fonctionne à merveille.

Je te remercie pour ton code, je suppose qu'il est plus propre et optimisé que le mien, mais je ne comprends pas le .data, je fais actuellement des recherches là dessus mais c'est pas très clair. Une fois que j'aurai compris, j'adapterai mon code à ta façon.

Penses-tu que mon code n'est pas très performant ? Je veux dire par là, tu trouves que c'est plus de la "bidouille" qu'autre chose ou alors cela reste convenable ?

En attendant, merci beaucoup pour ta participation, c'est vraiment appréciable de trouver de l'aide et une aide de qualité en plus !