jCarousel + lightbox

**iluvatar75** · 11/08/2011, 18h21

Bonsoir,

Voila je suis en train de faire un site pour une assoce composée d'artistes, sur l'une des pages j'aimerais mettre un diaporama, j'ai trouvé sur un site un tuto qui me convient très bien par contre je voudrais savoir si il est possible de le faire sur 2 lignes ou bandes (voire plus) au lieu d'avoir comme sur la démo une bande d'image ?

En vous remerciant d'avance... !

Invité · 12/08/2011, 10h31

Bonjour,
a priori, je dirais ... en utilisant 2 fois la galerie-photos (voire plus).

Dans le code, remplacer :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
	<script type="text/javascript">
	<!--
	$(document).ready( function () {
		/*##############################
		#           CAROUSEL           #
		##############################*/
		jQuery('ul.jcarousel-skin-tango').jcarousel();
	});
	// -->
	</script>

par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
	<script type="text/javascript">
	<!--
	$(document).ready( function () {
		/* CARROUSEL 1 */
		jQuery('ul#carrousel1').jcarousel();
		/* CARROUSEL 2 */
		jQuery('ul#carrousel2').jcarousel();
	});
	// -->
	</script>

Et les 2 carrousels :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
				<ul id="carrousel1" class="jcarousel-skin-tango" style="padding-left:0;">
					<!-- .... -->
				</ul>
				<ul id="carrousel2" class="jcarousel-skin-tango" style="padding-left:0;">
					<!-- .... -->
				</ul>

A tester ...

**iluvatar75** · 12/08/2011, 16h54

Bonjour,

Alors j'ai testé et nous sommes pas très loin mais les flèches qui permettent de défiler les images disparaissent et les espaces entre les vignettes sont plus là ces dernières sont collées...

EDIT :

J'ai essayé de mettre les deux balises <ul> dans une div et là je vois apparaître les flèches mais il y en a 4 (qui marchent indépendamment)

alors que je voudrais seulement deux flèches qui bougeraient l'ensemble des vignettes...

Voici mon code :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<meta name="description" content="JQuery, PHP, html, design… // arnaud-k : un blog de geek - le blog jquery, php, html, web design" />
	<meta name="keywords" content="" />
 
	<link href="http://s3.amazonaws.com/chimp_production_storage/favicons/files/18707/small.png" rel="icon" type="image/png" />
 
	<title> &raquo; Démo : JQuery, galerie photo avec JCarousel et Lytebox  // arnaud-k : un blog de geek</title>
 
 
	<link href="http://blog.arnaud-k.fr/wp-content/themes/typebased/style.css" rel="stylesheet" type="text/css" />
	<link href="http://blog.arnaud-k.fr/wp-content/themes/typebased/styles/default.css" rel="stylesheet" type="text/css" />
 
	<link href="css/jquery.jcarousel.css" rel="stylesheet" type="text/css" />
	<link href="css/lytebox.css" rel="stylesheet" type="text/css" />
 
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.jcarousel.pack.js"></script>
	<script type="text/javascript" src="js/lytebox.js"></script>
	<script type="text/javascript">
	<!--
	$(document).ready( function () {
		/*##############################
		#           CAROUSEL           #
		##############################*/
		jQuery('ul.jcarousel-skin-tango1').jcarousel();
		jQuery('ul.jcarousel-skin-tango2').jcarousel();
	});
	// -->
	</script>
 
</head>
 
<body>
 
<div id="container">
 
	<div id="header">
		<h1><a href="http://blog.arnaud-k.fr" title="le blog jquery, php, html, web design"><img src="http://blog.arnaud-k.fr/wp-content/themes/typebased/styles/default/logo-trans.png" alt="JQuery, PHP, html, design… // arnaud-k : un blog de geek" /></a></h1>						<div id="blog-description"><a href="http://blog.arnaud-k.fr/" title="JQuery, PHP, html, design… // arnaud-k : un blog de geek">le blog jquery, php, html, web design</a></div>
 
		<a href="http://www.flickr.com/photos/arnaud-k/" id="flickr">Mon compte Flickr</a>
		<a href="http://twitter.com/arnaudk" id="twitter">Suis-moi sur Twitter</a>
		<a href="http://feeds2.feedburner.com/Arnaud-k" id="fluxrss">Le flux rss du blog</a>
 
	</div>
 
	<div id="menu">
		<ul class="wrap">
			<li class="page_item current_page_item first"><a href="http://blog.arnaud-k.fr"><span>Home</span></a></li>
                	<li class="page_item page-item-632"><a href="http://blog.arnaud-k.fr/a-propos/" title="A propos"><span>A propos</span></a></li>
			<li class="page_item page-item-637"><a href="http://blog.arnaud-k.fr/me-contacter/" title="Contact // Partenariat // Création de site web"><span>Contact // Partenariat // Création de site web</span></a></li>
		</ul>
	</div>
 
	<div class="wrap background">
 
		<div id="content" class="left-col wrap">
 
 
 
 
			<div class="post wrap page">
 
				<div class="post-meta left-col">
					<h3 class="wrap"><span class="month">juil<span class="year">2009</span></span><span class="day">23</span></h3>
					<h4 class="author"><a href="http://blog.arnaud-k.fr/author/admin/" title="Articles par arnaud">arnaud</a></h4>
				</div>
 
				<div class="post-content right-col">
				<!-- DEBUT DU CODE DE LA DEMO -->
					<h2>Démo : JQuery, galerie photo avec JCarousel et Lightbox</h2>
                  <div class="jcarousel-skin-tango">
                    <ul class="jcarousel-skin-tango1" style="padding-left:0;">
 
 
                      <li><a href="images/1-2.jpg" rel="lyteshow" title=""><img src="images/1.jpg" alt="" /></a></li>				
 
                      <li><a href="images/2-2.jpg" rel="lyteshow" title=""><img src="images/2.jpg" alt="" /></a></li>				
 
                      <li><a href="images/3-2.jpg" rel="lyteshow" title=""><img src="images/3.jpg" alt="" /></a></li>				
 
                      <li><a href="images/4-2.jpg" rel="lyteshow" title=""><img src="images/4.jpg" alt="" /></a></li>				
 
                      <li><a href="images/5-2.jpg" rel="lyteshow" title=""><img src="images/5.jpg" alt="" /></a></li>				
 
                      <li><a href="images/6-2.jpg" rel="lyteshow" title=""><img src="images/6.jpg" alt="" /></a></li>				
 
                      <li><a href="images/7-2.jpg" rel="lyteshow" title=""><img src="images/7.jpg" alt="" /></a></li>				
 
                      <li><a href="images/8-2.jpg" rel="lyteshow" title=""><img src="images/8.jpg" alt="" /></a></li>				
 
                      <li><a href="images/9-2.jpg" rel="lyteshow" title=""><img src="images/9.jpg" alt="" /></a></li>				
 
                      <li><a href="images/10-2.jpg" rel="lyteshow" title=""><img src="images/10.jpg" alt="" /></a></li>				
 
                      <li><a href="images/11-2.jpg" rel="lyteshow" title=""><img src="images/11.jpg" alt="" /></a></li>	
 
                      <li><a href="images/12-2.jpg" rel="lyteshow" title=""><img src="images/12.jpg" alt="" /></a></li>				
 
                      <li><a href="images/13-2.jpg" rel="lyteshow" title=""><img src="images/13.jpg" alt="" /></a></li>
 
 
                    </ul>
 
                    <ul class="jcarousel-skin-tango2" style="padding-left:0;">
 
 
                      <li><a href="images/1-2.jpg" rel="lyteshow" title=""><img src="images/1.jpg" alt="" /></a></li>				
 
                      <li><a href="images/2-2.jpg" rel="lyteshow" title=""><img src="images/2.jpg" alt="" /></a></li>				
 
                      <li><a href="images/3-2.jpg" rel="lyteshow" title=""><img src="images/3.jpg" alt="" /></a></li>				
 
                      <li><a href="images/4-2.jpg" rel="lyteshow" title=""><img src="images/4.jpg" alt="" /></a></li>				
 
                      <li><a href="images/5-2.jpg" rel="lyteshow" title=""><img src="images/5.jpg" alt="" /></a></li>				
 
                      <li><a href="images/6-2.jpg" rel="lyteshow" title=""><img src="images/6.jpg" alt="" /></a></li>				
 
                      <li><a href="images/7-2.jpg" rel="lyteshow" title=""><img src="images/7.jpg" alt="" /></a></li>				
 
                      <li><a href="images/8-2.jpg" rel="lyteshow" title=""><img src="images/8.jpg" alt="" /></a></li>				
 
                      <li><a href="images/9-2.jpg" rel="lyteshow" title=""><img src="images/9.jpg" alt="" /></a></li>				
 
                      <li><a href="images/10-2.jpg" rel="lyteshow" title=""><img src="images/10.jpg" alt="" /></a></li>				
 
                      <li><a href="images/11-2.jpg" rel="lyteshow" title=""><img src="images/11.jpg" alt="" /></a></li>	
 
                      <li><a href="images/12-2.jpg" rel="lyteshow" title=""><img src="images/12.jpg" alt="" /></a></li>				
 
                      <li><a href="images/13-2.jpg" rel="lyteshow" title=""><img src="images/13.jpg" alt="" /></a></li>
 
 
                    </ul>
                  </div>
 
				<p>Photos Solidays 2009 &copy; Arnaud Koncina (<a href="http://www.flickr.com/photos/arnaud-k/sets/72157621438293381/">voir tout l'album flickr</a>).</p>
 
				<p><a href="#">Retour au Tutorial</a></p>
 
 
 
<!-- You can start editing here. -->
<div class="fix"></div>
</div> <!-- end #respond -->
 
 
 
				</div>
 
			</div>
 
			<!--- Post Ends -->
 
		</div>
 
				<!--- Sidebar Starts -->
 
		<div id="sidebar" class="right-col">
			<div id="sidebar_in">
 
	                        <a href="#">Retour au tutorial</a>
 
			</div>
 
		</div>
 
 
		<!--- Sidebar Ends -->		
	</div>
 
</div>
 
<div id="footer" class="wrap">
 
	<div class="left-col">
		<div class="popular wrap">
			<h2>meilleurs articles</h2>
		</div>
	</div>
 
	<div id="subscribe" class="right-col">
		<h2>Flux RSS</h2>
		<p class="rss">Si tu as aim&eacute; l'article, n'h&eacute;site &agrave; t'abonner au flux RSS.</p>
		<p>
		<a href="http://feeds2.feedburner.com/Arnaud-k">Articles</a><br />
		</p>
	</div>
 
<div id="copyright" class="wrap">
 
	<div class="left-col">
		<p>&copy; <?= date('Y') ?><a href="http://arnaud-k.fr"> Arnaud Koncina</a></p>
	</div>
 
	<div class="right-col">
		<p><a href="http://phpfonctions.fr"</a>Fonctions PHP</a> | <a href="http://www.g-ski.com">gestion en ligne d'une station de ski</a></p>
	</div>
 
</div>
 
</div>
<?php wp_footer(); ?>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-8374069-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>

Invité · 12/08/2011, 17h18

La bonne syntaxe est celle que je t'ai donnée.
Mais effectivement, ce sont 2 galeries indépendantes.

**iluvatar75** · 12/08/2011, 22h39

Bon je laisse ce projet entre parenthèse, je m'absente 10 jours mais si il y a quelqu'un qui pourrait me guider ce serait trop nice

(Un grand merci à jreaux62 quand même

)

**iluvatar75** · 31/08/2011, 17h55

Re-bonjour !

Je remonte ce sujet car je n'ai toujours pas trouvé de solution

Il y a surement une ligne de code à rajouter tout bêtement mais je ne vois pas...

Avez-vous une solution ?

**iluvatar75** · 31/08/2011, 18h17

J'ai trouvé un lien qui montre un peu près ce que je veux :
exemple (sans la grande image à droite)

faire une petite galerie de 6 images, par exemple, et qu'on puisse faire défiler ces vignettes à droite ou à gauche...

**iluvatar75** · 01/09/2011, 15h14

Je vous ai mis en pièce jointe un croquis pour vous montrer ce que je veux...

croquis

ps. il faut voir l'image à l'horizontal

jCarousel + lightbox

jQuery

Discussions similaires

Partager

Partager