Bruno21
4d256fbcfc
-correction mauvais chemin des vignettes -correction affichage desciption dans la lightbox
241 lines
9.8 KiB
PHP
241 lines
9.8 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">
|
|
|
|
<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'>
|
|
<style>
|
|
#map{
|
|
width: 100%;
|
|
height: 400px;
|
|
}
|
|
#mapCanvas {
|
|
width: 100%;
|
|
height: 650px;
|
|
}
|
|
</style>
|
|
|
|
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBhi566YKgkoys4UAInAeNkU1pkz4JU9I8"></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>
|
|
|
|
<?php
|
|
|
|
try {
|
|
$conn4 = new PDO("sqlite:$base");
|
|
$query4 = "SELECT filename, filesize, dateoriginal, lens, speed, correctexpo, iso, usercomment, comment, model, metering, flash, focal, program, wb, mode, width, height, html, aperture, software, lat, long, alt, keywords, title, creator, city, department, code, country, copyright, legende FROM photos WHERE lat != '' ORDER BY dateoriginal DESC";
|
|
|
|
$stmt = $conn4->prepare($query4);
|
|
$stmt->execute();
|
|
|
|
$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
|
|
$rowcount = count($result);
|
|
|
|
$conn4 = null;
|
|
}
|
|
catch(PDOException $e) {
|
|
echo $e->getMessage();
|
|
}
|
|
|
|
//_pr($result);
|
|
?>
|
|
|
|
|
|
<script>
|
|
function initMap() {
|
|
var map;
|
|
var bounds = new google.maps.LatLngBounds();
|
|
var mapOptions = {
|
|
// Nous définissons le type de carte (ici carte routière)
|
|
mapTypeId: 'roadmap',
|
|
// Nous activons les options de contrôle de la carte (plan, satellite...)
|
|
mapTypeControl: true,
|
|
mapTypeControlOptions: {
|
|
// Position de Plan|Satellite
|
|
position: google.maps.ControlPosition.TOP_LEFT,
|
|
// Cette option sert à définir comment les options se placent
|
|
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
|
|
},
|
|
zoomControl: true,
|
|
zoomControlOptions: {
|
|
position: google.maps.ControlPosition.RIGHT_CENTER,
|
|
}
|
|
};
|
|
|
|
// Display a map on the web page
|
|
map = new google.maps.Map(document.getElementById("mapCanvas"), mapOptions);
|
|
map.setTilt(100); //
|
|
|
|
// Multiple markers location, latitude, and longitude
|
|
var markers = [
|
|
<?php
|
|
$a = "";
|
|
for( $i = 0; $i < $rowcount; $i++) {
|
|
// '4 => icons'
|
|
$a .= '["'.$result[$i]['filename'].'", '.$result[$i]['lat'].', '.$result[$i]['long'].'],' . "\r\n";
|
|
}
|
|
$a = substr_replace($a, '', -3, 1);
|
|
echo $a;
|
|
?>
|
|
];
|
|
|
|
// Info window content
|
|
var infoWindowContent = [
|
|
<?php
|
|
$b = "";
|
|
for( $i = 0; $i < $rowcount; $i++) {
|
|
|
|
$lb = data_for_lightbox($result[$i]);
|
|
|
|
//$b .= '[\'<div class="info_content"><h3>' . htmlspecialchars($lb['title_thumb'], ENT_QUOTES) . '</h3><div class="gm_thumb"><a href="' . $lb['big'] . '" title="' . htmlspecialchars($lb['title'], ENT_QUOTES) . '" data-lcl-txt="' . htmlspecialchars($lb['title'], ENT_QUOTES) . '" data-lcl-author="' . htmlspecialchars($lb['exif'], ENT_QUOTES) . '"><img src="' . $lb['thumb'] . '" alt="' . htmlspecialchars($lb['title']) . '"></a></div><p>' . htmlspecialchars($lb['title'], ENT_QUOTES) . '</p><p>' . htmlspecialchars($lb['legende'], ENT_QUOTES) . '</p><p>' . htmlspecialchars($lb['keywords'], ENT_QUOTES) . '</p></div>\'],' . "\r\n";
|
|
$b .= '[\'<div class="info_content"><h3>' . htmlspecialchars($lb['title_thumb'], ENT_QUOTES) . '</h3><div class="gm_thumb"><a href="' . $lb['big'] . '" title="' . htmlspecialchars($lb['title']) . '" data-lcl-txt="' . htmlspecialchars($lb['description']) . '" data-lcl-author="' . htmlspecialchars($lb['creator']) . '"><img src="' . $lb['thumb'] . '" alt="' . htmlspecialchars($lb['title']) . '"></a></div><p>' . htmlspecialchars($lb['title'], ENT_QUOTES) . '</p><p>' . htmlspecialchars($lb['legende'], ENT_QUOTES) . '</p><p>' . htmlspecialchars($lb['keywords'], ENT_QUOTES) . '</p></div>\'],' . "\r\n";
|
|
}
|
|
$b = substr_replace($b, '', -3, 1);
|
|
echo $b;
|
|
?>
|
|
];
|
|
|
|
// Add multiple markers to map
|
|
var infoWindow = new google.maps.InfoWindow(), marker, i;
|
|
|
|
// Place each marker on the map
|
|
for( i = 0; i < markers.length; i++ ) {
|
|
|
|
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
|
|
bounds.extend(position);
|
|
marker = new google.maps.Marker({
|
|
position: position,
|
|
map: map,
|
|
icon: markers[i][3],
|
|
title: markers[i][0]
|
|
});
|
|
|
|
// Add info window to marker
|
|
|
|
google.maps.event.addListener(marker, 'click', (function(marker, i) {
|
|
return function() {
|
|
infoWindow.setContent(infoWindowContent[i][0]);
|
|
infoWindow.open(map, marker);
|
|
}
|
|
})(marker, i));
|
|
|
|
|
|
// Center the map to fit all markers on the screen
|
|
map.fitBounds(bounds);
|
|
}
|
|
|
|
// Set zoom level
|
|
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
|
|
this.setZoom(6);
|
|
google.maps.event.removeListener(boundsListener);
|
|
});
|
|
}
|
|
|
|
// Load initialize function
|
|
google.maps.event.addDomListener(window, 'load', initMap);
|
|
</script>
|
|
|
|
|
|
<div id="mapCanvas"></div>
|
|
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
|
|
var $obj = lc_lightbox('.gm_thumb 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>
|