UI Dialog qui affiche le plugin jCarousel [Résolu]

vladock · 05/07/2011, 19h44

Bonjour voici mon code si quelqu'un peut m'aidé ça m'arrangerais

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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
 
<div id="dialog" title="Web Solution" style="display:none;">
 
<script type="text/javascript" src="templates/lib/jquery-1.2.3.pack.js"></script>
 
<script type="text/javascript" src="templates/lib/jquery.jcarousel.pack.js"></script>
 
<link rel="stylesheet" type="text/css" href="templates/lib/jquery.jcarousel.css" />
 
<link rel="stylesheet" type="text/css" href="templates/skins/tango/skin.css" />
 
        <script type="text/javascript">
 
        jQuery(document).ready(function() {
            jQuery('#mycarousel').jcarousel();
        });
 
        </script>
         <table width="515" height="200" border="0" cellspacing="0" cellpadding="0">
                                                      <tr>
                                                        <td valign="middle" align="center">
                                                       <div id="wrap">                                                  
                                                          <ul id="mycarousel" class="jcarousel-skin-tango"> 
 
                                                          <li>
                                                             <!--www.mtn.ci-->
                                                             <table width="200" border="0" cellspacing="0" cellpadding="0">
                                                                  <tr>
                                                                    <td height="200px"><a href="http://www.mtn.ci/" target="_blank" title="Mtn.ci"><img  src="templates/images/mtn1.jpg" alt="" width="200" height="200" border="0" /></a></td>
                                                                  </tr>
                                                                  <tr>
                                                                    <td align="center">www.mtn.ci</td>
                                                                  </tr>
                                                                </table>
                                                          </li>
 
                                                          <li>
                                                             <!--www.mtnbusiness.ci-->
                                                             <table width="200" border="0" cellspacing="0" cellpadding="0">
                                                                  <tr>
                                                                    <td height="200px"><a href="http://www.mtnbusiness.ci/" target="_blank" title="mtnbusiness.ci"><img  src="templates/images/mtn2.jpg" alt="" width="200" height="200" border="0" /></a></td>
                                                                  </tr>
                                                                  <tr>
                                                                    <td align="center">www.mtnbusiness.ci</td>
                                                                  </tr>
                                                                </table>
                                                          </li>  
 
                                                             <li>
                                                                <!--www.rueprincesse.net-->
                                                                <table width="200" border="0" cellspacing="0" cellpadding="0">
                                                                  <tr>
                                                                    <td height="200px"><a href="http://www.rueprincesse.net" target="_blank" title="rueprincesse.net"><img  src="templates/images/site4.jpg" alt="" width="200" height="200" border="0" /></a></td>
                                                                  </tr>
                                                                  <tr>
                                                                    <td align="center">www.rueprincesse.net</td>
                                                                  </tr>
                                                                </table>
                                                            </li>                                             
 
                                                           <li>
                                                              <!--www.sndi.ci-->
                                                              <table width="200" border="0" cellspacing="0" cellpadding="0">
                                                                  <tr>
                                                                    <td height="200px"><a href="http://www.sndi.ci" target="_blank" title="sndi.ci"><img  src="templates/images/sndi.jpg" alt="" width="200" height="200" border="0" /></a></td>
                                                                  </tr>
                                                                  <tr>
                                                                    <td align="center">www.sndi.ci</td>
                                                                  </tr>
                                                                </table>
                                                           </li> 
                                                            <li>
                                                             <!--www.plusjamaisca.net-->
                                                                <table width="200" border="0" cellspacing="0" cellpadding="0">
                                                                  <tr>
                                                                    <td height="200px"><a href="http://plusjamaisca.net" target="_blank" title="plusjamaisca.net"><img  src="templates/images/pljms.jpg" alt="" width="200" height="200" border="0" /></a></td>
                                                                  </tr>
                                                                  <tr>
                                                                    <td align="center">www.plusjamaisca.net</td>
                                                                  </tr>
                                                                </table>               
                                                            </li>   
 
                                                               <li>
                                                                <!--www.afrikiosque.com-->
                                                                <table width="200" border="0" cellspacing="0" cellpadding="0">
                                                                  <tr>
                                                                    <td height="200px"><a href="http://www.afrikiosque.com" target="_blank" title="afrikiosque.com"><img  src="templates/images/site8.jpg" alt="" width="200" height="200" border="0" /></a></td>
                                                                  </tr>
                                                                  <tr>
                                                                    <td align="center">www.afrikiosque.com</td>
                                                                  </tr>
                                                                </table>
                                                            </li>
 
 
                                                              <li>      
                                                                <!--www.aero-corporate.com-->
                                                               <table width="200" border="0" cellspacing="0" cellpadding="0">
                                                                  <tr>
                                                                    <td height="200px"><a href="http://www.aero-corporate.com/" target="_blank" title="aero-corporate.com"><img  src="templates/images/site11.jpg" alt="" width="200" height="200" border="0" /></a></td>
                                                                  </tr>
                                                                  <tr>
                                                                    <td align="center">www.aero-corporate.com</td>
                                                                  </tr>
                                                                </table>
 
                                                            </li>
                                                             <li>
                                                            <!--www.ifootci.com-->
                                                                <table width="200" border="0" cellspacing="0" cellpadding="0">
                                                                  <tr>
                                                                    <td height="200px"><a href="http://www.ifootci.com" target="_blank" title="ifootci.com"><img  src="templates/images/site7.jpg" alt="" width="200" height="200" border="0" /></a></td>
                                                                  </tr>
                                                                  <tr>
                                                                    <td align="center">www.ifootci.com</td>
                                                                  </tr>
                                                                </table>
                                                           </li>  
 
                                                            <li>
                                                                <!--www.sitradesa.com-->
                                                                <table width="200" border="0" cellspacing="0" cellpadding="0">
                                                                  <tr>
                                                                    <td height="200px"><a href="http://www.sitradesa.com" target="_blank"  title="sitradesa.com"><img  src="templates/images/site6.jpg" alt="" width="200" height="200" border="0" /></a></td>
                                                                  </tr>
                                                                  <tr>
                                                                    <td align="center">www.sitradesa.com</td>
                                                                  </tr>
                                                                </table>
                                                            </li>
 
                                                                                                                                                                             <li>
                                                                <!--http://www.elephantsbikers.net-->
                                                                <table width="200" border="0" cellspacing="0" cellpadding="0">
                                                                  <tr>
                                                                    <td height="200px"><a href="http://www.elephantsbikers.net" target="_blank"  title="elephantsbikers.net"><img  src="templates/images/site14.jpg" alt="" width="200" height="200" border="0" /></a></td>
                                                                  </tr>
                                                                  <tr>
                                                                    <td align="center">www.elephantsbikers.net</td>
                                                                  </tr>
                                                                </table>
                                                            </li>   
 
                                                            <li>
                                                                <!--www.assotekinter.com-->
                                                                <table width="200" border="0" cellspacing="0" cellpadding="0">
                                                                  <tr>
                                                                    <td height="200px"><a href="http://www.assotekinter.com/" target="_blank" title="Assotekinter.com"><img  src="templates/images/site13.jpg" alt="" width="200" height="200" border="0" /></a></td>
                                                                  </tr>
                                                                  <tr>
                                                                    <td align="center">www.assotekinter.com</td>
                                                                  </tr>
                                                                </table>
                                                            </li>
                                                            <li>
                                                             <!--www.afdb-ci.org-->
                                                                <table width="200" border="0" cellspacing="0" cellpadding="0">
                                                                  <tr>
                                                                    <td height="200px"><a href="http://www.afdb-ci.org" target="_blank" title="afdb-ci.org"><img  src="templates/images/afdb.jpg" alt="" width="200" height="200" border="0" /></a></td>
                                                                  </tr>
                                                                  <tr>
                                                                    <td align="center">www.afdb-ci.org</td>
                                                                  </tr>
                                                                </table>               
                                                            </li>   
 
                                                          </ul>
                                                        </div>      
                                                          </td>
                                                      </tr>
                                                    </table>
 
    </div>
 
<a href="#" class="opener"  data-dialog-opener="dialog"><img name="" src="store/image.jpg" width="200" height="100" alt="" /></a>
 
 
<script charset="utf-8" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
    <script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
	<script>
        $(function() {
            // increase the default animation speed to exaggerate the effect
            $.fx.speeds._default = 1000;
 
			jQuery.noConflict();
 
            jQuery("#dialog").dialog({
                autoOpen: false,
                show: 'blind',
				modal: true,
				width: 520 ,
                hide: 'explode'
            });
 
            jQuery(".opener").click(function() {
                jQuery('#' + jQuery(this).data("dialogOpener")).dialog('open');
 
                return false;
            });
        });	
	</script>

danielhagnoul · 06/07/2011, 09h11

Bonjour

Votre demande est rédigée avec une telle urbanité que j'ai accepté de perdre 2 heures, hier soir, sur votre problème.

J'ai eu beaucoup de mal à remettre vos codes en ordre et à comprendre la logique suivie. Certains liens de chargement de code sont restés obscurs (jcarousel.pack ?).

Si vous modifiez la taille standard des images, il faut bien entendu modifier la feuille de style "tango".

Le plugin jCarousel ne tient compte que de la première image incluse dans chaque "li". C'est pourquoi la version normale et votre version avec table donnent exactement le même résultat.

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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/humanity/jquery-ui.css">
	<link rel="stylesheet" href="../jcarousel/skins/tango/skin.css" />
	<style>
		/* Base */
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {margin:0px; padding:0px; }
		body {background-color:rgba(210, 214, 98, 0.5); color:#000000; font-family:sans-serif; font-size:medium; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 {font-family:serif; padding:6px; }
		p, div, td {word-wrap:break-word; }
		pre, code {white-space:pre-wrap; word-wrap:break-word; }
		img, input, textarea, select {max-width:100%; }
        img {border:none; }
		h1 {font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p {padding:6px; }
        ul,ol,dl {list-style:none; padding-left:6px; padding-top:6px; }
        li {padding-bottom:6px; }
		.conteneur {width:95%; min-width:800px; min-height:400px; margin:12px auto; background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
 
		/* Modifications du skin tango pour des images de 200px x 200px */
		.jcarousel-skin-tango .jcarousel-container-horizontal {
			width: 625px; /*245px;*/
			padding: 20px 40px;
		}
		.jcarousel-skin-tango .jcarousel-clip-horizontal {
			width:  625px; /*245px;*/
			height: 200px; /*75px;*/
		}
		.jcarousel-skin-tango .jcarousel-item {
			width: 200px; /*75px;*/
			height: 200px; /*75px;*/
		}
 
		/**
		 *  Horizontal Buttons
		 */
		.jcarousel-skin-tango .jcarousel-next-horizontal {
			top: 106px; /*43px;*/
		}
		.jcarousel-skin-tango .jcarousel-prev-horizontal {
			top: 106px; /*43px;*/
		}
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<section class="conteneur">
 
		<div id="dialog" title="Web Solution" style="display:none;">
			<ul id="mycarousel" class="jcarousel-skin-tango">
				<li>
					<a href="http://www.mtn.ci/" target="_blank" title="www.mtn.ci">
						<img src="http://danielhagnoul.developpez.com/images/imageTest.png" alt="www.mtn.ci" title="www.mtn.ci" width="200" height="200"/>
					</a>
				</li>
				<li>
					<a href="http://www.mtnbusiness.ci/" target="_blank" title="www.mtnbusiness.ci">
						<img src="http://danielhagnoul.developpez.com/images/imageTest.png" alt="www.mtnbusiness.ci" title="www.mtnbusiness.ci" width="200" height="200"/>
					</a>
				</li>
				<li>
					<a href="http://www.rueprincesse.net/" target="_blank" title="www.rueprincesse.net">
						<img src="http://danielhagnoul.developpez.com/images/imageTest.png" alt="www.rueprincesse.net" title="www.rueprincesse.net" width="200" height="200"/>
					</a>
				</li>
				<li>
					<a href="http://www.sndi.ci/" target="_blank" title="www.sndi.ci">
						<img src="http://danielhagnoul.developpez.com/images/imageTest.png" alt="www.sndi.ci" title="www.sndi.ci" width="200" height="200"/>
					</a>
				</li>
				<li>
					<a href="http://www.plusjamaisca.net/" target="_blank" title="www.plusjamaisca.net">
						<img src="http://danielhagnoul.developpez.com/images/imageTest.png" alt="www.plusjamaisca.net" title="www.plusjamaisca.net" width="200" height="200"/>
					</a>
				</li>
				<li>
					<a href="http://www.afrikiosque.com/" target="_blank" title="www.afrikiosque.com">
						<img src="http://danielhagnoul.developpez.com/images/imageTest.png" alt="www.afrikiosque.com" title="www.afrikiosque.com" width="200" height="200"/>
					</a>
				</li>
				<li>
					<a href="http://www.ifootci.com/" target="_blank" title="www.ifootci.com">
						<img src="http://danielhagnoul.developpez.com/images/imageTest.png" alt="www.ifootci.com" title="www.ifootci.com" width="200" height="200"/>
					</a>
				</li>
				<li>
					<a href="http://www.sitradesa.com/" target="_blank" title="www.sitradesa.com">
						<img src="http://danielhagnoul.developpez.com/images/imageTest.png" alt="www.sitradesa.com" title="www.sitradesa.com" width="200" height="200"/>
					</a>
				</li>
				<li>
					<a href="http://www.elephantsbikers.net/" target="_blank" title="www.elephantsbikers.net">
						<img src="http://danielhagnoul.developpez.com/images/imageTest.png" alt="www.elephantsbikers.net" title="www.elephantsbikers.net" width="200" height="200"/>
					</a>
				</li>
				<li>
					<a href="http://www.assotekinter.com/" target="_blank" title="www.assotekinter.com">
						<img src="http://danielhagnoul.developpez.com/images/imageTest.png" alt="www.assotekinter.com" title="www.assotekinter.com" width="200" height="200"/>
					</a>
				</li>
				<li>
					<a href="http://www.afdb-ci.org/" target="_blank" title="www.afdb-ci.org">
						<img src="http://danielhagnoul.developpez.com/images/imageTest.png" alt="www.afdb-ci.org" title="www.afdb-ci.org" width="200" height="200"/>
					</a>
				</li>
			</ul>
		</div>
 
		<a href="#" class="opener"  data-dialog-opener="dialog">
			<img name="" src="http://danielhagnoul.developpez.com/images/imageTest.png" width="200" height="100" alt="" />
		</a>
 
	</section>
	<footer itemscope itemtype="http://data-vocabulary.org/Person">
		<time datetime="2011-07-05T22:50:00.000+02:00" pubdate>2011-07-05</time> <span itemprop="name">Daniel Hagnoul</span> <a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
	</footer>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
	<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/i18n/jquery-ui-i18n.min.js"></script>
	<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
	<script charset="utf-8" src="../jcarousel/lib/jquery.jcarousel.min.js"></script>
	<script>
		$(function(){
            // increase the default animation speed to exaggerate the effect
            $.fx.speeds._default = 1000;
 
            $("#dialog").dialog({
                autoOpen: false,
                show: 'blind',
				modal: true,
				height: 340,
				width: 740,
                hide: 'explode'
            });
 
            $(".opener").click(function() {
                $('#' + $(this).data("dialogOpener")).dialog('open');
                return false;
            });
 
			$('#mycarousel').jcarousel();
		});
	</script>
</body>  
</html>

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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/humanity/jquery-ui.css">
	<link rel="stylesheet" href="../jcarousel/skins/tango/skin.css" />
	<style>
		/* Base */
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {margin:0px; padding:0px; }
		body {background-color:rgba(210, 214, 98, 0.5); color:#000000; font-family:sans-serif; font-size:medium; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 {font-family:serif; padding:6px; }
		p, div, td {word-wrap:break-word; }
		pre, code {white-space:pre-wrap; word-wrap:break-word; }
		img, input, textarea, select {max-width:100%; }
        img {border:none; }
		h1 {font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p {padding:6px; }
        ul,ol,dl {list-style:none; padding-left:6px; padding-top:6px; }
        li {padding-bottom:6px; }
		.conteneur {width:95%; min-width:800px; min-height:400px; margin:12px auto; background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
 
		/* Modifications du skin tango pour des images de 200px x 200px */
		.jcarousel-skin-tango .jcarousel-container-horizontal {
			width: 625px; /*245px;*/
			padding: 20px 40px;
		}
		.jcarousel-skin-tango .jcarousel-clip-horizontal {
			width:  625px; /*245px;*/
			height: 200px; /*75px;*/
		}
		.jcarousel-skin-tango .jcarousel-item {
			width: 200px; /*75px;*/
			height: 200px; /*75px;*/
		}
 
		/**
		 *  Horizontal Buttons
		 */
		.jcarousel-skin-tango .jcarousel-next-horizontal {
			top: 106px; /*43px;*/
		}
		.jcarousel-skin-tango .jcarousel-prev-horizontal {
			top: 106px; /*43px;*/
		}
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<section class="conteneur">
 
<div id="dialog" title="Web Solution" style="display:none;">
	<table width="515" height="200" border="0" cellspacing="0" cellpadding="0">
		<tbody>
			<tr>
				<td valign="middle" align="center">
					<div id="wrap">                                                  
						<ul id="mycarousel" class="jcarousel-skin-tango"> 
							<li>
								<!--www.mtn.ci-->
								<table width="200" border="0" cellspacing="0" cellpadding="0">
									<tbody>
										<tr>
											<td height="200px"><a href="http://www.mtn.ci/" target="_blank" title="Mtn.ci"><img  src="http://danielhagnoul.developpez.com/images/imageTest.png" alt="" width="200" height="200" border="0" /></a></td>
										</tr>
										<tr>
											<td align="center">www.mtn.ci</td>
										</tr>
									</tbody>
								</table>
							</li>
							<li>
								<!--www.mtnbusiness.ci-->
								<table width="200" border="0" cellspacing="0" cellpadding="0">
									<tbody>
										<tr>
											<td height="200px"><a href="http://www.mtnbusiness.ci/" target="_blank" title="mtnbusiness.ci"><img  src="http://danielhagnoul.developpez.com/images/imageTest.png" alt="" width="200" height="200" border="0" /></a></td>
										</tr>
										<tr>
											<td align="center">www.mtnbusiness.ci</td>
										</tr>
									</tbody>
								</table>
							</li>  
							<li>
								<!--www.rueprincesse.net-->
								<table width="200" border="0" cellspacing="0" cellpadding="0">
									<tbody>
										<tr>
											<td height="200px"><a href="http://www.rueprincesse.net" target="_blank" title="rueprincesse.net"><img  src="http://danielhagnoul.developpez.com/images/imageTest.png" alt="" width="200" height="200" border="0" /></a></td>
										</tr>
										<tr>
											<td align="center">www.rueprincesse.net</td>
										</tr>
									</tbody>
								</table>
							</li>
							<li>
								<!--www.sndi.ci-->
								<table width="200" border="0" cellspacing="0" cellpadding="0">
									<tbody>
										<tr>
											<td height="200px"><a href="http://www.sndi.ci" target="_blank" title="sndi.ci"><img  src="http://danielhagnoul.developpez.com/images/imageTest.png" alt="" width="200" height="200" border="0" /></a></td>
										</tr>
										<tr>
											<td align="center">www.sndi.ci</td>
										</tr>
									</tbody>
								</table>
							</li> 
							<li>
								<!--www.plusjamaisca.net-->
								<table width="200" border="0" cellspacing="0" cellpadding="0">
									<tbody>
										<tr>
											<td height="200px"><a href="http://plusjamaisca.net" target="_blank" title="plusjamaisca.net"><img  src="http://danielhagnoul.developpez.com/images/imageTest.png" alt="" width="200" height="200" border="0" /></a></td>
										</tr>
										<tr>
											<td align="center">www.plusjamaisca.net</td>
										</tr>
									</tbody>
								</table>               
							</li>   
							<li>
								<!--www.afrikiosque.com-->
								<table width="200" border="0" cellspacing="0" cellpadding="0">
									<tbody>
										<tr>
											<td height="200px"><a href="http://www.afrikiosque.com" target="_blank" title="afrikiosque.com"><img  src="http://danielhagnoul.developpez.com/images/imageTest.png" alt="" width="200" height="200" border="0" /></a></td>
										</tr>
										<tr>
											<td align="center">www.afrikiosque.com</td>
										</tr>
									</tbody>
								</table>
							</li>
							<li>      
								<!--www.aero-corporate.com-->
								<table width="200" border="0" cellspacing="0" cellpadding="0">
									<tbody>
										<tr>
											<td height="200px"><a href="http://www.aero-corporate.com/" target="_blank" title="aero-corporate.com"><img  src="http://danielhagnoul.developpez.com/images/imageTest.png" alt="" width="200" height="200" border="0" /></a></td>
										</tr>
										<tr>
											<td align="center">www.aero-corporate.com</td>
										</tr>
									</tbody>
								</table>
							</li>
							<li>
								<!--www.ifootci.com-->
								<table width="200" border="0" cellspacing="0" cellpadding="0">
									<tbody>
										<tr>
											<td height="200px"><a href="http://www.ifootci.com" target="_blank" title="ifootci.com"><img  src="http://danielhagnoul.developpez.com/images/imageTest.png" alt="" width="200" height="200" border="0" /></a></td>
										</tr>
										<tr>
											<td align="center">www.ifootci.com</td>
										</tr>
									</tbody>
								</table>
							</li>
							<li>
								<!--www.sitradesa.com-->
								<table width="200" border="0" cellspacing="0" cellpadding="0">
									<tbody>
										<tr>
											<td height="200px"><a href="http://www.sitradesa.com" target="_blank"  title="sitradesa.com"><img  src="http://danielhagnoul.developpez.com/images/imageTest.png" alt="" width="200" height="200" border="0" /></a></td>
										</tr>
										<tr>
											<td align="center">www.sitradesa.com</td>
										</tr>
									</tbody>
								</table>
							</li>
							<li>
								<!--http://www.elephantsbikers.net-->
								<table width="200" border="0" cellspacing="0" cellpadding="0">
									<tbody>
										<tr>
											<td height="200px"><a href="http://www.elephantsbikers.net" target="_blank"  title="elephantsbikers.net"><img  src="http://danielhagnoul.developpez.com/images/imageTest.png" alt="" width="200" height="200" border="0" /></a></td>
										</tr>
										<tr>
											<td align="center">www.elephantsbikers.net</td>
										</tr>
									</tbody>
								</table>
							</li>
							<li>
								<!--www.assotekinter.com-->
								<table width="200" border="0" cellspacing="0" cellpadding="0">
									<tbody>
										<tr>
											<td height="200px"><a href="http://www.assotekinter.com/" target="_blank" title="Assotekinter.com"><img  src="http://danielhagnoul.developpez.com/images/imageTest.png" alt="" width="200" height="200" border="0" /></a></td>
										</tr>
										<tr>
											<td align="center">www.assotekinter.com</td>
										</tr>
									</tbody>
								</table>
							</li>
							<li>
								<!--www.afdb-ci.org-->
								<table width="200" border="0" cellspacing="0" cellpadding="0">
									<tbody>
										<tr>
											<td height="200px"><a href="http://www.afdb-ci.org" target="_blank" title="afdb-ci.org"><img  src="http://danielhagnoul.developpez.com/images/imageTest.png" alt="" width="200" height="200" border="0" /></a></td>
										</tr>
										<tr>
											<td align="center">www.afdb-ci.org</td>
										</tr>
									</tbody>
								</table>               
							</li>
						</ul>
					</div>      
				</td>
			</tr>
		</tbody>
	</table>
</div>
 
<a href="#" class="opener"  data-dialog-opener="dialog"><img name="" src="http://danielhagnoul.developpez.com/images/imageTest.png" width="200" height="100" alt="" /></a>
 
	</section>
	<footer itemscope itemtype="http://data-vocabulary.org/Person">
		<time datetime="2011-07-05T22:50:00.000+02:00" pubdate>2011-07-05</time> <span itemprop="name">Daniel Hagnoul</span> <a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
	</footer>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
	<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/i18n/jquery-ui-i18n.min.js"></script>
	<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
	<script charset="utf-8" src="../jcarousel/lib/jquery.jcarousel.min.js"></script>
	<script>
		$(function(){
            // increase the default animation speed to exaggerate the effect
            $.fx.speeds._default = 1000;
 
            $("#dialog").dialog({
                autoOpen: false,
                show: 'blind',
				modal: true,
				height: 340,
				width: 740,
                hide: 'explode'
            });
 
            $(".opener").click(function() {
                $('#' + $(this).data("dialogOpener")).dialog('open');
                return false;
            });
 
			$('#mycarousel').jcarousel();
		});
	</script>
</body>  
</html>

Si vous souhaitez mettre une légende, vous n'avez que deux solutions :

utilisez un autre plugin qui offre cette possibilité ;
modifiez vos images pour ajouter la légende.

vladock · 06/07/2011, 12h43

J'ai recopier votre code pour l'essayer en modifiant bien sur les liens des fichier js et css à integrer mais jai bien les images qu s'affiche mais il ne defile pas

danielhagnoul · 06/07/2011, 23h42

Bonsoir

Si vous testez exclusivement (pas d'ajout de lignes de codes) et dans un fichier séparé chacun de mes exemples, je vous assure que chez moi ils fonctionnent. Vérifier bien les liens "link" et "script" pour l'inclusion du jcarousel.

vladock · 07/07/2011, 11h27

ok merci bien pour votre aide , c'est sympa de votre part.

[Edit]

Cependant j'ai un pti souci sur les liens que j'ai mis sur les miniatures , en effet lorsque je clic sur les miniatures rien ne se passe , il n'ouvre pas l'url dans une autre page , c'est comme si je n'avais pas clické

06/07/2011, 23h42	#4
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 221 Détails du profil Informations personnelles : Nom : Daniel Hagnoul Âge : 61 Localisation : Belgique Informations professionnelles : Activité : Étudiant perpétuel Secteur : Enseignement Informations forums : Inscription : février 2009 Messages : 3 221 Points : 6 767 Points : 6 767	Bonsoir Si vous testez exclusivement (pas d'ajout de lignes de codes) et dans un fichier séparé chacun de mes exemples, je vous assure que chez moi ils fonctionnent. Vérifier bien les liens "link" et "script" pour l'inclusion du jcarousel. __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	00

06/07/2011, 12h43	#3
vladock Membre du Club Inscription : août 2006 Messages : 103 Détails du profil Informations personnelles : Sexe : Informations forums : Inscription : août 2006 Messages : 103 Points : 57 Points : 57	J'ai recopier votre code pour l'essayer en modifiant bien sur les liens des fichier js et css à integrer mais jai bien les images qu s'affiche mais il ne defile pas
	00

07/07/2011, 11h27	#5
vladock Membre du Club Inscription : août 2006 Messages : 103 Détails du profil Informations personnelles : Sexe : Informations forums : Inscription : août 2006 Messages : 103 Points : 57 Points : 57	ok merci bien pour votre aide , c'est sympa de votre part. [Edit] Cependant j'ai un pti souci sur les liens que j'ai mis sur les miniatures , en effet lorsque je clic sur les miniatures rien ne se passe , il n'ouvre pas l'url dans une autre page , c'est comme si je n'avais pas clické
	00

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