Subversion Repositories eFlore/Applications.cel

Rev

Rev 2993 | Rev 3823 | Go to most recent revision | Show entire file | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed

Rev 2993 Rev 3630
Line -... Line 103...
- 
 
 103 
 
- 
 
 104 
 
- 
 
 105 
		</div>
- 
 
 106 
 
- 
 
 107 
 
- 
 
 108 
		<!-- pas pour la version 1 -->
- 
 
 109 
		<div id="bloc-revision" class="bloc-volet revision hidden" data-volet="revision">
- 
 
 110 
			<h2>Révision</h2>
- 
 
 111 
			<h3>Proposition de détermination</h3>
- 
 
 112 
 
- 
 
 113 
		</div>
- 
 
 114 
 
- 
 
 115 
 
- 
 
 116 
 
- 
 
 117 
		<div id="bloc-meta" class="bloc-volet meta" data-volet="meta">
- 
 
 118 
			<h2>Métadonnées</h2>
- 
 
 119 
			<ul id="contenu-meta">
- 
 
 120 
				<li id="nom" class="row">
- 
 
 121 
					<div class="col-5 label">Nom</div>
- 
 
 122 
					<div class="col-5 contenu"></div>
- 
 
 123 
					<a class="bouton btn btn-sm btn-outline-secondary"><i class="fas fa-search"></i></a>
- 
 
 124 
				</li>
- 
 
 125 
				<li id="localisation" class="row">
- 
 
 126 
					<div class="col-5 label">Localisation</div>
- 
 
 127 
					<div class="col-5 contenu"></div>
- 
 
 128 
					<a class="bouton btn btn-sm btn-outline-secondary"><i class="fas fa-map-marker-alt"></i></a>
- 
 
 129 
				</li>
- 
 
 130 
				<li id="auteur" class="row">
- 
 
 131 
					<div class="col-5 label">Auteur</div>
- 
 
 132 
					<div class="col-5 contenu"></div>
- 
 
 133 
					<a class="bouton btn btn-sm btn-outline-secondary"><i class="fas fa-user"></i></a>
- 
 
 134 
				</li>
- 
 
 135 
				<li id="date-obs" class="row">
- 
 
 136 
					<div class="col-5 label">Date d'observation</div>
- 
 
 137 
					<div class="col-5 contenu"></div>
- 
 
 138 
				</li>
- 
 
 139 
				<li id="commentaires" class="row">
- 
 
 140 
					<div class="col-5 label">Commentaires</div>
- 
 
 141 
					<div class="col-5 contenu"></div>
- 
 
 142 
				</li>
- 
 
 143 
				<li id="certitude" class="row">
- 
 
 144 
					<div class="col-5 label">Certitude de l'identification</div>
- 
 
 145 
					<div class="col-5 contenu"></div>
- 
 
 146 
				</li>
- 
 
 147 
				<li id="fiabilite" class="row">
- 
 
 148 
					<div class="col-5 label">Fiabilité</div>
- 
 
 149 
					<div class="col-5 contenu"></div>
- 
 
 150 
					<a class="bouton btn btn-sm btn-outline-secondary"><i class="fas fa-question-circle"></i></a>
- 
 
 151 
				</li>
- 
 
 152 
			</ul>
- 
 
 153 
			<a id="plus-meta" class="afficher-plus"><i class="fas fa-angle-down"></i>&nbsp;Afficher plus de metadonnées sur l'observation</a>
126 
 
 154 
			<ul id="contenu-meta-plus"></ul>
- 
 
 155 
			<ul id="contenu-meta-suite">
- 
 
 156 
				<li id="num-photo" class="row">
- 
 
 157 
					<div class="col-5 label">Photo n°</div>
- 
 
 158 
					<div class="col-5 contenu"></div>
- 
 
 159 
				</li>
- 
 
 160 
				<li id="licence" class="row">
- 
 
 161 
					<div class="col-5 label">Licence</div>
- 
 
 162 
					<div class="col-5 contenu"></div>
- 
 
 163 
				</li>
- 
 
 164 
			</ul>
- 
 
 165 
			<a id="signaler-erreur-id" class="btn btn-sm btn-warning"><i class="fas fa-exclamation-triangle"></i>&nbsp;Signaler une erreur d'identification</a>
127 
<div id="info-img-galerie">
 166 
			<h2>Téléchargement</h2>
- 
 
 167 
			<ul id="contenu-telechargement">
- 
 
 168 
				<li id="titre-original" class="row">
- 
 
 169 
					<div class="col-5 label">Titre original</div>
- 
 
 170 
					<div class="col-5 contenu"></div>
- 
 
 171 
				</li>
- 
 
 172 
				<li id="date-photo" class="row">
- 
 
 173 
					<div class="col-5 label">Date de la photo</div>
- 
 
 174 
					<div class="col-5 contenu"></div>
- 
 
 175 
				</li>
- 
 
 176 
				<li id="Licence-bis" class="row">
- 
 
 177 
					<div class="col-5 label">Licence</div>
- 
 
 178 
					<div class="col-5 contenu"></div>
- 
 
 179 
				</li>
- 
 
 180 
				<li id="attribution" class="row">
- 
 
 181 
					<div class="col-5 label">Attribution</div>
- 
 
 182 
					<div class="col-7 contenu message"></div>
- 
 
 183 
				</li>
- 
 
 184 
				<li id="url" class="row">
- 
 
 185 
					<div class="col-5 label">Url</div>
- 
 
 186 
					<div class="col-5 contenu"></div>
- 
 
 187 
				</li>
128 
	<div class="conteneur-precedent">
 188 
			</ul>
- 
 
 189 
			<a id="telecharger" class="btn btn-success"><i class="fas fa-upload"></i>&nbsp;Télécharger</a>
- 
 
 190 
			<ul id="contenu-telechargement-suite">
- 
 
 191 
				<li id="autres-formats" class="row">
- 
 
 192 
					<div class="col-5 label">Autres formats</div>
- 
 
 193 
					<div class="col-7 contenu">
- 
 
 194 
						<select name="formats" id="formats" class="form-control custom-select">
- 
 
 195 
							<option value="" selected hidden>Carrée, rognée...</option>
- 
 
 196 
						</select>
- 
 
 197 
					</div>
- 
 
 198 
				</li>
- 
 
 199 
			</ul>
- 
 
 200 
			<h2>Partagez !</h2>
- 
 
 201 
			<p class="message">
- 
 
 202 
				Partagez cette photo sur les réseaux sociaux
- 
 
 203 
			</p>
129 
		<a id="precedent" href="#" title="cliquez ici ou utilisez la flèche gauche pour afficher l'image précédente">
204 
			<div id="boutons-reseaux-sociaux">
- 
 
 205 
				<a id="facebook" class="btn btn-outline-secondary btn-lg"><i class="fab fa-facebook-f"></i></a>
- 
 
 206 
				<a id="twitter" class="btn btn-outline-secondary btn-lg"><i class="fab fa-twitter"></i></a>
- 
 
 207 
				<a id="mail" class="btn btn-outline-secondary btn-lg"><i class="fas fa-envelope"></i></a>
- 
 
 208 
			</div>
- 
 
 209 
		</div>
- 
 
 210 
		<div id="bloc-modif" class="bloc-volet modif hidden" data-volet="modif">
- 
 
 211 
			<h2>Modifier la photo</h2>
- 
 
 212 
			<h3>Faire pivoter la photo</h3>
- 
 
 213 
			<div id="pivoter-photo" class="d-flex justify-content-around">
- 
 
 214 
				<div id="bloc-pivoter-droite" class="d-flex flex-column">
- 
 
 215 
					<label for="pivoter-droite">Pivoter à droite</label>
- 
 
 216 
					<a id="pivoter-droite" class="btn btn-success btn-lg"><i class="fas fa-redo"></i></a>
- 
 
 217 
				</div>
- 
 
 218 
				<div id="bloc-pivoter-gauche" class="d-flex flex-column">
- 
 
 219 
					<label for="pivoter-gauche">Pivoter à gauche</label>
- 
 
 220 
					<a id="pivoter-gauche" class="btn btn-success btn-lg"><i class="fas fa-undo"></i></a>
- 
 
 221 
				</div>
- 
 
 222 
			</div>
- 
 
 223 
			<h3>Régénérer miniature</h3>
- 
 
 224 
			<p id="message-regenerer" class="message">
130 
			<img style="border:none" src="https://www.tela-botanica.org/sites/commun/generique/images/flecheGauche.jpg" alt="&lt;" />
 225 
				Vous avez remarqué un problème dans l'affichage de la miniature de cette photo ? Vous pouvez la régénérer ci-dessous !
- 
 
 226 
			</p>
131 
		</a>
 227 
			<a id="regenerer-miniature" class="btn btn-warning btn-lg"><i class="fas fa-recycle"></i>&nbsp;Régénérer la miniature</a>
- 
 
 228 
		</div>
- 
 
 229 
		<div id="bloc-aide" class="bloc-volet aide hidden" data-volet="aide">
- 
 
 230 
			<h2>Aide</h2>
132 
	</div>
 231 
			<p id="texte-aide" class="message">
- 
 
 232 
				Auxerunt haec vulgi sordidioris audaciam, quod cum ingravesceret penuria commeatuum, famis et furoris inpulsu Eubuli cuiusdam inter suos clari domum ambitiosam ignibus subditis inflammavit rectoremque ut sibi iudicio imperiali addictum calcibus incessens et pugnis conculcans seminecem laniatu miserando discerpsit. post cuius lacrimosum interitum in unius exitio quisque imaginem periculi sui considerans documento recenti similia formidabat.
- 
 
 233 
 
- 
 
 234 
				Novitates autem si spem adferunt, ut tamquam in herbis non fallacibus fructus appareat, non sunt illae quidem repudiandae, vetustas tamen suo loco conservanda; maxima est enim vis vetustatis et consuetudinis. Quin in ipso equo, cuius modo feci mentionem, si nulla res impediat, nemo est, quin eo, quo consuevit, libentius utatur quam intractato et novo. Nec vero in hoc quod est animal, sed in iis etiam quae sunt inanima, consuetudo valet, cum locis ipsis delectemur, montuosis etiam et silvestribus, in quibus diutius commorati sumus.
133 
	<div class="img-cadre">
 235 
 
- 
 
 236 
				Erat autem diritatis eius hoc quoque indicium nec obscurum nec latens, quod ludicris cruentis delectabatur et in circo sex vel septem aliquotiens vetitis certaminibus pugilum vicissim se concidentium perfusorumque sanguine specie ut lucratus ingentia laetabatur.
- 
 
 237 
			</p>
- 
 
 238 
			<ul id="aide-plus">
- 
 
 239 
				<li id="plus-infos" class="row">
- 
 
 240 
					<div class="col-10 label">Plus d'infos sur le wiki</div>
- 
 
 241 
					<a class="bouton btn btn-sm btn-outline-secondary"><i class="fas fa-question-circle"></i></a>
- 
 
 242 
				</li>
- 
 
 243 
				<li id="autres-questions" class="row">
- 
 
 244 
					<div class="col-10 label">D'autres questions ? Écrivez-nous !</div>
- 
 
 245 
					<a class="bouton btn btn-sm btn-outline-secondary"><i class="fas fa-envelope"></i></a>
- 
 
 246 
				</li>
- 
 
 247 
			</ul>
- 
 
 248 
 
- 
 
 249 
		</div>
- 
 
 250 
 
134 
			<img id="illustration" src="<?=$urls[0]?>" alt="" /><br />
 251 
		<div class="nettoyage-volet bas"></div>
- 
 
 252 
	</div>
- 
 
 253 
 
- 
 
 254 
</div>
135 
	</div>
 255 
<div id="info-img-galerie" class="carousel col-lg-8 col-12" data-ride="carousel" data-interval="false">
- 
 
 256 
	<div class="carousel-inner h-100 w-100">
136 
	<div class="conteneur-suivant">
 257 
		<?php for($index = 0; $index < $max_photo; $index++) :?>
- 
 
 258 
			<div id="img-cadre-<?php echo $index; ?>" class="carousel-item">
- 
 
 259 
				<img id="illustration-<?php echo $index;?>" class="d-block align-middle" src="<?php echo $urls[$index];?>" alt="" data-width="<?php echo $infos_images[$urls[$index]]['width'];?>" data-height="<?php echo $infos_images[$urls[$index]]['height'];?>">
- 
 
 260 
			</div>
137 
		<a id="suivant" href="#" title="cliquez ici ou utilisez la flèche droite pour afficher l'image suivante">
 261 
		<?php endfor; ?>
- 
 
 262 
		<a id="precedent" class="carousel-control-prev carousel-control" href="#info-img-galerie" role="button" data-slide="prev">
- 
 
 263 
			<i class="fas fa-chevron-circle-left"></i>
138 
			<img style="border:none" src="https://www.tela-botanica.org/sites/commun/generique/images/flecheDroite.jpg" alt="&gt;" />
 264 
			<span class="sr-only">Precedent</span>
- 
 
 265 
		</a>
- 
 
 266 
		<a id="suivant" class="carousel-control-next carousel-control" href="#info-img-galerie" role="button" data-slide="next">
- 
 
 267 
			<i class="fas fa-chevron-circle-right"></i>
- 
 
 268 
			<span class="sr-only">Suivant</span>
- 
 
 269 
		</a>
- 
 
 270 
	</div>
- 
 
 271 
</div>
- 
 
 272 
<div id="boutons-footer">
- 
 
 273 
	<div id="bloc-fct" class="">
- 
 
 274 
		<a id="bouton-tags" class="btn bouton-fct tags" data-volet="tags"><i class="fas fa-tags"></i></a>
- 
 
 275 
		<a id="bouton-noter" class="btn bouton-fct noter" data-volet="noter"><i class="far fa-star"></i></a>
- 
 
 276 
		<a id="bouton-signaler" class="btn bouton-fct signaler" data-volet="signaler"><i class="fas fa-exclamation-triangle"></i></a>
- 
 
 277 
		<a id="bouton-revision" class="btn bouton-fct revision" data-volet="revision"><i class="fas fa-edit"></i></a>
- 
 
 278 
		<a id="bouton-meta" class="btn bouton-fct meta actif" data-volet="meta"><i class="fas fa-info-circle"></i></a>
- 
 
 279 
		<a id="bouton-modif" class="btn bouton-fct modif" data-volet="modif"><i class="fas fa-redo-alt"></i></a>
139 
		</a>
 280 
		<a id="bouton-aide" class="btn bouton-fct aide" data-volet="aide"><i class="fas fa-question-circle"></i></a>
140 
	</div>
 - 
 
141 
	<hr class="nettoyage" />
 281 
	</div>
142 
	<div id="bloc-infos-img"></div>
 282 
	<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>
143 
</div>
 - 
 
144 
</body>
 - 
 
145 
</html>
 283 
</div>
- 
 
 284 
<script type="text/Javascript">
- 
 
 285 
	//<![CDATA[
- 
 
 286 
		var widgetProp = {
- 
 
 287 
			'urlWidget'    : "<?php echo $url_widget; ?>",
- 
 
 288 
			'urls'         : [<?php echo '"'.implode($urls, '","').'"'; ?>],
- 
 
 289 
			'infos_images' : <?php echo json_encode($infos_images); ?>,
- 
 
 290 
			'indexImage'   : 0,
- 
 
 291 
			'urlImage'     : "<?php echo $url_image; ?>",
- 
 
 292 
			'tailleMax'    : 580,
- 
 
 293 
			'popup_url'       : "<?php echo $popup_url; ?>"
- 
 
 294 
		};
- 
 
 295 
		$( document ).ready( function() {
- 
 
 296 
			popup = new WidgetPhotoPopup( widgetProp );
- 
 
 297 
			popup.init();
- 
 
 298 
		});
- 
 
 299 
	//]]>
- 
 
 300 
</script>