Défilement d'image sur deux lignes : Quel est ce script ?

**iluvatar75** · 17/10/2011, 11h44

Bonjour tout le monde !

Je reviens vers vous pour un petit coup de pouce...

En surfant sur le net, j'ai trouvé un site qui utilise un javascript qui me plaît bien, étant sur Firefox je regarde son code et je remarque que cette personne a utilisé des balises <Table> (une horreur

).

Je vous donne le lien : Le site

Le script qui m’intéresse est l'effet "slide" qui permet de faire défiler les images MAIS sur deux lignes car oui je sais il existe pas mal de script comme les carousels et autres mais ces derniers présentent leurs photos sur une seule ligne...

Et je voudrais faire pareil

Donc voici mes questions :

- Quels script utilise -t-il ?
J'ai beau cherché je ne trouve pas a part le FANCYBOX mais c'est un script qui permet d'agrandir l'image comme lightbox etc etc et je ne crois pas que ce script fait défiler les images...

- A la place des <table>, puis-je utiliser les <div>, <il> ?

En faite, je désire juste un script qui permet de faire défiler des images sur deux lignes comme sur le site que je vous ai présenté....

Merci bicoup !!!

**SpaceFrog** · 17/10/2011, 11h49

A priori un simple slider en jquery avec une mise en page des images sur deux lignes en css dans un conteneur au lieu d'avoir une seule image

**iluvatar75** · 17/10/2011, 15h22

Envoyé par SpaceFrog

A priori un simple slider en jquery avec une mise en page des images sur deux lignes en css dans un conteneur au lieu d'avoir une seule image

Et bien même avec un simple slider, ça ne marche pas

J'ai pris un script tout simple : "JCarousel" (simple carousel)

Et je vous donne le script déjà bidouillé :

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title>jCarousel Examples</title>
<link href="../style.css" rel="stylesheet" type="text/css" />
<!--
  jQuery library
-->
<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>
<!--
  jCarousel library
-->
<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>
<!--
  jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="../skins/tango/skin.css" />
 
<script type="text/javascript">
 
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel();
});
 
 
 
</script>
 
</head>
<body>
<div id="wrap">  
<div id="mycarousel" class="jcarousel-skin-tango">
 
 
 
 
      <ul >
        <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
      </ul>
 
 
 
      <ul>
        <li><img src="../images/1.jpg" width="75" height="75" alt="" /></li>
        <li><img src="../images/2.jpg" width="75" height="75" alt="" /></li>
        <li><img src="../images/3.jpg" width="75" height="75" alt="" /></li>
        <li><img src="../images/4.jpg" width="75" height="75" alt="" /></li>
        <li><img src="../images/5.jpg" width="75" height="75" alt="" /></li>
        <li><img src="../images/6.jpg" width="75" height="75" alt="" /></li>
        <li><img src="../images/7.jpg" width="75" height="75" alt="" /></li>
        <li><img src="../images/8.jpg" width="75" height="75" alt="" /></li>
        <li><img src="../images/9.jpg" width="75" height="75" alt="" /></li>
        <li><img src="../images/10.jpg" width="75" height="75" alt="" /></li>
      </ul>
 
 
  </div>
</div>
</body>
</html>

Donc en faite il prend en compte seulement la première partie de la balise <ul> et pas le deuxième...

**SpaceFrog** · 17/10/2011, 15h38

ben là tu mets une image par li ... mets en deux ...

**iluvatar75** · 17/10/2011, 16h11

Envoyé par SpaceFrog

ben là tu mets une image par li ... mets en deux ...

Un grand merci à toi SpaceFrog ! Encore une fois tu me sors de cette impasse...

j'étale mon code pour des intéressés

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title>jCarousel Examples</title>
<link href="../style.css" rel="stylesheet" type="text/css" />
<!--
  jQuery library
-->
<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>
<!--
  jCarousel library
-->
<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>
<!--
  jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="../skins/tango/skin.css" />
 
<script type="text/javascript">
 
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel();
});
 
 
 
</script>
 
</head>
<body>
 
<div id="wrap" class="jcarousel-skin-tango">  
 
<div id="mycarousel" >
 
 
 
      <ul >
        <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" />&nbsp;<img src="../images/1.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" />&nbsp;<img src="../images/2.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" />&nbsp;<img src="../images/3.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" />&nbsp;<img src="../images/4.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" />&nbsp;<img src="../images/5.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" />&nbsp;<img src="../images/6.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" />&nbsp;<img src="../images/7.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" />&nbsp;<img src="../images/8.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" />&nbsp;<img src="../images/9.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" />&nbsp;<img src="../images/10.jpg" width="75" height="75" alt="" /></li>
      </ul>
 
 
  </div>
</div>
</body>
</html>

Je ne savais pas qu'on pouvais ajouter d'autres images dans les balises <li>

J'ai du toucher au CSS afin d'apparaître la deuxième ligne.

Bon maintenant je vais essayer de mettre un effet lightbox en cliquant dessus mais ça c'est une autre histoire

Je vais essayer de le faire seul comme un grand...mais je ferais appel à vous si il y a des complications

Merci encore !