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

Version imprimable

17/10/2011, 11h44
iluvatar75

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

Bonjour tout le monde !

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

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

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

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 !!!
17/10/2011, 11h49
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

Citation:

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:

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

17/10/2011, 15h38
SpaceFrog

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

Citation:

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:

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 :roll:
Je vais essayer de le faire seul comme un grand...mais je ferais appel à vous si il y a des complications :mrgreen:

Merci encore !

17/10/2011, 21h37
Invité

il est vraiment mal fait ce script des height et width pour definir la taille des images ca fait pas beau
19/10/2011, 14h13
iluvatar75

Citation:

Envoyé par mekal

il est vraiment mal fait ce script des height et width pour definir la taille des images ca fait pas beau

Je sais que mettre les tailles à une image n'est pas obligatoire mais comme disait mon prof d'HTML, plus c'est complet mieux c'est...:roll:

(juste pour info, la structure du script, plus haut, est juste un essais)
19/10/2011, 14h31
Invité

ne pas confondre complexe et cafouillage :mouarf:
19/10/2011, 15h16
iluvatar75

Citation:

Envoyé par mekal

ne pas confondre complexe et cafouillage :mouarf:

En effet :mrgreen: