346 lines
7.5 KiB
PHP
346 lines
7.5 KiB
PHP
<!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>
|