Rendre gallerie jquery responsive

**kate59** · 17/06/2017, 18h33

Bonjour,

j'aimerai rendre responsive l'exemple 5 de cette galerie quelqu'un aurai il un idée et je voudrai savoir comment il faut faire pour mettre plusieurs diaporama sur la même page ?

http://www.jqueryscript.net/gallery/...lleriffic.html

le 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
<div id="page">
			<div id="container">
				<h1><a href="index.html">Galleriffic</a></h1>
				<h2>Alternate layout using custom previous/next page controls</h2>
 
				<!-- Start Advanced Gallery Html Containers -->				
				<div class="navigation-container">
					<div id="thumbs" class="navigation">
						<a class="pageLink prev" style="visibility: hidden;" href="#" title="Previous Page"></a>
 
						<ul class="thumbs noscript">
							<li>
								<a class="thumb" name="leaf" href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015.jpg" title="Title #0">
									<img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" alt="Title #0" />
								</a>
								<div class="caption">
									<div class="image-title">Title #0</div>
									<div class="image-desc">Description</div>
									<div class="download">
										<a href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_b.jpg">Download Original</a>
									</div>
								</div>
							</li>
 
							<li>
								<a class="thumb" name="drop" href="http://farm3.static.flickr.com/2404/2538171134_2f77bc00d9.jpg" title="Title #1">
									<img src="http://farm3.static.flickr.com/2404/2538171134_2f77bc00d9_s.jpg" alt="Title #1" />
								</a>
								<div class="caption">
									Any html can be placed here ...
								</div>
							</li>
 
						</ul>
						<a class="pageLink next" style="visibility: hidden;" href="#" title="Next Page"></a>
					</div>
				</div>
				<div class="content">
					<div class="slideshow-container">
						<div id="controls" class="controls"></div>
						<div id="nav" class="controls"></div>
						<div id="loading" class="loader"></div>
						<div id="slideshow" class="slideshow"></div>
					</div>
					<div id="caption" class="caption-container">
						<div class="photo-index"></div>
					</div>
				</div>
				<!-- End Gallery Html Containers -->
				<div style="clear: both;"></div>
			</div>
		</div>

le css :

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
 
div#container {
	overflow: hidden;
}
div.content {
	display: none;
	clear: both;
}
 
div.content a, div.navigation a {
	text-decoration: none;
}
div.content a:hover, div.content a:active {
	text-decoration: underline;
}
 
div.navigation a.pageLink {
	height: 77px;
	line-height: 77px;
}
 
div.controls {
	margin-top: 5px;
	height: 23px;
}
div.controls a {
	padding: 5px;
}
div.ss-controls {
	float: left;
}
div.nav-controls {
	float: right;
}
 
div.slideshow-container,
div.loader,
div.slideshow a.advance-link {
	width: 510px; /* This should be set to be at least the width of the largest image in the slideshow with padding */
}
 
div.loader,
div.slideshow a.advance-link,
div.caption-container {
	height: 502px; /* This should be set to be at least the height of the largest image in the slideshow with padding */	
}
 
div.slideshow-container {
	position: relative;
	clear: both;
	float: left;
	height: 562px;
}
 
div.loader {
	position: absolute;
	top: 0;
	left: 0;
	background-image: url('images/loader.gif');
	background-repeat: no-repeat;
	background-position: center;
}
div.slideshow span.image-wrapper {
	display: block;
	position: absolute;
	left: 0;
}
div.slideshow a.advance-link {
	display: block;
	line-height: 502px; /* This should be set to be at least the height of the largest image in the slideshow with padding */
	text-align: center;
}
 
div.slideshow a.advance-link:hover,
div.slideshow a.advance-link:active,
div.slideshow a.advance-link:visited {
	text-decoration: none;
}
div.slideshow a.advance-link:focus {
	outline: none;
}
 
div.slideshow img {
	border-style: solid;
	border-width: 1px;
}
div.caption-container {
	float: right;
	position: relative;
	margin-top: 30px;
}
span.image-caption {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}
 
div.caption-container, span.image-caption {
	width: 334px;
}
 
div.caption {
	padding: 0 12px;
}
 
div.image-title {
	font-weight: bold;
	font-size: 1.4em;
}
div.image-desc {
	line-height: 1.3em;
	padding-top: 12px;
}
div.download {
	margin-top: 8px;
}
div.photo-index {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 0 12px;
}
div.navigation-container {
	float: left;
	position: relative;
	left: 50%;
}
div.navigation {
	float: left;
	position: relative;
	left: -50%;
}
div.navigation a.pageLink {
	display: block;
	position: relative;
	float: left;
	margin: 2px;
	width: 16px;
	background-position:center center;
	background-repeat:no-repeat;
}
div.navigation a.pageLink:focus {
	outline: none;
}
 
ul.thumbs {
	position: relative;
	float: left;
	margin: 0;
	padding: 0;
}
ul.thumbs li {
	float: left;
	padding: 0;
	margin: 2px;
	list-style: none;
}
a.thumb {
	padding: 1px;
	display: block;
}
a.thumb:focus {
	outline: none;
}
ul.thumbs img {
	border: none;
	display: block;
}
div.pagination {
	clear: both;
	position: relative;
	left: -50%;
}
div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
	position: relative;
	display: block;
	float: left;
	margin-right: 2px;
	padding: 4px 7px 2px 7px;
	border: 1px solid #ccc;
}
div.pagination a:hover {
	text-decoration: none;
}
div.pagination span.current {
	font-weight: bold;
}
div.pagination span.ellipsis {
	border: none;
	padding: 5px 0 3px 2px;
}
 
div.gallery-gutter {
	clear: both;
	padding-bottom: 20px;
}

Merci pour votre aide.

Invité · 17/06/2017, 21h22

Bonjour,

Facile : trouve un autre script de galerie... déjà responsive.

**kate59** · 18/06/2017, 00h48

Bonjour j'en ai trouvé beaucoup mais aucun Avec un contenaire de texte relie à chaque image sélectionné comme ici.si quelqu'un en connais j'en ai trouver beaucoup avec des captions sur l'image mais je souhaiterai une zone de texte car mon texte pourrai avoir au moins 3 lignes min pour chaque images.merci si vous en connaissait.

Invité · 18/06/2017, 09h41

Bonjour,

Là, tu nous demandes surtout de ré-écrire le code JavaScript (et un peu de CSS).

Or, il est plus facile de modifier (uniquement) le CSS d'une galerie déjà responsive, pour changer les styles / positions de éléments,...
que de modifier le JavaScipt d'une galerie pour la rendre responsive...

La galerie que tu montres (avec les miniatures sur le coté,...) est un peu "passé de mode" (d’ailleurs, la version de jQuery proposée sur le site est jquery-1.3.2 : ce n'est pas récent...)
De plus, les questions à se poser si on veut la rendre responsive :

où mettre ces miniatures quand on réduit la fenêtre ? (en dessous ? dessus ? ...?)
et où positionner les textes ? (les enlevés ? les réduire ? ...?)
... ?

Il faut sans doute envisager de changer... d'idée (!) et de style de galerie, pour qu'elle soit plus "tendance" et moderne.

Pense aussi que les gens ont de plus en plus de tablettes et/ou écrans tactiles.
Ca change aussi la manière, les habitudes de naviguer dans une galerie-photos.

Rendre gallerie jquery responsive

Responsive design en CSS

Vue hybride

Discussions similaires

Partager

Partager