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/convert.php
+++ b/_test/convert.php
@@ -0,0 +1,62 @@
+<?php
+
+$file = 'photos/img/9_2019.jpg';
+
+/*
+$img = new Gmagick($file);
+$image = $img->coalesceImages();
+do {
+$image->cropthumbnailimage(150, 150);
+} while ($image->nextImage());
+$image->writeImage($newFile.'.jpg');
+$img->destroy();
+*/
+
+/*
+// Uncaught ImagickException: NoDecodeDelegateForThisImageFormat `JPEG'
+$thumb = new Imagick($file);
+
+$thumb->resizeImage(320,240,Imagick::FILTER_LANCZOS,1);
+$thumb->writeImage('mythumb.jpg');
+
+$thumb->destroy(); 
+*/
+
+$outFile = "test-cropped.jpg";
+
+// resize if necessary
+$thumb_w = 300;
+$thumb_h = 300;
+
+// File type
+#header('Content-Type: image/jpg');
+
+
+list($origin_w, $origin_h) = getimagesize($file);
+
+$origin_ratio = round($origin_w / $origin_h, 1);
+
+/**/
+// check if the file is really an image
+if ($origin_w == null && $origin_h == null) {
+	#header("Location: index.php");
+    #return;
+    echo "No file !";
+    }
+
+
+if ($thumb_w / $thumb_h > $origin_ratio) {
+    $thumb_w = $thumb_h * $origin_ratio;
+} else {
+    $thumb_h = $thumb_w / $origin_ratio;
+}
+
+if ($origin_w >= 400 && $origin_h >= 400) {
+	$image = new Imagick($file);				// !!!
+	$image->thumbnailImage($thumb_w, $thumb_h);
+	$image->writeImage($outFile);
+	$image->destroy();
+	}
+
+
+?>
--- a/_test/exifs.php
+++ b/_test/exifs.php
@@ -0,0 +1,34 @@
+<?php
+
+function _pr($d) {
+echo "<div style='border: 1px solid#ccc; padding: 10px;'>";
+echo '<strong>' . debug_backtrace()[0]['file'] . ' ' . debug_backtrace()[0]['line'] . '</strong>';
+echo "</div>";
+echo '<pre>';
+if(is_array($d)) {
+	print_r($d);
+	} else if(is_object($d)) {
+	var_dump($d);
+	}
+echo '</pre>';
+}
+
+$file = 'photos/img/7_2019.jpg';
+if ($exif = @exif_read_data($file, 0, true )) {
+
+_pr($exif);
+# YYYY-MM-DD HH:MM:SS.SSS - 2019:10:01 14:03:12
+$da = isset($exif['EXIF']['DateTimeOriginal']) ? $exif['EXIF']['DateTimeOriginal'] : '';
+$obj = isset($exif['EXIF']['UndefinedTag:0xA434']) ? $exif['EXIF']['UndefinedTag:0xA434'] : '';
+$ex = isset($exif['EXIF']['ExposureTime']) ? $exif['EXIF']['ExposureTime'] : '';
+$iso = isset($exif['EXIF']['ISOSpeedRatings']) ? $exif['EXIF']['ISOSpeedRatings'] : '';
+
+$wi = isset($exif['COMPUTED']['Width']) ? $exif['COMPUTED']['Width'] : '';
+$he = isset($exif['COMPUTED']['Height']) ? $exif['COMPUTED']['Height'] : '';
+$ht = isset($exif['COMPUTED']['html']) ? $exif['COMPUTED']['html'] : '';
+$ap = isset($exif['COMPUTED']['ApertureFNumber']) ? $exif['COMPUTED']['ApertureFNumber'] : '';
+
+$mod = isset($exif['IFD0']['Model']) ? $exif['IFD0']['Model'] : '';
+}
+
+?>
--- a/_test/files.php
+++ b/_test/files.php
@@ -0,0 +1,88 @@
+<?php 
+$files = array();
+$dir = new DirectoryIterator('.');
+foreach ($dir as $fileinfo) {     
+   $files[$fileinfo->getMTime()][] = $fileinfo->getFilename();
+}
+
+ksort($files);
+
+
+?>
+
+
+<?php
+
+$it = new DirectoryIterator(__DIR__);
+foreach ($it as $fileinfo) {
+  if (!$fileinfo->isDot())
+    var_dump($fileinfo->getFilename());
+}
+
+$it = new FilesystemIterator(__DIR__);
+foreach ($it as $fileinfo) {
+  echo $fileinfo->getFilename() . "\n";
+}
+
+$iterator = new DirectoryIterator(dirname(__FILE__));
+foreach ( $iterator as $fileinfo ) {
+    var_dump($fileinfo->current()); // would return object(DirectoryIterator)
+}
+
+$iterator = new FilesystemIterator(__DIR__, FilesystemIterator::CURRENT_AS_PATHNAME);
+foreach ( $iterator as $fileinfo ) {
+    var_dump($iterator->current()) . "\n"; // Would return full path eg /www/examples/example.php
+}
+?>
+
+<?php
+
+// https://stackoverflow.com/questions/124958/glob-sort-array-of-files-by-last-modified-datetime-stamp
+
+function files_attachment_list($id, $sort_by_date = false, $allowed_extensions = ['png', 'jpg', 'jpeg', 'gif', 'doc', 'docx', 'pdf', 'zip', 'rar', '7z'])
+{
+    if (empty($id) or !is_dir(sprintf('files/%s/', $id))) {
+        return false;
+    }
+    $out = [];
+    foreach (new DirectoryIterator(sprintf('files/%s/', $id)) as $file) {
+        if ($file->isFile() == false || !in_array($file->getExtension(), $allowed_extensions)) {
+            continue;
+        }
+
+        $datetime = new DateTime();
+        $datetime->setTimestamp($file->getMTime());
+        $out[] = [
+            'title' => $file->getFilename(),
+            'size' => human_filesize($file->getSize()),
+            'modified' => $datetime->format('Y-m-d H:i:s'),
+            'extension' => $file->getExtension(),
+            'url' => $file->getPathname()
+        ];
+    }
+
+    $sort_by_date && usort($out, function ($a, $b) {
+        return $a['modified'] > $b['modified'];
+    });
+
+    return $out;
+}
+
+function human_filesize($bytes, $decimals = 2)
+{
+    $sz = 'BKMGTP';
+    $factor = floor((strlen($bytes) - 1) / 3);
+    return sprintf("%.{$decimals}f", $bytes / pow(1024, $factor)) . @$sz[$factor];
+}
+
+// returns a file info array from path like '/files/123/*.extensions'
+// extensions = 'png', 'jpg', 'jpeg', 'gif', 'doc', 'docx', 'pdf', 'zip', 'rar', '7z'
+// OS specific sorting
+print_r( files_attachment_list(123) );
+
+// returns a file info array from the folder '/files/456/*.extensions'
+// extensions = 'txt', 'zip'
+// sorting by modified date (newest first)
+print_r( files_attachment_list(456, true, ['txt','zip']) );
+
+?>
--- 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>
--- a/_test/photo-du-mois
+++ b/_test/photo-du-mois
@@ -0,0 +1,346 @@
+<!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>Document</title>
+    <link rel="stylesheet" href="css/photoswipe.css">
+    <!--script src="js/photoswipe.esm.js"></script>
+    <script src="js/photoswipe-lightbox.esm.js"></script-->
+
+    <style>
+@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap');
+
+/*
+  The grid itself needs only 4 CSS declarations:
+*/
+
+.myGallery {
+  display: grid;
+  grid-gap: 10px;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+}
+
+.myGallery img {
+  width: 100%;
+}
+
+/*
+  And here are some declarations for the image caption.
+  Just hover over one of the last 5 images to see it.
+*/
+
+.myGallery .item {
+  position: relative;
+  overflow: hidden;
+}
+
+.myGallery .item img {
+  vertical-align: middle;
+}
+
+.myGallery .caption {
+  margin: 0;
+  padding: 1em;
+  position: absolute;
+  z-index: 1;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  max-height: 100%;
+  text-align: center;
+  overflow: auto;
+  box-sizing: border-box;
+  transition: transform 0.5s;
+  transform: translateY(100%);
+  background: rgba(0, 0, 0, 0.7);
+  color: rgb(255, 255, 255);
+  font-family: sans-serif;
+  font-size: 1.2em
+  /*font: Ubuntu, sans-serif;*/
+}
+
+.myGallery .item:hover .caption {
+  transform: translateY(0%);
+}
+
+.myGallery .item:hover {
+ opacity: 0.7;
+}
+
+.trois {
+    max-width: 100%;
+    height: auto;
+    width: auto\9; /* ie8 */
+}
+
+.cadre {
+    display: block;
+  	margin-left: auto;
+  	margin-right: auto;
+	max-width:800px;
+	margin-bottom: 2rem;
+}
+
+.exif {
+	display: block;
+  	margin-left: auto;
+  	margin-right: auto;
+	max-width:800px;
+	margin-bottom: 4rem;
+	text-align: center;
+	font-family: sans-serif;
+	font-size: 0.75em
+	}
+
+.navPage {
+	display: block;
+  	margin-left: auto;
+  	margin-right: auto;
+	margin-top: 4rem;
+	margin-bottom: 2rem;
+	text-align: center;
+	font-family: sans-serif;
+	font-size: 1em
+
+}
+
+/*
+  The rest is only styling for this example page
+
+
+@import url("https://fonts.googleapis.com/css2?family=Vollkorn:wght@400;900&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap');
+body {
+  font: 400 1.5em/1.58 Vollkorn, serif;
+}
+*/
+h1,
+p {
+  text-align: center;
+}
+
+.myGallery {
+  font-size: 1rem;
+}
+
+    </style>
+    
+    <?php
+    function _pr($d) {
+    echo "<div style='border: 1px solid#ccc; padding: 10px;'>";
+    echo '<strong>' . debug_backtrace()[0]['file'] . ' ' . debug_backtrace()[0]['line'] . '</strong>';
+    echo "</div>";
+    echo '<pre>';
+    if(is_array($d)) {
+    	print_r($d);
+    } else if(is_object($d)) {
+    	var_dump($d);
+    }
+    echo '</pre>';
+	}
+	?>
+
+<script type="module">
+// Include Lightbox 
+import PhotoSwipeLightbox from 'js/photoswipe-lightbox.esm.js';
+
+const lightbox = new PhotoSwipeLightbox({
+  // may select multiple "galleries"
+  gallery: '#gallery--simple',
+
+  // Elements within gallery (slides)
+  children: 'a',
+
+  // Include PhotoSwipe Core
+  // and use absolute path (that starts with http(s)://)
+  pswpModule: 'js/photoswipe.esm.js'
+});
+lightbox.init();
+</script>
+
+</head>
+
+<body>
+
+<h1>Photo du mois</h1>
+
+<?php
+
+//nb d'archive par page
+//$nb = 13;
+
+if (!isset($_GET['page'])) $page = 1;
+// sinon on recupere la valeur numerique reçue en paramètre
+else $page = intval($_GET['page']);
+
+/*
+// on determine debut du limit
+$debut = (($page - 1) * $nb) +1;	  // page 1: 2, page 2: 14, page 3: 26
+$fin = ($debut + $nb) - 1;
+
+echo "debut: " . $debut . "<br>";
+echo "fin: " . $fin . "<br>";
+echo "page: " . $page . "<br>";
+
+*/
+?>
+
+<?php
+try {
+	$conn4 = new PDO('sqlite:db_photo.sqlite3');
+	$query4 = "SELECT filename, date, lens, width, height, html, aperture, model, exposure, iso FROM photos 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);
+	//_pr($result);
+	$rowcount = count($result);
+	
+	$conn4 = null;
+    }
+    catch(PDOException $e) {
+        echo $e->getMessage();
+        }
+        
+    $photo_du_mois = $result[0];
+    $w = $photo_du_mois['date'];
+    
+    setlocale(LC_TIME, 'fr_FR');
+    $m = date('m', strtotime($w));
+    $y = date('Y', strtotime($w));
+        
+    // or any other locales like pl_PL, cs_CZ, fr_FR, zh, zh_Hans, ...
+	$locale = 'fr_FR';
+	$dateFormatter = new IntlDateFormatter(
+    	$locale,
+    	IntlDateFormatter::LONG, // date type
+    	IntlDateFormatter::NONE  // time type
+		);
+	$dateFormatter->setPattern('LLLL'); // full month name with NO DECLENSION ;-)
+	$months_locale = [];
+	for ($month_number = 1; $month_number <= 12; ++$month_number) {
+    	$months_locale[] = $dateFormatter->format(
+        	// 'n' => month number with no leading zeros
+        	DateTime::createFromFormat('n', (string)$month_number)
+    		);
+		}
+?>
+
+<p><?php echo ucfirst($months_locale[(int)$m]) . " " . $y; ?></p>
+
+<?php
+
+	//_pr($photo_du_mois);
+	echo '<div class="cadre">';
+	echo '<img src="' . $photo_du_mois['filename'] . '" class="trois" />';
+	echo '</div>';
+	
+	echo '<div class="exif">';
+	echo $photo_du_mois['model'] . " - " .  $photo_du_mois['lens'] . " - ";
+	echo $photo_du_mois['exposure'] . " - " .  $photo_du_mois['aperture'] . " - " . $photo_du_mois['iso'];
+	echo '</div>';
+?>
+
+
+<div class="myGallery">
+	
+	<?php
+	/**/
+	for ($i = 1; $i <= ($rowcount -1); $i++) {
+		$file = $result[$i]['filename'];
+ 		$da = $result[$i]['date'];
+	 	$obj = $result[$i]['lens'];
+ 		$wi = $result[$i]['width'];
+ 		$he = $result[$i]['height'];
+	 	$ht = $result[$i]['html'];
+ 		$ap = $result[$i]['aperture'];
+ 		$mod = $result[$i]['model'];
+	  	$ex = $result[$i]['exposure'];
+ 		$iso = $result[$i]['iso'];
+
+		$thumb = str_replace("photos/img", "photos/thumb", $file);
+		echo '<div class="item">';
+		echo '<img src="' . $thumb . '" />';
+		echo '<span class="caption">' . $thumb . '</span>';
+		echo '</div>';
+	}
+	
+	/*
+	$rowcount = 5 - 10 - 15 => add 0
+	$rowcount = 4 - 9 - 14 => add 1
+	$rowcount = 3 - 8 - 13 => add 2
+	$rowcount = 2 - 7 - 12 => add 3
+	$rowcount = 1 - 6 - 11 => add 4
+	*/
+	
+	if ($rowcount % 4 == 0) $blank = 1;
+	elseif ($rowcount % 3 == 0) $blank = 2;
+	elseif ($rowcount % 2 == 0) $blank = 3;
+	elseif ($rowcount % 1 == 0) $blank = 4;
+	
+	for ($i = 1; $i <= $blank; $i++) {
+		echo '<div class="item">';
+		echo '</div>';
+	}
+	?>
+
+  </div>
+
+
+<?php
+
+try {
+	$conn4 = new PDO('sqlite:db_photo.sqlite3');
+	$query4 = "SELECT COUNT(*) AS count FROM photos";
+	
+	$stmt = $conn4->prepare($query4);
+	$stmt->execute();
+	
+	$result = $stmt->fetch(PDO::FETCH_ASSOC);
+	$numRows = $result['count'];
+	
+	$conn4 = null;
+    }
+    catch(PDOException $e) {
+        echo $e->getMessage();
+        }
+
+
+// calcul du nombre de pages (arrondi a l'entier supérieur)
+$nbpages = ceil($numRows / 12);
+$prec = $page - 1;
+$suiv = $page + 1;
+/*
+echo "nbpages " . $nbpages;
+echo "prec " . $prec;
+echo "suiv " . $suiv;
+*/
+/**/
+echo '<div class="navPage">' . gettext("Page: ");
+if ($page >= 2) echo '<a href="'.$_SERVER['PHP_SELF'].'?page='.$prec.'" title="'.gettext("Previous Page").'">&laquo; '.gettext("prev").'</a>&nbsp;';
+for ($i = 1; $i <= $nbpages; $i++) {
+	if ($i != $page) {
+		echo '<a href="'.$_SERVER['PHP_SELF'].'?page='.$i.'" title="'.gettext("Page").' '.$i.'">'.$i.' </a>&nbsp;';
+		}
+	else {
+		echo "<span class='gras'>".$i."</span>&nbsp;&nbsp;";
+		}
+	}
+if ($page < $nbpages) echo '<a href="'.$_SERVER['PHP_SELF'].'?page='.$suiv.'" title="'.gettext("Next Page").'">'.gettext("next").' &raquo;</a>&nbsp;';
+
+echo '</div>';
+
+?>
+
+<p><em><small>@ 2022</small></em></p>
+</body>
+
+</html>
--- a/_test/photo-du-mois-lc-lite.php
+++ b/_test/photo-du-mois-lc-lite.php
@@ -0,0 +1,275 @@
+<!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' />
+       
+<?php include 'functions.php'; ?>
+
+	<script src='https://code.jquery.com/jquery-3.2.1.min.js' type='text/javascript'></script>
+
+</head>
+
+<body>
+
+    
+<h1 class="_h1"><?php echo gettext("Photo du mois"); ?></h1>
+
+<?php
+if (!isset($_GET['page'])) $page = 1;
+// sinon on recupere la valeur numerique reçue en paramètre
+else $page = intval($_GET['page']);
+
+?>
+
+<?php
+try {
+	$conn4 = new PDO('sqlite:db_photo.sqlite3');
+	$query4 = "SELECT filename, date, lens, exposure, iso, width, height, html, aperture, model, lat, long, alt, legende, copyright, titre, createur, keywords FROM photos 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();
+        }
+        
+    $photo_du_mois = $result[0];
+    $z = $photo_du_mois['date'];
+    
+    $photo_du_mois['titre'] = "Titre";
+    $photo_du_mois['legende'] = "Légende";
+
+	if (!empty($photo_du_mois['titre'])) {
+		 $x = $photo_du_mois['titre'];
+		 $y = $photo_du_mois['legende'];
+	 }
+	elseif (!empty($photo_du_mois['legende'])) {
+		$x = $photo_du_mois['legende'];
+	}
+	else {
+		$x = basename($photo_du_mois['filename']);
+		$y = "";
+	}
+    
+	$month_exif = $photo_du_mois['model'] . " \u{30FB} " .  $photo_du_mois['lens'] . " \u{30FB} " . $photo_du_mois['exposure'] . " \u{30FB} " . $photo_du_mois['aperture'] . " \u{30FB} " . $photo_du_mois['iso'] . " ISO";
+?>
+
+<p class="month"><?php echo month($z); ?></p>
+
+<?php
+
+	//_pr($photo_du_mois);
+	echo '<div class="cadre" id="lcl_month">';
+	echo '<a href ="' . $photo_du_mois['filename'] . '" title="' . $x . '" data-lcl-txt="' . $y .'" data-lcl-author="' . $month_exif . '">';
+	// data-lcl-author=
+	echo '<img src="' . $photo_du_mois['filename'] . '" class="trois" />';
+
+	echo "</a>";
+	echo '</div>';
+	
+	if (!empty($photo_du_mois['titre']) || !empty($photo_du_mois['legende'])) {
+	?>
+		<p class="titrePhoto"><?php echo $photo_du_mois['titre']; ?></p>
+		<p class="legendePhoto"><?php echo $photo_du_mois['legende']; ?></p>
+	<?php } 
+
+	echo '<div class="exif">';
+	//echo $photo_du_mois['model'] . " \u{30FB} " .  $photo_du_mois['lens'] . " \u{30FB} ";
+	//echo $photo_du_mois['exposure'] . " \u{30FB} " .  $photo_du_mois['aperture'] . " \u{30FB} " . $photo_du_mois['iso'] . " ISO";
+	echo $month_exif;
+	echo '</div>';
+?>
+
+
+<div class="myGallery" id="lcl_gallery">
+	
+	<?php
+	/**/
+	for ($i = 1; $i <= ($rowcount -1); $i++) {
+    	$file = $result[$i]['filename'];
+		$date = $result[$i]['date'];
+	 	$objectif = $result[$i]['lens'];
+		 $exposure = $result[$i]['exposure'];
+ 		$iso = $result[$i]['iso'];
+ 		$width = $result[$i]['width'];
+ 		$height = $result[$i]['height'];
+	 	$html = $result[$i]['html'];
+ 		$aperture = $result[$i]['aperture'];
+ 		$model = $result[$i]['model'];
+ 		
+ 		$lat = $result[$i]['lat']; 
+ 		$long = $result[$i]['long']; 
+ 		$alt = $result[$i]['alt'];
+ 		
+ 		$legende = $result[$i]['legende'];
+ 		$copy = $result[$i]['copyright'];
+ 		$titre = $result[$i]['titre'];
+ 		$createur = $result[$i]['createur']; 
+ 		$keywords = $result[$i]['keywords'];
+ 		//$keywords = str_replace(',', ' - ', $keywords);
+ 		$keywords = "\u{1F3F7} " . str_replace(',', " \u{30FB} ", $keywords);
+     
+     	if (!empty($titre)) {
+			 $x = $titre;
+			 $y = $legende;
+		 }
+    	elseif (!empty($legende)) {
+			$x = $legende;
+		}
+    	else {
+			$x = basename($file);
+			$y = "";
+		}
+		
+    
+    	$exif = $model . " \u{30FB} " .  $objectif . " \u{30FB} " .  $exposure . " \u{30FB} " .  $aperture . " \u{30FB} " .  $iso . "ISO";
+
+		$thumb = str_replace("photos/img", "photos/thumb", $file);
+		echo '<div class="item">';
+		echo '<a href ="' . $file . '" title="' . $x . '" data-lcl-txt="' . $y .'" data-lcl-author="' . $exif . '">';
+		echo '<img src="' . $thumb . '" alt="' . $x . '" />';
+		echo "</a>";
+		echo '<span class="caption">' . month($date) . '</span>';
+		echo '</div>';
+	}
+	
+	/*
+	$rowcount = 5 - 10 - 15 => add 0
+	$rowcount = 4 - 9 - 14 => add 1
+	$rowcount = 3 - 8 - 13 => add 2
+	$rowcount = 2 - 7 - 12 => add 3
+	$rowcount = 1 - 6 - 11 => add 4
+	*/
+	
+	if ($rowcount % 4 == 0) $blank = 1;
+	elseif ($rowcount % 3 == 0) $blank = 2;
+	elseif ($rowcount % 2 == 0) $blank = 3;
+	elseif ($rowcount % 1 == 0) $blank = 4;
+	
+	for ($i = 1; $i <= $blank; $i++) {
+		echo '<div class="item">';
+		echo '</div>';
+	}
+	?>
+
+  </div>
+
+<script type='text/javascript'>
+  $(document).ready(function() {
+	 /* var $obj = lc_lightbox('#lcl_elems_wrapper a');*/
+	  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
+		  shox_title : true,		// s'il faut afficher les titres
+		  show_descr : false,		// 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 $obj = lc_lightbox('#lcl_month a', {
+		  img_zoom : true,
+		  deeplink : true,
+		  open_close_time : 200,
+		  ol_time_diff : 100,
+		  wrap_class : 'lcl_zoomin_oc',
+		  skin : 'minimal',
+		  txt_hidden : true,
+		  fullscreen : true,
+		  fs_img_behavior : 'smart',
+		  browser_fs_mode : true,
+		  rclick_prevent : true,
+	  });
+
+  });
+  </script>
+
+
+<?php
+
+try {
+	$conn4 = new PDO('sqlite:db_photo.sqlite3');
+	$query4 = "SELECT COUNT(*) AS count FROM photos";
+	
+	$stmt = $conn4->prepare($query4);
+	$stmt->execute();
+	
+	$result = $stmt->fetch(PDO::FETCH_ASSOC);
+	$numRows = $result['count'];
+	
+	$conn4 = null;
+    }
+    catch(PDOException $e) {
+        echo $e->getMessage();
+        }
+
+
+// calcul du nombre de pages (arrondi a l'entier supérieur)
+$nbpages = ceil($numRows / 12);
+$prec = $page - 1;
+$suiv = $page + 1;
+
+echo '<div class="navPage">' . gettext("Page: ");
+if ($page >= 2) echo '<a href="'.$_SERVER['PHP_SELF'].'?page='.$prec.'" title="'.gettext("Previous Page").'">&laquo; '.gettext("prev").'</a>&nbsp;';
+for ($i = 1; $i <= $nbpages; $i++) {
+	if ($i != $page) {
+		echo '<a href="'.$_SERVER['PHP_SELF'].'?page='.$i.'" title="'.gettext("Page").' '.$i.'">'.$i.' </a>&nbsp;';
+		}
+	else {
+		echo "<span class='gras'>".$i."</span>&nbsp;&nbsp;";
+		}
+	}
+if ($page < $nbpages) echo '<a href="'.$_SERVER['PHP_SELF'].'?page='.$suiv.'" title="'.gettext("Next Page").'">'.gettext("next").' &raquo;</a>&nbsp;';
+
+echo '</div>';
+
+?>
+
+<p><em><small>@ 2022</small></em></p>
+
+<script src='js/lc_lightbox.lite.min.js' type='text/javascript'></script>
+<script src='js/alloy_finger.min.js' type='text/javascript'></script>
+
+</body>
+
+</html>
--- a/_test/photo-du-mois-ng.php
+++ b/_test/photo-du-mois-ng.php
@@ -0,0 +1,215 @@
+<!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>Document</title>
+    <link rel="stylesheet" href="css/sls.css">
+	<script src='https://code.jquery.com/jquery-3.2.1.min.js' type='text/javascript'></script>
+     
+	<!-- nanogallery2 -->
+	<link  href="https://cdn.jsdelivr.net/npm/nanogallery2@3/dist/css/nanogallery2.min.css" rel="stylesheet" type="text/css">
+	<script  type="text/javascript" src="https://cdn.jsdelivr.net/npm/nanogallery2@3/dist/jquery.nanogallery2.min.js"></script>
+       
+<?php include 'functions.php'; ?>
+
+	
+
+</head>
+
+<body>
+
+    
+<h1 class="_h1"><?php echo gettext("Photo du mois"); ?></h1>
+
+<?php
+if (!isset($_GET['page'])) $page = 1;
+// sinon on recupere la valeur numerique reçue en paramètre
+else $page = intval($_GET['page']);
+
+?>
+
+<?php
+try {
+	$conn4 = new PDO('sqlite:db_photo.sqlite3');
+	$query4 = "SELECT filename, date, lens, exposure, iso, width, height, html, aperture, model, lat, long, alt, legende, copyright, titre, createur, keywords FROM photos 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();
+        }
+        
+    $photo_du_mois = $result[0];
+    $z = $photo_du_mois['date'];
+    
+    $photo_du_mois['titre'] = "Titre";
+    $photo_du_mois['legende'] = "Légende";
+    
+?>
+
+<p class="month"><?php echo month($z); ?></p>
+
+<?php
+
+	//_pr($photo_du_mois);
+	echo '<div class="cadre">';
+	echo '<img src="' . $photo_du_mois['filename'] . '" class="trois" />';
+	echo '</div>';
+	
+	if (!empty($photo_du_mois['titre']) || !empty($photo_du_mois['legende'])) {
+	?>
+		<p class="titrePhoto"><?php echo $photo_du_mois['titre']; ?></p>
+		<p class="legendePhoto"><?php echo $photo_du_mois['legende']; ?></p>
+	<?php } 
+
+	echo '<div class="exif">';
+	echo $photo_du_mois['model'] . " \u{30FB} " .  $photo_du_mois['lens'] . " \u{30FB} ";
+	echo $photo_du_mois['exposure'] . " \u{30FB} " .  $photo_du_mois['aperture'] . " \u{30FB} " . $photo_du_mois['iso'] . " ISO";
+	echo '</div>';
+?>
+
+
+<!--div class="myGallery" id="lcl_elems_wrapper"-->
+<div class="myGallery" id="nanogallery2" data-nanogallery2 = '{
+	"thumbnailHeight":  300,
+	"thumbnailWidth":   300,
+	"itemsBaseURL":     "https://airbook.local/sls/"
+  }' >
+	
+	<?php
+	/**/
+	for ($i = 1; $i <= ($rowcount -1); $i++) {
+    $file = $result[$i]['filename'];
+ 	  $date = $result[$i]['date'];
+	 	$objectif = $result[$i]['lens'];
+	  $exposure = $result[$i]['exposure'];
+ 		$iso = $result[$i]['iso'];
+ 		$width = $result[$i]['width'];
+ 		$height = $result[$i]['height'];
+	 	$html = $result[$i]['html'];
+ 		$aperture = $result[$i]['aperture'];
+ 		$model = $result[$i]['model'];
+ 		
+ 		$lat = $result[$i]['lat']; 
+ 		$long = $result[$i]['long']; 
+ 		$alt = $result[$i]['alt'];
+ 		
+ 		$legende = $result[$i]['legende'];
+ 		$copy = $result[$i]['copyright'];
+ 		$titre = $result[$i]['titre'];
+ 		$createur = $result[$i]['createur']; 
+ 		$keywords = $result[$i]['keywords'];
+ 		//$keywords = str_replace(',', ' - ', $keywords);
+ 		$keywords = "\u{1F3F7} " . str_replace(',', " \u{30FB} ", $keywords);
+     
+     	if (!empty($titre)) {
+			 $x = $titre;
+			 $y = $legende;
+		 }
+    	elseif (!empty($legende)) {
+			$x = $legende;
+		}
+    	else {
+			$x = basename($file);
+			$y = "";
+		}
+		
+		
+    
+    	$exif = $model . " \u{30FB} " .  $objectif . " \u{30FB} " .  $exposure . " \u{30FB} " .  $aperture . " \u{30FB} " .  $iso ;
+    	// $x  = $x . "\r\n" . $exif;
+
+
+		$thumb = str_replace("photos/img", "photos/thumb", $file);
+		echo '<div class="item">';
+    //echo '<a href ="' . $file . '" data-lg-size="' . $width . '">';
+		echo '<a href ="' . $file . '">';
+		echo '<img src="' . $thumb . '" alt="' . $x . '" />';
+		//echo "bla";
+		echo "</a>";
+		//echo '<span class="caption">' . month($date) . '</span>';
+		echo '</div>';
+	}
+	
+	/*
+	$rowcount = 5 - 10 - 15 => add 0
+	$rowcount = 4 - 9 - 14 => add 1
+	$rowcount = 3 - 8 - 13 => add 2
+	$rowcount = 2 - 7 - 12 => add 3
+	$rowcount = 1 - 6 - 11 => add 4
+	*/
+	
+	if ($rowcount % 4 == 0) $blank = 1;
+	elseif ($rowcount % 3 == 0) $blank = 2;
+	elseif ($rowcount % 2 == 0) $blank = 3;
+	elseif ($rowcount % 1 == 0) $blank = 4;
+	
+	for ($i = 1; $i <= $blank; $i++) {
+		echo '<div class="item">';
+		echo '</div>';
+	}
+	?>
+
+  </div>
+
+
+
+
+<?php
+
+try {
+	$conn4 = new PDO('sqlite:db_photo.sqlite3');
+	$query4 = "SELECT COUNT(*) AS count FROM photos";
+	
+	$stmt = $conn4->prepare($query4);
+	$stmt->execute();
+	
+	$result = $stmt->fetch(PDO::FETCH_ASSOC);
+	$numRows = $result['count'];
+	
+	$conn4 = null;
+    }
+    catch(PDOException $e) {
+        echo $e->getMessage();
+        }
+
+
+// calcul du nombre de pages (arrondi a l'entier supérieur)
+$nbpages = ceil($numRows / 12);
+$prec = $page - 1;
+$suiv = $page + 1;
+
+echo '<div class="navPage">' . gettext("Page: ");
+if ($page >= 2) echo '<a href="'.$_SERVER['PHP_SELF'].'?page='.$prec.'" title="'.gettext("Previous Page").'">&laquo; '.gettext("prev").'</a>&nbsp;';
+for ($i = 1; $i <= $nbpages; $i++) {
+	if ($i != $page) {
+		echo '<a href="'.$_SERVER['PHP_SELF'].'?page='.$i.'" title="'.gettext("Page").' '.$i.'">'.$i.' </a>&nbsp;';
+		}
+	else {
+		echo "<span class='gras'>".$i."</span>&nbsp;&nbsp;";
+		}
+	}
+if ($page < $nbpages) echo '<a href="'.$_SERVER['PHP_SELF'].'?page='.$suiv.'" title="'.gettext("Next Page").'">'.gettext("next").' &raquo;</a>&nbsp;';
+
+echo '</div>';
+
+?>
+
+<p><em><small>@ 2022</small></em></p>
+
+</body>
+
+</html>
--- a/_test/photo-du-mois-ps.php
+++ b/_test/photo-du-mois-ps.php
@@ -0,0 +1,259 @@
+<!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>Document</title>
+    <link rel="stylesheet" href="css/photoswipe.css">
+    <!--script src="js/photoswipe.esm.js"></script>
+    <script src="js/photoswipe-lightbox.esm.js"></script-->
+    <link rel="stylesheet" href="css/sls.css">
+     
+    
+<?php include 'functions.php'; ?>
+
+<script type="module">
+// Include Lightbox 
+import PhotoSwipeLightbox from './js/photoswipe-lightbox.esm.js';
+
+const backEasing = {
+  in: 'cubic-bezier(0.6, -0.28, 0.7, 1)',
+  out: 'cubic-bezier(0.3, 0, 0.32, 1.275)',
+  inOut: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)'
+};
+
+const options = {
+  // may select multiple "galleries"
+  gallery: '#gallery--simple',
+
+  // Elements within gallery (slides)
+  children: 'a',
+  //showHideAnimationType: 'zoom',
+  //showAnimationDuration: 1000,
+  //hideAnimationDuration: 1000,
+
+  // Include PhotoSwipe Core
+  // and use absolute path (that starts with http(s)://)
+  //pswpModule: 'https://airbook.local/sls/js/photoswipe.esm.js'
+  pswpModule: 'https://<?php echo $_SERVER["SERVER_NAME"]; ?>/sls/js/photoswipe.esm.js'
+};
+
+const lightbox = new PhotoSwipeLightbox(options);
+lightbox.on('uiRegister', function() {
+  lightbox.pswp.ui.registerElement({
+    name: 'custom-caption',
+    order: 9,
+    isButton: false,
+    appendTo: 'root',
+    html: 'Caption text',
+    onInit: (el, pswp) => {
+      lightbox.pswp.on('change', () => {
+        const currSlideElement = lightbox.pswp.currSlide.data.element;
+        let captionHTML = '';
+        if (currSlideElement) {
+          const hiddenCaption = currSlideElement.querySelector('.hidden-caption-content');
+          if (hiddenCaption) {
+            // get caption from element with class hidden-caption-content
+            captionHTML = hiddenCaption.innerHTML;
+          } else {
+            // get caption from alt attribute
+            captionHTML = currSlideElement.querySelector('img').getAttribute('alt');
+          }
+        }
+        el.innerHTML = captionHTML || '';
+      });
+    }
+  });
+});
+lightbox.init();
+
+lightbox.on('firstUpdate', () => {
+  lightbox.pswp.options.easing = backEasing.out;
+});
+lightbox.on('initialZoomInEnd', () => {
+  lightbox.pswp.options.easing = backEasing.inOut;
+});
+lightbox.on('close', () => {
+  lightbox.pswp.options.easing = backEasing.in;
+});
+
+lightbox.init();
+</script>
+
+</head>
+
+<body>
+
+<h1 class="_h1"><?php echo gettext("Photo du mois"); ?></h1>
+
+<?php
+if (!isset($_GET['page'])) $page = 1;
+// sinon on recupere la valeur numerique reçue en paramètre
+else $page = intval($_GET['page']);
+
+?>
+
+<?php
+try {
+	$conn4 = new PDO('sqlite:db_photo.sqlite3');
+	$query4 = "SELECT filename, date, lens, exposure, iso, width, height, html, aperture, model, lat, long, alt, legende, copyright, titre, createur, keywords FROM photos 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();
+        }
+        
+    $photo_du_mois = $result[0];
+    $z = $photo_du_mois['date'];
+    
+    $photo_du_mois['titre'] = "Titre";
+    $photo_du_mois['legende'] = "Légende";
+    
+?>
+
+<p class="month"><?php echo month($z); ?></p>
+
+<?php
+
+	//_pr($photo_du_mois);
+	echo '<div class="cadre">';
+	echo '<img src="' . $photo_du_mois['filename'] . '" class="trois" />';
+	echo '</div>';
+	
+	if (!empty($photo_du_mois['titre']) || !empty($photo_du_mois['legende'])) {
+	?>
+		<p class="titrePhoto"><?php echo $photo_du_mois['titre']; ?></p>
+		<p class="legendePhoto"><?php echo $photo_du_mois['legende']; ?></p>
+	<?php } 
+
+	echo '<div class="exif">';
+	echo $photo_du_mois['model'] . " \u{30FB} " .  $photo_du_mois['lens'] . " \u{30FB} ";
+	echo $photo_du_mois['exposure'] . " \u{30FB} " .  $photo_du_mois['aperture'] . " \u{30FB} " . $photo_du_mois['iso'] . " ISO";
+	echo '</div>';
+?>
+
+
+<div class="myGallery" id="gallery--simple">
+	
+	<?php
+	/**/
+	for ($i = 1; $i <= ($rowcount -1); $i++) {
+    $file = $result[$i]['filename'];
+ 	  $date = $result[$i]['date'];
+	 	$objectif = $result[$i]['lens'];
+	  $exposure = $result[$i]['exposure'];
+ 		$iso = $result[$i]['iso'];
+ 		$width = $result[$i]['width'];
+ 		$height = $result[$i]['height'];
+	 	$html = $result[$i]['html'];
+ 		$aperture = $result[$i]['aperture'];
+ 		$model = $result[$i]['model'];
+ 		
+ 		$lat = $result[$i]['lat']; 
+ 		$long = $result[$i]['long']; 
+ 		$alt = $result[$i]['alt'];
+ 		
+ 		$legende = $result[$i]['legende'];
+ 		$copy = $result[$i]['copyright'];
+ 		$titre = $result[$i]['titre'];
+ 		$createur = $result[$i]['createur']; 
+ 		$keywords = $result[$i]['keywords'];
+ 		//$keywords = str_replace(',', ' - ', $keywords);
+ 		$keywords = "\u{1F3F7} " . str_replace(',', " \u{30FB} ", $keywords);
+     
+    if (!empty($titre)) $x = $titre;
+    elseif (!empty($legende)) $x = $legende;
+    else $x = basename($file);
+    
+    $exif = $model . " \u{30FB} " .  $objectif . " \u{30FB} " .  $exposure . " \u{30FB} " .  $aperture . " \u{30FB} " .  $iso ;
+   // $x  = $x . "\r\n" . $exif;
+
+
+		$thumb = str_replace("photos/img", "photos/thumb", $file);
+		echo '<div class="item">';
+		echo '<a href ="' . $file . '" data-pswp-width="' . $width . '"' . '" data-pswp-height="'. $height . '" target="_blank">';
+		echo '<img src="' . $thumb . '" alt="' . $x . '" />';
+		echo "</a>";
+		echo '<span class="caption">' . month($date) . '</span>';
+		echo '</div>';
+	}
+	
+	/*
+	$rowcount = 5 - 10 - 15 => add 0
+	$rowcount = 4 - 9 - 14 => add 1
+	$rowcount = 3 - 8 - 13 => add 2
+	$rowcount = 2 - 7 - 12 => add 3
+	$rowcount = 1 - 6 - 11 => add 4
+	*/
+	
+	if ($rowcount % 4 == 0) $blank = 1;
+	elseif ($rowcount % 3 == 0) $blank = 2;
+	elseif ($rowcount % 2 == 0) $blank = 3;
+	elseif ($rowcount % 1 == 0) $blank = 4;
+	
+	for ($i = 1; $i <= $blank; $i++) {
+		echo '<div class="item">';
+		echo '</div>';
+	}
+	?>
+
+  </div>
+
+
+<?php
+
+try {
+	$conn4 = new PDO('sqlite:db_photo.sqlite3');
+	$query4 = "SELECT COUNT(*) AS count FROM photos";
+	
+	$stmt = $conn4->prepare($query4);
+	$stmt->execute();
+	
+	$result = $stmt->fetch(PDO::FETCH_ASSOC);
+	$numRows = $result['count'];
+	
+	$conn4 = null;
+    }
+    catch(PDOException $e) {
+        echo $e->getMessage();
+        }
+
+
+// calcul du nombre de pages (arrondi a l'entier supérieur)
+$nbpages = ceil($numRows / 12);
+$prec = $page - 1;
+$suiv = $page + 1;
+
+echo '<div class="navPage">' . gettext("Page: ");
+if ($page >= 2) echo '<a href="'.$_SERVER['PHP_SELF'].'?page='.$prec.'" title="'.gettext("Previous Page").'">&laquo; '.gettext("prev").'</a>&nbsp;';
+for ($i = 1; $i <= $nbpages; $i++) {
+	if ($i != $page) {
+		echo '<a href="'.$_SERVER['PHP_SELF'].'?page='.$i.'" title="'.gettext("Page").' '.$i.'">'.$i.' </a>&nbsp;';
+		}
+	else {
+		echo "<span class='gras'>".$i."</span>&nbsp;&nbsp;";
+		}
+	}
+if ($page < $nbpages) echo '<a href="'.$_SERVER['PHP_SELF'].'?page='.$suiv.'" title="'.gettext("Next Page").'">'.gettext("next").' &raquo;</a>&nbsp;';
+
+echo '</div>';
+
+?>
+
+<p><em><small>@ 2022</small></em></p>
+</body>
+
+</html>