Nouveautés: - AJAX pour récupérer les données depuis la base - Leaflet pour l’API - Openstreetmap pour les cartes
120 lines
6.3 KiB
PHP
120 lines
6.3 KiB
PHP
<?php
|
|
session_start();
|
|
include '../i18n_setup.php';
|
|
/*include 'localize.php';
|
|
$domain = 'sentier';
|
|
localize($domain);
|
|
*/
|
|
include '../functions.php';
|
|
|
|
$base = 'db_photo.sqlite3';
|
|
$chemin = '../photos/img/';
|
|
$chemin_thumb = str_replace("img", "thumb", $chemin);
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="Sur le sentier: la photos du mois">
|
|
<title><?php echo gettext("Maps"); ?></title>
|
|
<meta name="msapplication-TileColor" content="#2b5797">
|
|
<meta name="msapplication-config" content="/icons/browserconfig.xml">
|
|
<meta name="theme-color" content="#ffffff">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
|
|
<link rel="manifest" href="/icons/site.webmanifest">
|
|
<link rel="shortcut icon" href="/icons/favicon.ico">
|
|
|
|
<!-- Nous chargeons les fichiers CDN de Leaflet. Le CSS AVANT le JS -->
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
|
|
<link rel="stylesheet" href="css/styles.css">
|
|
<link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css" />
|
|
<link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css" />
|
|
<link rel="stylesheet" href="../css/sls.css">
|
|
|
|
<link rel='stylesheet' href='../lc-lightbox/css/lc_lightbox.min.css'>
|
|
<link rel='stylesheet' href='../lc-lightbox/css/open_close_fx.css'>
|
|
<link rel='stylesheet' href='../lc-lightbox/skins/minimal.css'>
|
|
|
|
<!-- Fichiers Javascript -->
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin="" defer></script>
|
|
<script type='text/javascript' src='https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js' defer></script>
|
|
<script src="js/scripts.js" defer></script>
|
|
|
|
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<h1><?php echo gettext("Maps"); ?></h1>
|
|
|
|
<div id="map">
|
|
<!-- Ici s'affichera la carte -->
|
|
</div>
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
|
|
var $obj = lc_lightbox('.popup a', {
|
|
|
|
img_zoom : true, // whether to enable zooming system
|
|
author_by_txt : '<?php echo gettext("by"); ?>', // which text is used before the author name, by default is "by"
|
|
|
|
slideshow : true, // whether to enable slideshow
|
|
open_close_time : 200, // durée de l'animation pour l'ouverture et la fermeture de la lightbox
|
|
ol_time_diff : 100, // animation de superposition avance (à l'ouverture) et retard (à la fermeture) à la fenêtre
|
|
fading_time : 50, // durée de l'animation de fondu des éléments
|
|
animation_time : 100,
|
|
slideshow_time : 4000, // durée de l'intervalle du diaporama
|
|
autoplay : false, // autoplay slideshow - bool
|
|
counter : false, // s'il faut afficher le compteur d'éléments
|
|
progressbar : false, // s'il faut afficher une barre de progression lors de l'exécution du diaporama
|
|
|
|
max_width : '95%', // largeur maximale de la lightbox
|
|
max_height : '95%', // hauteur maximale de la lightbox
|
|
ol_opacity : 0.7, // overlay opacity / value between 0 and 1
|
|
ol_color : '#111', // background color of the overlay
|
|
ol_pattern : false, // overlay patterns - insert the pattern name or false
|
|
|
|
wrap_class : 'lcl_fade_oc', // Classes personnalisées ajoutées au wrapper: effet à l'ouverture de la lb (lcl_fade_oc | lcl_zoomin_oc | lcl_rtl_oc)
|
|
skin : 'minimal', // minimal | light | dark
|
|
data_position : 'over', // Spécifie où les données des éléments seront affichées. Les modes disponibles sont :over, under|rside|lside
|
|
cmd_position : 'inner', // Déclare où les commandes doivent être affichées : inner|outer
|
|
ins_close_pos : 'normal', // set closing button position for inner commands - normal/corner
|
|
nav_btn_pos : 'normal', // Régle les flèches et la position de lecture/pause. Options disponibles: normal|middle
|
|
|
|
txt_hidden : true, // whether to hide texts on lightbox opening - bool or int (related to browser's smaller side)
|
|
shox_title : true, // s'il faut afficher les titres
|
|
show_descr : true, // s'il faut afficher les descriptions
|
|
show_author : true, // s'il faut afficher les auteurs
|
|
|
|
thumbs_nav : false, // permet la navigation par vignettes (nécessite des éléments affiche ou images)
|
|
|
|
fullscreen : true, // Autoriser ou non le mode plein écran
|
|
fs_img_behavior : 'smart', //Comportement de l'image en plein écran : fit|fill|smart
|
|
fs_only : 500, // s'il faut utiliser uniquement l'ouverture de la lightbox en mode plein écran (utile pour les appareils mobiles) : false | (integer)
|
|
browser_fs_mode : true, // utiliser ou non le mode plein écran du navigateur
|
|
|
|
txt_toggle_cmd : true, // s'il faut afficher le bouton de basculement du texte de l'élément
|
|
download : true, // whether to show element's file download button
|
|
autoplay_videos : false, // bool / whether to autoplay videos (NB: modern browsers ignore this for deeplinked elements. Not applied if video has poster)
|
|
touchswipe : true, // permet les interactions tactiles (nécessite AlloyFinger)
|
|
rclick_prevent : true, // s'il faut éviter le clic droit sur les éléments de la lightbox
|
|
|
|
});
|
|
|
|
});
|
|
</script>
|
|
|
|
<p class="navPage"><a href="../index.php"><?php echo gettext("Home"); ?></a> | <a href="../photo-du-mois.php"><?php echo gettext("Picture of the month"); ?></a></p>
|
|
|
|
<p><em><small>© 2013-<?php echo date('Y'); ?> sur-le-sentier.fr</small></em></p>
|
|
|
|
<script src='../lc-lightbox/js/lc_lightbox.min.js'></script>
|
|
<script src='../lc-lightbox/lib/AlloyFinger/alloy_finger.min.js'></script>
|
|
|
|
</body>
|
|
</html>
|