Flux masqué dans slider horizontal

Version imprimable

20/07/2013, 15h05
Invité

Flux masqué dans slider horizontal

Hello :mrgreen:

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

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 :ccool:
20/07/2013, 20h21
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.
20/07/2013, 20h28
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 :roll:

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.
20/07/2013, 23h13
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:

1 2 3 4 <figure> <img src="../img/centre/vehicules/fpt.png" alt=""/> <figcaption>Album 1</figcaption> </figure>
21/07/2013, 00h11
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) ? :koi:
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.
21/07/2013, 23h26
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/

Citation:

il y a une barre horizontale de scroll

la DIV conteneur de ta UL doit avoir un overflow:hidden.
22/07/2013, 07h53
Invité

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

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

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:

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:

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.

23/07/2013, 10h30
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 ! :ccool: