Subversion Repositories eFlore/Applications.cel

Rev

Rev 3989 | Details | Compare with Previous | Last modification | View Log | RSS feed

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