Add phtoswipe
This commit is contained in:
266
photo-du-mois.php
Normal file
266
photo-du-mois.php
Normal file
@@ -0,0 +1,266 @@
|
||||
<!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>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, 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);
|
||||
//_pr($result);
|
||||
$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><?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);
|
||||
|
||||
$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="' . basename($file) . '" />';
|
||||
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").'">« '.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>@ 2023</small></em></p>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user