Subversion Repositories eFlore/Applications.cel

Rev

Rev 3972 | Rev 3983 | Go to most recent revision | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
3630 idir 1
<div id="bloc-infos-img"></div>
2
<div id="volet" class="col-lg-4 col-12">
3
	<div id="volets-fct">
4
		<a id="retour-metas" class="btn hidden" data-volet="meta"><i class="fas fa-info-circle"></i>&nbsp;<i class="fas fa-angle-double-left"></i></a>
5
		<div class="nettoyage-volet haut"></div>
3826 idir 6
		<div id="bloc-tags" class="bloc-volet tags hidden todo" data-volet="tags">
3630 idir 7
			<h2>Tags</h2>
8
			<h3>Tags CEL (propres à l'auteur)</h3>
9
			<form id="form-tags-auteur">
10
				<input type="text" name="null" id="tags-auteur" placeholder="Aucun tag ajouté par l'auteur de l'observation" disabled>
11
			</form>
12
			<h3>Tags Pictoflora</h3>
13
			<div id="tags-pf">
14
				<a id="port" class="btn tag">Port</a><!--
15
				--><a id="fleur" class="btn tag">Fleur</a><!--
16
				--><a id="fruit" class="btn tag">Fruit</a><!--
17
				--><a id="feuille" class="btn tag">Feuille</a><!--
18
				--><a id="ecorce" class="btn tag">Ecorce</a><!--
19
				--><a id="rameau" class="btn tag">Rameau</a><!--
20
				--><a id="planche" class="btn tag">Planche</a><!--
21
				--><a id="insecte" class="btn tag">Insecte</a>
22
			</div>
23
			<label for="saisir-tag">Saisir un tag</label>
24
			<input type="text" class="form-control" id="saisir-tag" name="saisir-tag">
25
			<div id="tags-pf-supp"></div>
3960 julien 26
			<a id="signaler-photo" class="btn btn-sm btn-warning hidden"><i
27
					class="fas fa-exclamation-triangle"></i>&nbsp;Signaler une photo inappropriée</a>
28
			<a id="signaler-erreur-id-bis" class="btn btn-sm btn-warning signaler-erreur-obs hidden"
29
			   title="Signaler une mauvaise identification ou en proposer une autre via l'outil identiplante" target="_blank"><i class="fas fa-exclamation-triangle"></i>&nbsp;Signaler une erreur d'identification</a>
3630 idir 30
		</div>
3826 idir 31
		<div id="bloc-noter" class="bloc-volet noter hidden todo" data-volet="noter">
3630 idir 32
			<h2>Protocoles</h2>
33
			<select name="protocole" id="protocole" class="form-control custom-select">
34
				<option value="" selected hidden>Choix du protocole</option>
35
				<option id="capitalisation_image" value="capitalisation_image">Capitalisation d'images</option>
36
				<option id="aide_identification" value="aide_identification">Aide à l'identification</option>
37
				<option id="defi_photo" value="defi_photo">Défi photo</option>
38
				<option id="gentiane_azure" value="gentiane_azure">Enquête Gentiane-azuré</option>
39
				<option id="arbres_tetards" value="arbres_tetards">Arbres têtards</option>
40
			</select>
3948 julien 41
			<p id="message-protocole" class="message mt-3">
3630 idir 42
				Choisissez un protocole pour pouvoir noter la photo
43
				<!-- le message change en fonction du protocole -->
44
			</p>
45
			<div id="bloc-notes-protocole" class="hidden">
46
				<ul id="notes-protocole-fct">
47
					<li id="plus-infos-protocole" class="row">
48
						<div class="col-10 label">Plus d'infos sur le wiki</div>
3960 julien 49
						<a class="bouton btn btn-sm btn-outline-secondary" href="https://www.tela-botanica.org/wikini/pictoflora/wakka.php?wiki=PagePrincipale" target="_blank"><i
3948 julien 50
								class="fas fa-question-circle"></i></a>
3630 idir 51
					</li>
3948 julien 52
					<li id="note" class="row">
3630 idir 53
						<div class="col-5 label">Notez</div>
3948 julien 54
						<div class="col-5 contenu"><!-- étoiles -->
55
							<i id="rating-star-1" class="far fa-star notation-star"></i>
56
							<i id="rating-star-2" class="far fa-star notation-star"></i>
57
							<i id="rating-star-3" class="far fa-star notation-star"></i>
58
							<i id="rating-star-4" class="far fa-star notation-star"></i>
59
							<i id="rating-star-5" class="far fa-star notation-star"></i>
60
						</div>
61
							<a id="note-remove"
62
							   class="bouton btn btn-sm btn-outline-secondary"><i class="fas fa-backspace"></i></a>
3630 idir 63
					</li>
3948 julien 64
					<li id="note-moyenne" class="row d-flex justify-content-between">
3630 idir 65
						<div class="col-5 label">Note Moyenne</div>
66
						<div class="col-5 contenu" style="text-align:right;"></div>
67
					</li>
3948 julien 68
					<li id="note-count" class="row d-flex justify-content-between">
3630 idir 69
						<div class="col-5 label">Nombre de votes</div>
70
						<div class="col-5 contenu" style="text-align:right;"></div>
71
					</li>
72
				</ul>
73
			</div>
74
		</div>
3826 idir 75
		<div id="bloc-signaler" class="bloc-volet signaler hidden todo" data-volet="signaler">
3630 idir 76
			<h2>Signaler</h2>
77
			<h3>Signaler une photo inappropriée</h3>
78
			<p id="message-signaler" class="message">
79
				En signalant cette photo vous participez à la qualification des données d'observation botaniques. Les photos qualifiées d'inappropriées pour l'une des raison ci-dessous ne seront pas affichées parmi les autres illustrations sur eFlore, voire pourront être dépubliées.
80
			</p>
81
			<li id="exemple-inapproprie" class="row">
82
				<div class="col-10 label">Exemple de photos inappropriées</div>
83
				<a class="bouton btn btn-sm btn-outline-secondary"><i class="fas fa-question-circle"></i></a>
84
			</li>
85
			<li id="plus-infos-signaler" class="row">
86
				<div class="col-10 label">Plus d'infos sur le wiki</div>
3950 julien 87
				<a class="bouton btn btn-sm btn-outline-secondary"
88
				   href="https://www.tela-botanica.org/wikini/AideCarnetEnLigne/wakka.php?wiki=AideWidgetPhoto" target="_blank"><i class="fas fa-question-circle"></i></a>
3630 idir 89
			</li>
90
			<form id="type-inapprorie">
91
				<div class="list-label">
92
					En quoi cette photo est-elle inappropriée ?
93
				</div>
94
				<div class="list">
95
					<div class="form-check">
96
						<input type="checkbox" id="non-vegetale" name="type-inapprorie" class="non-vegetale form-check-input" value="non-vegetale">
97
						<label for="non-vegetale" class="non-vegetale form-check-label">Photo non végétale</label>
98
					</div>
99
					<div class="form-check">
100
						<input type="checkbox" id="ecran" name="type-inapprorie" class="ecran form-check-input" value="ecran">
101
						<label for="ecran" class="ecran form-check-label">Photo d'écran</label>
102
					</div>
103
					<div class="form-check">
104
						<input type="checkbox" id="floue-pixelisee" name="type-inapprorie" class="floue-pixelisee form-check-input" value="floue-pixelisee">
105
						<label for="floue-pixelisee" class="floue-pixelisee form-check-label">Photo floue ou pixelisée</label>
106
					</div>
107
					<div class="form-check">
108
						<input type="checkbox" id="cultivee-pot" name="type-inapprorie" class="cultivee-pot form-check-input" value="cultivee-pot">
109
						<label for="cultivee-pot" class="cultivee-pot form-check-label">Plante cultivée / en pot</label>
110
					</div>
111
				</div>
112
			</form>
3823 idir 113
			<a id="signaler-erreur-id-signaler" class="btn btn-sm btn-warning signaler-erreur-obs" title="Signaler une mauvaise identification ou en proposer une autre via l'outil identiplante" target="_blank"><i class="fas fa-exclamation-triangle"></i>&nbsp;Signaler une erreur d'identification</a>
3630 idir 114
		</div>
115
 
116
 
117
		<!-- pas pour la version 1 -->
3826 idir 118
		<div id="bloc-revision" class="bloc-volet revision hidden todo" data-volet="revision">
3630 idir 119
			<h2>Révision</h2>
120
			<h3>Proposition de détermination</h3>
121
 
122
		</div>
123
 
124
 
125
 
126
		<div id="bloc-meta" class="bloc-volet meta" data-volet="meta">
127
			<h2>Métadonnées</h2>
128
			<ul id="contenu-meta">
129
				<li id="nom" class="row">
130
					<div class="col-5 label">Nom</div>
131
					<div class="col-5 contenu"></div>
3972 julien 132
					<a class="bouton btn btn-sm btn-outline-secondary" target="_blank" title="Lien vers eflore"
133
					><i class="fas fa-search"></i></a>
3630 idir 134
				</li>
135
				<li id="localisation" class="row">
136
					<div class="col-5 label">Localisation</div>
137
					<div class="col-5 contenu"></div>
3972 julien 138
					<a id="obs-localisation" class="bouton btn btn-sm btn-outline-secondary"
139
					   title="Afficher la localisation"><i
140
							class="fas fa-map-marker-alt"></i></a>
3630 idir 141
				</li>
142
				<li id="auteur" class="row">
143
					<div class="col-5 label">Auteur</div>
144
					<div class="col-5 contenu"></div>
3972 julien 145
					<a class="bouton btn btn-sm btn-outline-secondary" target="_blank"
146
					   title="Afficher le profil"><i class="fas fa-user"></i></a>
3630 idir 147
				</li>
148
				<li id="date-obs" class="row">
149
					<div class="col-5 label">Date d'observation</div>
150
					<div class="col-5 contenu"></div>
151
				</li>
3823 idir 152
				<li id="commentaire" class="row">
3630 idir 153
					<div class="col-5 label">Commentaires</div>
154
					<div class="col-5 contenu"></div>
155
				</li>
156
				<li id="certitude" class="row">
157
					<div class="col-5 label">Certitude de l'identification</div>
158
					<div class="col-5 contenu"></div>
159
				</li>
160
				<li id="fiabilite" class="row">
3825 idir 161
					<div class="col-5 label">Grade</div>
3630 idir 162
					<div class="col-5 contenu"></div>
3972 julien 163
					<a
164
							href="https://www.tela-botanica.org/ressources/donnees/qualification-des-donnees-dobservation/#standard" target="_blank" class="bouton btn btn-sm btn-outline-secondary"
165
					   title="Voir plus d'information sur les grades"><i class="fas fa-question-circle"></i></a>
3630 idir 166
				</li>
167
			</ul>
168
			<a id="plus-meta" class="afficher-plus"><i class="fas fa-angle-down"></i>&nbsp;Afficher plus de metadonnées sur l'observation</a>
169
			<ul id="contenu-meta-plus"></ul>
170
			<ul id="contenu-meta-suite">
171
				<li id="num-photo" class="row">
172
					<div class="col-5 label">Photo n°</div>
173
					<div class="col-5 contenu"></div>
174
				</li>
175
				<li id="licence" class="row">
176
					<div class="col-5 label">Licence</div>
3823 idir 177
					<div class="col-5 contenu">
178
						<a target="_blank" href="http://creativecommons.org/licenses/by-sa/2.0/fr/">CC-BY-SA 2.0 FR</a>
179
					</div>
3630 idir 180
				</li>
181
			</ul>
3823 idir 182
 
3971 julien 183
			<a id="signaler-erreur-id" class="btn btn-sm btn-warning signaler-erreur-obs"
3960 julien 184
			   title="Signaler une mauvaise identification ou en proposer une autre via l'outil identiplante" target="_blank" href="https://www.tela-botanica.org/appli:identiplante"><i class="fas fa-exclamation-triangle"></i>&nbsp;Signaler une erreur d'identification</a>
3823 idir 185
 
3630 idir 186
			<h2>Téléchargement</h2>
187
			<ul id="contenu-telechargement">
188
				<li id="titre-original" class="row">
189
					<div class="col-5 label">Titre original</div>
3829 idir 190
					<div class="col-7 contenu"></div>
3630 idir 191
				</li>
192
				<li id="date-photo" class="row">
193
					<div class="col-5 label">Date de la photo</div>
3829 idir 194
					<div class="col-7 contenu"></div>
3630 idir 195
				</li>
196
				<li id="Licence-bis" class="row">
197
					<div class="col-5 label">Licence</div>
3829 idir 198
					<div class="col-7 contenu">
3823 idir 199
						<a target="_blank" href="http://creativecommons.org/licenses/by-sa/2.0/fr/">CC-BY-SA 2.0 FR</a>
200
					</div>
3630 idir 201
				</li>
202
				<li id="attribution" class="row">
3823 idir 203
					<div class="col-12 label">Attribution</div>
204
					<div class="col-12 contenu">
205
						<input id="attribution-copy" type="text" name="attribution-copy" rows="4" class="form-control" readonly="readonly" style="width: 100%; height: 100%;">
206
					</div>
3630 idir 207
				</li>
208
				<li id="url" class="row">
3823 idir 209
					<div class="col-12 label">Url</div>
210
					<div class="col-12 contenu">
211
						<input id="url-copy" type="text" name="url-copy" rows="2" class="form-control" readonly="readonly" style="width: 100%; height: 100%;">
212
					</div>
3630 idir 213
				</li>
214
			</ul>
3825 idir 215
			<ul id="contenu-telechargement-suite" class="mb-0">
3630 idir 216
				<li id="autres-formats" class="row">
3825 idir 217
					<div class="col-12 label">Autres formats</div>
218
					<div class="col-12 contenu">
3630 idir 219
						<select name="formats" id="formats" class="form-control custom-select">
3823 idir 220
						<?php foreach ($formats_description as $format => $description):?>
221
							<option value="<?php echo $format; ?>" <?php echo $format === 'O' ? 'selected' : ''; ?>><?php echo $description; ?></option>
222
						<?php endforeach; ?>
3630 idir 223
						</select>
224
					</div>
225
				</li>
226
			</ul>
3825 idir 227
			<a href="" data-url-base-telechargement="<?php echo $url_base_telechargement; ?>" id="telecharger" class="btn btn-success mt-0"><i class="fas fa-upload"></i>&nbsp;Télécharger</a>
3960 julien 228
			<h2 class="todo hidden">Partagez !</h2>
229
			<p class="message todo hidden">
3630 idir 230
				Partagez cette photo sur les réseaux sociaux
231
			</p>
3960 julien 232
			<div id="boutons-reseaux-sociaux" class="todo hidden">
3950 julien 233
				<a id="facebook" class="btn btn-outline-secondary btn-lg"
234
				   href="https://www.facebook.com/telabotanica/" target="_blank"><i class="fab fa-facebook-f"></i></a>
235
				<a id="twitter" class="btn btn-outline-secondary btn-lg" href="https://twitter.com/TelaBotanica" target="_blank"><i
236
						class="fab fa-twitter"></i></a>
237
				<a id="mail" class="btn btn-outline-secondary btn-lg" href="mailto:cel_remarques@tela-botanica.org"><i class="fas fa-envelope"></i>
238
				</a>
3630 idir 239
			</div>
240
		</div>
241
		<div id="bloc-modif" class="bloc-volet modif hidden" data-volet="modif">
242
			<h2>Modifier la photo</h2>
3826 idir 243
			<h3 class="todo">Faire pivoter la photo</h3>
244
			<div id="pivoter-photo" class="d-flex justify-content-around todo">
3630 idir 245
				<div id="bloc-pivoter-droite" class="d-flex flex-column">
246
					<label for="pivoter-droite">Pivoter à droite</label>
247
					<a id="pivoter-droite" class="btn btn-success btn-lg"><i class="fas fa-redo"></i></a>
248
				</div>
249
				<div id="bloc-pivoter-gauche" class="d-flex flex-column">
250
					<label for="pivoter-gauche">Pivoter à gauche</label>
251
					<a id="pivoter-gauche" class="btn btn-success btn-lg"><i class="fas fa-undo"></i></a>
252
				</div>
253
			</div>
254
			<h3>Régénérer miniature</h3>
255
			<p id="message-regenerer" class="message">
256
				Vous avez remarqué un problème dans l'affichage de la miniature de cette photo ? Vous pouvez la régénérer ci-dessous !
257
			</p>
258
			<a id="regenerer-miniature" class="btn btn-warning btn-lg"><i class="fas fa-recycle"></i>&nbsp;Régénérer la miniature</a>
259
		</div>
3826 idir 260
		<div id="bloc-aide" class="bloc-volet aide hidden todo" data-volet="aide">
3630 idir 261
			<h2>Aide</h2>
3973 julien 262
			<div id="texte-aide" class="message">
263
				<p>
264
					Cette galerie d'images permet de consulter les photos accompagnant les observations saisies dans le Carnet en Ligne.
265
					C'est aussi une plateforme collaborative où chacun peut caractériser l'ensemble des photos, grâce à
266
					un système de votes et de tags.</p>
3630 idir 267
 
3973 julien 268
				<p>Cette caractérisation est mise à disposition des différents projets du réseau, par exemple : la
269
					sélection de photos adaptées à la détermination, des projets de sciences participatives et
270
					observatoires citoyens (Pl@ntNet, Arbres Têtards, etc.), le Défi Photo et tout autre projet qui
271
					nous sera proposé.</p>
3630 idir 272
 
3973 julien 273
				<p>Pour en savoir plus sur les différents protocoles et le fonctionnement du système de vote (étoile)
274
					et de tags (étiquette), consulter le wiki d'aide de PictoFlora.
275
					<a href="https://www.tela-botanica.org/wikini/pictoflora/wakka.php?wiki=CommentParticiper" target="_blank">https
276
						://www.tela-botanica.org/wikini/pictoflora/wakka.php?wiki=CommentParticiper</a></p>
277
 
278
				<h3>Cet outil étant collaboratif, chacun peut participer librement !</h3>
279
 
280
				<p>En bas de la photographie, vous trouverez différentes icônes correspondant à des onglets qui
281
					s'afficheront à gauche ou à la place de la photo selon la taille de votre écran. Sur petit écran,
282
					pour cacher l'onglet, cliquer sur la barre avec la double fléche vers le bas.</p>
283
 
284
				<p>Le premier onglet <i class="fas fa-info-circle"></i> contient les informations sur l'observation à laquelle est liée la photo
285
					ainsi que les liens de téléchargement. Vous trouverez également un lien pour signaler une mauvaise
286
					identification.</p>
287
 
288
				<p>Le deuxième onglet <i class="far fa-star"></i> permet de voter sur la qualité d'une image selon différents protocoles
289
					reflettant différents aspects de la photo. Par exemple,
290
					dans le protocole "Défi Photo", la note représente l'appréciation personnelle de l'esthétique de la photo et de son adéquation avec le thème du défi en cours, alors que dans le protocole "Aide à l'identification" la note qualifie la pertinence de la photo pour aider à la détermination de l'espèce.
291
					Pour noter une photo, choisir un protocole puis utiliser les étoiles qui se colorent en vert. Les notes vont de 1 à 5. Pour supprimer un vote,
292
					cliquer sur la croix à côté des étoiles.</p>
293
 
294
				<p>Le troisième onglet <i class="fas fa-tags"></i> permet de qualifier les photos et de leur associer un ou plusieurs
295
					mots-clés ou tags. Vous pourrez également y consulter les tags déjà associés à la photos :</p>
296
				<ul><li>les tags du Carnet en Ligne, qui ont été ajoutés par l'auteur de la photo et apparaissent dans un cadre gris foncé. Ils ne sont pas modifiables depuis PictoFlora, mais seulement depuis le CEL de l'utilisateur qui les a ajoutés.</li>
297
					<li>les tags dits publics ou tags PictoFlora qui ont été ajoutés via cette interface et apparaissent dans un cadre gris plus clair. Ils sont modifiables par l'ensemble de la communauté (il est donc conseillé de faire un usage non abusif de cette fonctionnalité).</li></ul>
298
				<p>Pour ajouter un mot-clé, cliquer sur un terme déjà défini comme port, fleur ou feuille, ou ajouter
299
					votre propre tag.</p>
300
 
301
				<p>Le quatrième onglet <i
302
						class="fas fa-redo-alt"></i> permet de modifier une photo en la faisant pivoter ou en régénérant la
303
					miniature si vous avez remarqué un problème dans son affichage.</p>
304
 
305
				<p>Le cinquième onglet <i
306
						class="fas fa-question-circle"></i> contient cette aide ainsi qu'un lien vers le wiki expliquant comment
307
					paramétrer et intégrer ce widget à votre site.</p>
308
 
309
				<p>Vous pouvez passer d'une image à l'autre, en cliquant sur les fléches à gauche ou à droite. Pour
310
					refermer une image et retourner à la galerie, cliquer sur la croix en haut à droite.
311
				</p>
312
			</div>
313
 
3630 idir 314
			<ul id="aide-plus">
315
				<li id="plus-infos" class="row">
316
					<div class="col-10 label">Plus d'infos sur le wiki</div>
3973 julien 317
					<a class="bouton btn btn-sm btn-outline-secondary" target="_blank"
318
					   href="https://www.tela-botanica.org/wikini/AideCarnetEnLigne/wakka.php?wiki=AideCELWidgetPhoto" title="Lien vers le wiki"><i
3950 julien 319
							class="fas fa-question-circle"></i></a>
3630 idir 320
				</li>
321
				<li id="autres-questions" class="row">
322
					<div class="col-10 label">D'autres questions ? Écrivez-nous !</div>
3950 julien 323
					<a class="bouton btn btn-sm btn-outline-secondary"
3973 julien 324
					   href="mailto:cel_remarques@tela-botanica.org"
325
					   title="Envoyer un courriel"><i class="fas fa-envelope"></i></a>
3630 idir 326
				</li>
327
			</ul>
328
 
329
		</div>
330
 
331
		<div class="nettoyage-volet bas"></div>
1480 aurelien 332
	</div>
3630 idir 333
 
334
</div>
335
<div id="info-img-galerie" class="carousel col-lg-8 col-12" data-ride="carousel" data-interval="false">
336
	<div class="carousel-inner h-100 w-100">
3837 idir 337
		<?php $urls = array_keys($infos_images); ?>
338
		<?php for($index = 0; $index < count($urls); $index++):?>
3630 idir 339
			<div id="img-cadre-<?php echo $index; ?>" class="carousel-item">
3837 idir 340
				<img id="illustration-<?php echo $index;?>" class="d-block align-middle" src="<?php echo $urls[$index];?>" alt="" data-width="<?php echo $infos_image[$urls[$index]]['width'];?>" data-height="<?php echo $infos_image[$urls[$index]]['height'];?>">
3630 idir 341
			</div>
342
		<?php endfor; ?>
343
		<a id="precedent" class="carousel-control-prev carousel-control" href="#info-img-galerie" role="button" data-slide="prev">
344
			<i class="fas fa-chevron-circle-left"></i>
345
			<span class="sr-only">Precedent</span>
1480 aurelien 346
		</a>
3630 idir 347
		<a id="suivant" class="carousel-control-next carousel-control" href="#info-img-galerie" role="button" data-slide="next">
348
			<i class="fas fa-chevron-circle-right"></i>
349
			<span class="sr-only">Suivant</span>
350
		</a>
1480 aurelien 351
	</div>
352
</div>
3630 idir 353
<div id="boutons-footer">
354
	<div id="bloc-fct" class="">
3961 julien 355
		<a id="bouton-meta" class="btn bouton-fct meta actif" data-volet="meta"
356
		   title="Informations / métadonnées"><i class="fas fa-info-circle"></i></a>
357
		<a id="bouton-noter" class="btn bouton-fct noter" data-volet="noter"
358
		   title="noter la photo"><i class="far fa-star"></i></a>
359
		<a id="bouton-tags" class="btn bouton-fct tags todo" data-volet="tags"
360
		   title="tags"><i class="fas fa-tags"></i></a>
361
		<a id="bouton-signaler" class="btn bouton-fct signaler todo hidden" data-volet="signaler" title="signaler"><i
3960 julien 362
				class="fas fa-exclamation-triangle"></i></a>
3961 julien 363
		<a id="bouton-revision" class="btn bouton-fct revision todo hidden" data-volet="revision" title="révision"><i
3960 julien 364
				class="fas fa-edit"></i></a>
3961 julien 365
		<a id="bouton-modif" class="btn bouton-fct modif" data-volet="modif" title="modifier la photo"><i
366
				class="fas fa-redo-alt"></i></a>
367
		<a id="bouton-aide" class="btn bouton-fct aide todo" data-volet="aide" title="aide"><i
368
				class="fas fa-question-circle"></i></a>
3630 idir 369
	</div>
370
	<a id="retour-galerie" class="btn btn-outline-dark btn-lg bouton-fct hidden"><i class="fa fa-angle-double-down" aria-hidden="true"></i></a>
371
</div>
372
<script type="text/Javascript">
373
	//<![CDATA[
374
		var widgetProp = {
3837 idir 375
			'keys':[<?php echo '"'.implode($keys, '","').'"'; ?>],
3823 idir 376
			'urlWidget'                    : "<?php echo $url_widget; ?>",
377
			'urls'                         : [<?php echo '"'.implode($urls, '","').'"'; ?>],
3837 idir 378
			'infosImages'                  : <?php echo json_encode($infos_images); ?>,
3823 idir 379
			'urlImage'                     : "<?php echo $url_image; ?>",
3837 idir 380
			'indexPremiereImage'           : <?php echo array_search($url_image, $urls); ?>,
3823 idir 381
			'tailleMax'                    : 580,
382
			'popupUrl'                     : "<?php echo $popup_url; ?>",
383
			'urlBaseTelechargement'        : "<?php echo $url_base_telechargement; ?>",
3958 julien 384
			'urlServiceRegenererMiniature' : "<?php echo $url_ws_regenerer_img; ?>",
385
			'userId'       				   : "<?php echo $userId; ?>",
386
			'token'       				   : "<?php echo $token; ?>",
387
			'protocoles'				   : <?php echo json_encode($protocoles); ?>
3630 idir 388
		};
389
		$( document ).ready( function() {
390
			popup = new WidgetPhotoPopup( widgetProp );
391
			popup.init();
392
		});
393
	//]]>
394
</script>