06-04-2024

2024-04-06 11:55:24 +02:00
parent f7c5cf7d47
commit 3d22f9c5d8
550 changed files with 27249 additions and 2537 deletions
--- a/_test/maps/bootstrap.html
+++ b/_test/maps/bootstrap.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+<head>
+  <title>Bootstrap</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB7cAx3NSH4dPM3Sx2oQeud7Zr-KaGXmLk"></script>
+
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
+
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+
+	<style>
+	.bcontent {
+		margin-top: 10px;
+	}
+	
+	/*#maps { height:350px;width:498px; }*/
+	#maps { height:400px; width:638px; }
+	
+	.modal-dialog {
+	height:400px; width:640px;	
+	}
+
+</style>
+
+</head>
+
+<body>
+<div class="container">
+  <h3>Show hide Modal Example Using jQuery</h3>
+  <!-- Button to Open the Modal -->
+  <!--button type="button" class="btn btn-success" id="show">
+	Open modal
+  </button-->
+ <a href="#" id="show">&#x2693;</a>
+
+  <!-- The Modal -->
+  <div class="modal" id="myModal">
+	<!-- -modal-lg -modal-sm -->
+	<div class="modal-dialog modal-lg">
+	  <div class="modal-content">
+	 
+		<!-- Modal Header -->
+		<div class="modal-header">
+		  <h4 class="modal-title">Modal Heading</h4>
+		  <button type="button" class="close" data-dismiss="modal">×</button>
+		</div>
+	   
+		<!-- Modal body -->
+		<div class="modal-body" id="maps">
+		  Modal body..
+		</div>
+	   
+		<!-- Modal footer -->
+		<div class="modal-footer">
+		  <button type="button" class="btn btn-danger" id="hide">Close</button>
+		</div>
+	   
+	  </div>
+	</div>
+  </div>
+ 
+</div>
+<script>
+$("#show").click(function(){
+	
+	// create a center
+	var c = new google.maps.LatLng(46.61211515,5.8780727);
+	
+	//create map options object
+	var mapOptions = {
+		zoom: 11,
+		center: c,
+		mapTypeId: google.maps.MapTypeId.ROADMAP
+		};
+	
+	var map = new google.maps.Map(document.getElementById('maps'), mapOptions);
+
+	var marker = new google.maps.Marker({
+		position: c,
+		label: {
+		  text: "\ue0c8",
+		  fontFamily: "Material Icons",
+		  color: "#ffffff",
+		  fontSize: "20px",
+		},
+		animation: google.maps.Animation.DROP,
+		title: "Material Icon Font Marker",
+		});
+	marker.setMap(map);
+
+	$('#myModal').modal('show', function(){
+		google.maps.event.trigger(map, "resize"); // resize map
+		map.setCenter(c); // set the center
+	}); // slide it down
+});
+ 
+$("#hide").click(function(){
+	$('#myModal').modal('hide');
+});
+
+</script>
+</body>
+</html>
--- a/_test/maps/bootstrap2.html
+++ b/_test/maps/bootstrap2.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+<head>
+  <title>Bootstrap</title>
+
+  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB7cAx3NSH4dPM3Sx2oQeud7Zr-KaGXmLk"></script>
+
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
+
+
+	<style>
+	.bcontent {
+		margin-top: 10px;
+	}
+	/*#maps { height:350px;width:425px; display:none; }*/
+	#maps { height:350px;width:498px; }
+
+</style>
+<script>
+	$(function() {
+		
+		// create a center
+		var c = new google.maps.LatLng(-33.8790, 151.2064);
+	
+		//create map options object
+		var mapOptions = {
+			zoom: 14,
+			center: c,
+			mapTypeId: google.maps.MapTypeId.ROADMAP
+			};
+	
+		var map = new google.maps.Map(document.getElementById('maps'), mapOptions);
+		
+		
+		
+		
+		
+		$("#btnShow").click(function() {
+			$("#sampleModal").modal("show", function(){
+				google.maps.event.trigger(map, "resize"); // resize map
+				map.setCenter(c); // set the center
+			}); // slide it down
+				
+		});
+	});
+</script>
+
+
+</head>
+
+<body>
+	<div class="container bcontent">
+	<h2>Bootstrap Show Modal via JavaScript</h2>
+	<hr />
+	<!--button type="button" id="btnShow" class="btn btn-primary">
+		Launch modal
+	</button-->
+	<a href="#" id="btnShow">&#x2693;</a>
+	<div class="modal" id="sampleModal">
+		<div class="modal-dialog modal-dialog-scrollable">
+			<div class="modal-content">
+				<div class="modal-header">
+					<h5 class="modal-title">Tutlane Note</h5>
+					<button type="button" class="close" data-dismiss="modal">
+						<span>&times;</span>
+					</button>
+				</div>
+				<div class="modal-body" id="maps">
+					<p>Tutlane.com is an eLearning organization providing quality online tutorials, articles, and information related to the latest programming technologies.</p>
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+
+<!--div id="maps"></div-->
+
+</body>
+</html>              
+
--- a/_test/maps/iframe.html
+++ b/_test/maps/iframe.html
@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<html lang="fr">
+	<head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<meta http-equiv="X-UA-Compatible" content="ie=edge">
+		<title>iFrame</title>
+		<link rel='stylesheet' href='css/lc_lightbox.min.css' />
+		<link rel='stylesheet' href='css/open_close_fx.css' />
+		<link rel='stylesheet' href='css/minimal.css' />
+
+		<style>
+		.map-responsive{
+			overflow:hidden;
+			padding-bottom:56.25%;
+			position:relative;
+			height:0;
+		}
+		.map-responsive iframe{
+			left:0;
+			top:0;
+			height:100%;
+			width:100%;
+			position:absolute;
+		}
+		</style>
+		
+		<script src='https://code.jquery.com/jquery-3.2.1.min.js'></script>			
+
+	</head>
+	<body>
+
+		<h3>iFrame</h3>
+				
+		<iframe width="600" height="500" id="gmap_canvas" src="https://maps.google.com/maps?q=46.61211515,5.8780727&t=&z=9&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" allow="fullscreen"></iframe>
+		
+		<!--
+		# Feature-Policy
+		<IfModule mod_headers.c>
+			Header set Feature-Policy "geolocation 'self'; vibrate 'none'"
+		</IfModule>
+		-->
+	
+		<br />
+		<h3>LC Lightbox</h3>
+		
+		<div class="cadre" id="lcl_month">
+			<a href ="https://maps.google.com/maps?q=46.61211515,5.8780727&t=&z=9&ie=UTF8&iwloc=&output=embed" title="Google Maps Iframe" data-lcl-txt="LC Lightbox can handle any iframe:&lt;br/&gt; for example you can also display websites and Google Documents &lt;em&gt;(then Word docs, PDFs, etc)&lt;/em&gt;" data-lcl-author="@sur-le-sentier.fr">GoogleMaps @ LC Lightbox</a>
+		</div>
+
+		
+		<script type='text/javascript'>
+		  $(document).ready(function() {
+				var $obj = lc_lightbox('#lcl_gallery a', {
+				  img_zoom : true,
+				  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
+				  slideshow_time : 4000,	// durée de l'intervalle du diaporama
+				  animation_time : 100,
+				  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
+				  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
+				  nav_btn_pos : 'normal',	// Régle les flèches et la position de lecture/pause. Options disponibles: normal|middle
+				  show_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
+				  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
+				});
+		
+				var $obj2 = lc_lightbox('#lcl_month a', {
+				  img_zoom : true,
+				  open_close_time : 100,
+				  ol_time_diff : 100,
+				  max_width : '65%',
+				  max_height : '65%',
+				  wrap_class : 'lcl_zoomin_oc',
+				  skin : 'minimal',
+				  data_position : 'rside',
+				  cmd_position : 'inner',
+				  show_title : true,
+				  show_descr : true,
+				  show_author : true,	
+				  fullscreen : true,
+				  fs_img_behavior : 'smart',
+				  browser_fs_mode : false,
+				  touchswipe : true,
+				  rclick_prevent : true,
+			  });
+		
+		  });
+		  </script>
+
+
+<!-- https://www.labnol.org/internet/embed-responsive-google-maps/28333/ -->
+<script>
+/*
+	var iframe = document.createElement("iframe");
+	iframe.onload = function() {
+	   var doc = iframe.contentDocument;
+	
+	   iframe.contentWindow.showNewMap = function() {
+		var mapContainer =  doc.createElement('div');
+		mapContainer.setAttribute('style',"width: 500px; height: 300px");
+		doc.body.appendChild(mapContainer);
+	
+		var mapOptions = {
+			center: new this.google.maps.LatLng(-35.000009, -58.197645),
+			zoom: 5,
+			mapTypeId: this.google.maps.MapTypeId.ROADMAP
+		}
+	
+		var map = new this.google.maps.Map(mapContainer,mapOptions);
+	}
+	
+	var script = document.createElement('script');
+	script.type = 'text/javascript';
+	script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&key=AIzaSyBhi566YKgkoys4UAInAeNkU1pkz4JU9I8&' + 'callback=showNewMap';
+	iframe.contentDocument.getElementsByTagName('head')[0].appendChild(script);
+	};
+	document.body.appendChild(iframe);
+	*/
+</script>
+
+	<script src='js/lc_lightbox.min.js'></script>
+	<script src='js/alloy_finger.min.js'></script>
+
+	</body>
+</html>
--- a/_test/maps/jquery-popup.html
+++ b/_test/maps/jquery-popup.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+<head>
+  <title>Create a Modal Popup using jQuery - Clue Mediator</title>
+  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB7cAx3NSH4dPM3Sx2oQeud7Zr-KaGXmLk"></script>
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+  <style>
+	body {
+	  font-family: Helvetica, Arial, sans-serif;
+	}
+
+	p {
+	  font-size: 16px;
+	  line-height: 26px;
+	  letter-spacing: 0.5px;
+	  color: #4f4343;
+	}
+
+	/* Popup open button */
+	.openBtn {
+	/*
+	  color: #FFF;
+	  background: #269faf;
+	  padding: 10px;
+	  border: 1px solid #269faf;
+	  border-radius: 3px;
+	 */
+	  text-decoration: none;
+	}
+
+	.openBtn:hover {
+		/*
+	  background: #35c7db;
+	  */
+	}
+
+	.popup {
+	  position: fixed;
+	  top: 0px;
+	  left: 0px;
+	  background: rgba(0, 0, 0, 0.58);
+	  width: 100%;
+	  height: 100%;
+	  display: none;
+	}
+
+	/* Popup inner div */
+	.popup-content {
+	  width: 600px;
+	  margin: 0 auto;
+	  padding: 40px;
+	  margin-top: 100px;
+	  border-radius: 3px;
+	  background: #fff;
+	  position: relative;
+	}
+
+	/* Popup close button */
+	.closeBtn {
+	  position: absolute;
+	  top: 5px;
+	  right: 12px;
+	  font-size: 17px;
+	  color: #7c7575;
+	  text-decoration: none;
+	}
+	
+	#maps { height:350px;width:425px; display:none; margin: auto;}
+	
+	.toggle {
+		text-decoration: none;
+	}
+	
+  </style>
+</head>
+
+<body>
+
+<h3>jquery-popup.html<h3>
+	
+<!--a href="#" class="toggle" onclick"javascript:void(0)">gm</a>
+<button type="button" class="toggle">&#x2693;</button>
+<span class="toggle">&#x2693;</span-->
+
+<a href="#" class="toggle">&#x2693;</a>
+
+<div id="maps"></div>
+
+<script>
+
+	$(function () {
+
+		// create a center
+		var c = new google.maps.LatLng(-33.8790, 151.2064);
+
+		//create map options object
+		var mapOptions = {
+			zoom: 14,
+			center: c,
+			mapTypeId: google.maps.MapTypeId.ROADMAP
+		};
+
+		var map = new google.maps.Map(document.getElementById('maps'), mapOptions);
+
+		$(".toggle").click(function () {
+			// check the visibility of the next element in the DOM
+			$(this).next().slideToggle(300, function(){
+				google.maps.event.trigger(map, "resize"); // resize map
+				map.setCenter(c); // set the center
+			}); // slide it down
+
+		});
+
+	});
+
+
+</script>
+
+</body>
+
+</html>
--- a/_test/maps/maps_2.php
+++ b/_test/maps/maps_2.php
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta http-equiv="X-UA-Compatible" content="ie=edge">
+	<title>Photo du mois</title>
+	<link rel="stylesheet" href="css/sls.css">
+	 
+    <link rel='stylesheet' href='css/lc_lightbox.min.css' />
+    <link rel='stylesheet' href='css/open_close_fx.css' />
+    <link rel='stylesheet' href='css/minimal.css' />
+    <style>
+   		#map{
+		   width: 100%;
+		   height: 400px;
+	   		}
+   </style>
+	   
+<?php include 'functions.php'; ?>
+
+	<script   src="https://code.jquery.com/jquery-3.6.0.min.js"   integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="   crossorigin="anonymous"></script>
+	<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB7cAx3NSH4dPM3Sx2oQeud7Zr-KaGXmLk"></script>
+
+</head>
+
+<body>
+
+	
+<h1 class="_h1"><?php echo gettext("Photo du mois"); ?></h1>
+
+<?php
+	$page = 1;
+	
+	try {
+		$conn4 = new PDO('sqlite:db_photo.sqlite3');
+		$query4 = "SELECT filename, date, lens, speed, iso, width, height, html, aperture, model, lat, long, alt, legende, copyright, title, creator, keywords, metering, flash, focal, wb, program FROM photos WHERE lat != '' ORDER BY date DESC LIMIT ? OFFSET ?";
+		//nb d'archive par page
+		$limit = 13;
+		$offset = $limit * ($page -1);
+		//echo "offset: " . $offset;
+	
+		$stmt = $conn4->prepare($query4);
+		$stmt->execute(array($limit, $offset));
+		
+		$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
+		$rowcount = count($result);
+		
+		$conn4 = null;
+		}
+		catch(PDOException $e) {
+			echo $e->getMessage();
+			}
+		
+		_pr($result);
+		
+		$imgLat = $result[0]['lat'];
+		$imgLng = $result[0]['long'];
+?>
+
+<script>
+			var myCenter = new google.maps.LatLng(<?php echo $imgLat; ?>, <?php echo $imgLng; ?>);
+			function initialize(){
+				var mapProp = {
+					center:myCenter,
+					zoom:10,
+					mapTypeId:google.maps.MapTypeId.ROADMAP
+				};
+			
+				var map = new google.maps.Map(document.getElementById("map"),mapProp);
+			
+				var marker = new google.maps.Marker({
+					position:myCenter,
+					animation:google.maps.Animation.BOUNCE
+				});
+			
+				marker.setMap(map);
+			}
+			google.maps.event.addDomListener(window, 'load', initialize);
+</script>
+
+<div id="map"></div>
+
+		
+<p><em><small>@ 2022</small></em></p>
+			
+<script src='js/lc_lightbox.min.js'></script>
+<script src='js/alloy_finger.min.js'></script>
+			
+</body>
+			
+</html>