Défilement d'image sur deux lignes : Quel est ce script ? [Résolu]

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

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 :

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

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 :

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 !

mekal · 17/10/2011, 21h37

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

iluvatar75 · 19/10/2011, 14h13

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

(juste pour info, la structure du script, plus haut, est juste un essais)

mekal · 19/10/2011, 14h31

ne pas confondre complexe et cafouillage

iluvatar75 · 19/10/2011, 15h16

Citation:

Envoyé par mekal

ne pas confondre complexe et cafouillage

En effet

17/10/2011, 11h44	#1
iluvatar75 Nouveau Membre du Club Webdesigner Inscription : décembre 2008 Messages : 95 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Webdesigner Informations forums : Inscription : décembre 2008 Messages : 95 Points : 25 Points : 25	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... 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 !!!
	00

17/10/2011, 11h49	#2
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 053 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 053 Points : 45 169 Points : 45 169	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 __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

17/10/2011, 15h38	#4
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 053 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 053 Points : 45 169 Points : 45 169	ben là tu mets une image par li ... mets en deux ... __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

17/10/2011, 21h37	#6
mekal Membre chevronné Krusty Inscription : mai 2009 Messages : 472 Détails du profil Informations personnelles : Nom : Krusty Localisation : France Informations forums : Inscription : mai 2009 Messages : 472 Points : 617 Points : 617	il est vraiment mal fait ce script des height et width pour definir la taille des images ca fait pas beau __________________ programmer n'est pas connaitre tous les moindres détails d'un langage mais savoir exploiter sous toutes ses facettes ce que l'on connait.
	00

19/10/2011, 14h31	#8
mekal Membre chevronné Krusty Inscription : mai 2009 Messages : 472 Détails du profil Informations personnelles : Nom : Krusty Localisation : France Informations forums : Inscription : mai 2009 Messages : 472 Points : 617 Points : 617	ne pas confondre complexe et cafouillage __________________ programmer n'est pas connaitre tous les moindres détails d'un langage mais savoir exploiter sous toutes ses facettes ce que l'on connait.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email