29-03-2022

2022-03-29 12:51:24 +02:00
parent 414346b7f1
commit 6ebef5c974
16 changed files with 467 additions and 1360 deletions
--- a/photo-du-mois.php
+++ b/photo-du-mois.php
@@ -5,104 +5,56 @@
    <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-->
+    <title><?= _("Picture of the month");?></title>
    <link rel="stylesheet" href="css/sls.css">
     
-    
-<?php include 'functions.php'; ?>
+   <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
+	//if ($_SERVER['SERVER_NAME'] == 'airbook.local')
+	$root = $_SERVER['DOCUMENT_ROOT'];
+	//$root = dirname($_SERVER['SCRIPT_FILENAME']); // /Users/bruno/Sites/sls
+	include($root.'/lib2/localize.php');
+	$dir_locales = $root . '/Locale';

-<script type="module">
-// Include Lightbox 
-import PhotoSwipeLightbox from './js/photoswipe-lightbox.esm.js';
+	$liste_locale = list_dir($dir_locales);
+	if ((!isset($_POST['lang'])) and (!isset($_GET['lang']))) $langue = locale_language_from_browser($myLanguages);
+	else $langue = $_REQUEST['lang'];

-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)'
-};
+	$domain = 'sentier';
+	putenv('LC_ALL=' . $langue);
+	$loc = setlocale(LC_ALL, $langue);

-const options = {
-  // may select multiple "galleries"
-  gallery: '#gallery--simple',
+	bindtextdomain($domain, $root . '/Locale/');
+	bind_textdomain_codeset($domain, 'UTF-8');
+	textdomain($domain);
+	
+	$nation = array('fr_FR' => gettext('French'), 'en_US' => gettext('English') , 'de_DE' => gettext('German'), 'es_ES' => gettext('Spanish') );

-  // Elements within gallery (slides)
-  children: 'a',
-  //showHideAnimationType: 'zoom',
-  //showAnimationDuration: 1000,
-  //hideAnimationDuration: 1000,
+	include 'functions.php'; 
+?>

-  // 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>
+	<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>
+    
+<h1 class="_h1"> <?= _("Picture of the month");?></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 ?";
+	$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 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));
@@ -119,42 +71,57 @@ try {
    $photo_du_mois = $result[0];
    $z = $photo_du_mois['date'];
    
-    $photo_du_mois['titre'] = "Titre";
+    $photo_du_mois['title'] = "Titre";
    $photo_du_mois['legende'] = "Légende";
+
+	if (!empty($photo_du_mois['title'])) {
+		$x = $photo_du_mois['title'];
+		$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['speed'] . " \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">';
-	echo '<img src="' . $photo_du_mois['filename'] . '" class="trois" />';
+	echo '<div class="cadre" id="lcl_month">';
+	echo '<a href ="' . host() . $photo_du_mois['filename'] . '" title="' . $x . '" data-lcl-txt="' . $y .'" data-lcl-author="' . $month_exif . '">';
+	echo '<img src="' . host() . $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="titrePhoto"><?php echo $photo_du_mois['title']; ?></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 $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="gallery--simple">
+<div class="myGallery" id="lcl_gallery">
 	
 	<?php
-	/**/
+
 	for ($i = 1; $i <= ($rowcount -1); $i++) {
-    $file = $result[$i]['filename'];
- 	  $date = $result[$i]['date'];
+    	$file = $result[$i]['filename'];
+		$date = $result[$i]['date'];
 	 	$objectif = $result[$i]['lens'];
-	  $exposure = $result[$i]['exposure'];
+		$speed = $result[$i]['speed'];
 		$iso = $result[$i]['iso'];
 		$width = $result[$i]['width'];
 		$height = $result[$i]['height'];
@@ -168,24 +135,30 @@ try {
 		
 		$legende = $result[$i]['legende'];
 		$copy = $result[$i]['copyright'];
- 		$titre = $result[$i]['titre'];
- 		$createur = $result[$i]['createur']; 
+ 		$title = $result[$i]['title'];
+ 		$creator = $result[$i]['creator']; 
 		$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;
-
-
+     	if (!empty($title)) {
+			$x = $title;
+			$y = $legende;
+		 }
+    	elseif (!empty($legende)) {
+			$x = $legende;
+		}
+    	else {
+			$x = basename($file);
+			$y = "";
+		}
+		
+    	$exif = $model . " \u{30FB} " .  $objectif . " \u{30FB} " .  $speed . " \u{30FB} " .  $aperture . " \u{30FB} " .  $iso . "ISO";
 		$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 href ="' . host() . $file . '" title="' . $x . '" data-lcl-txt="' . $y .'" data-lcl-author="' . $exif . '">';
+		echo '<img src="' . host() . $thumb . '" alt="' . $x . '" />';
 		echo "</a>";
 		echo '<span class="caption">' . month($date) . '</span>';
 		echo '</div>';
@@ -210,7 +183,56 @@ try {
 	}
 	?>

-  </div>
+ </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
+		  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
@@ -231,13 +253,12 @@ try {
        echo $e->getMessage();
        }

-
 // calcul du nombre de pages (arrondi a l'entier supérieur)
-$nbpages = ceil($numRows / 12);
+$nbpages = ceil($numRows / 13);
 $prec = $page - 1;
 $suiv = $page + 1;

-echo '<div class="navPage">' . gettext("Page: ");
+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) {
@@ -253,7 +274,11 @@ echo '</div>';

 ?>

-<p><em><small>@ 2022</small></em></p>
+<p><em><small>sur-le-sentier.fr@ 2022</small></em></p>
+
+<script src='js/lc_lightbox.min.js' type='text/javascript'></script>
+<script src='js/alloy_finger.min.js' type='text/javascript'></script>
+
 </body>

 </html>