06-04-2024
This commit is contained in:
346
_test/photo-du-mois _2.php
Normal file
346
_test/photo-du-mois _2.php
Normal file
@@ -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").'">« '.gettext("prev").'</a> ';
|
||||
for ($i = 1; $i <= $nbpages; $i++) {
|
||||
if ($i != $page) {
|
||||
echo '<a href="'.$_SERVER['PHP_SELF'].'?page='.$i.'" title="'.gettext("Page").' '.$i.'">'.$i.' </a> ';
|
||||
}
|
||||
else {
|
||||
echo "<span class='gras'>".$i."</span> ";
|
||||
}
|
||||
}
|
||||
if ($page < $nbpages) echo '<a href="'.$_SERVER['PHP_SELF'].'?page='.$suiv.'" title="'.gettext("Next Page").'">'.gettext("next").' »</a> ';
|
||||
|
||||
echo '</div>';
|
||||
|
||||
?>
|
||||
|
||||
<p><em><small>@ 2022</small></em></p>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user