Ok super Or1,
J'ai modifié le code par celui que tu as envoyé en modifiant:
- l'image du loader.
- j'ai mis le script ajax et le plugin dans le /head.
- J'ai retiré la classe de la div car ca faisait bug toute ma page (c'etait surement une class pour son exemple à lui).
Mais ca fonctionne bizarrement.
Je n'ai pas compris l'histoire de la page "pagionation.php".
Je dois mettre quoi là dedans ?
Surement pour ca que ca bug comme ça ?
Merci de ton aide !
Code:
Code : Tout sélectionner
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="styleR.css" />
<title>Visit Earth</title>
<!-- JQuery CDN -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- Inview Js (jquery.inview.js) -->
<script src="jquery.inview.js"></script>
</head>
<body>
<div id="bloc_page">
<header>
<p><img src="img/logo.jpg" alt="logo" id="logo"></p>
<h1>Découvrez les meilleures choses à voir et à faire dans le Monde. </h1><br />
</header>
<?php
try
{
// On se connecte à MySQL
$bdd = new PDO('mysql:host=localhost;dbname=visitearth;charset=utf8', 'root', 'root');
}
catch(Exception $e)
{
// En cas d'erreur, on affiche un message et on arrête tout
die('Erreur : '.$e->getMessage());
}
$reponse = $bdd->query('SELECT l.comte_nom, l.lieu_nom, l.pays_nom, p.flag_nom, l.lieu_url
FROM lieux l LEFT JOIN pays p ON l.pays_nom = p.pays_nom ORDER BY l.lieu_nom LIMIT 633 OFFSET 8');
?>
<div id="filters">
<div class="labeltheme">
<div>Thèmes</div>
<select name="lieux">
<option value="lieux" selected>Lieux à découvrir</option>
</select></div>
<div class="labelpays">
<div>Pays</div>
<select class= "selectpays" name="pays">
<?php
$requete = 'SELECT pays_nom FROM pays';
$liste_pays = $bdd->query($requete);
while ($donnees = $liste_pays->fetch()) {
echo '<option value="' . $donnees['pays_nom'] . '">' . $donnees['pays_nom'] . '</option>';
}
?>
</select></div>
<div class="labeltype">
<div>Types</div>
<select name="type">
</select></div>
</div>
<br>
<br />
<div class="textelieu">
<?php
$requete = 'SELECT lieu_nom FROM lieux';
$nombre_de_lieux = $bdd->query($requete);
$result = $nombre_de_lieux->fetchAll();
echo count($result);
$nombre_de_lieux->closeCursor();
?> ENDROITS À DÉCOUVRIR</div>
<br>
<?php while ($donnees = $reponse->fetch()) { ?>
<div class="vignette">
<img src="<?php echo $donnees['lieu_url']; ?>" alt="Lieu" class="imglieu"/>
<div class="overlay"></div>
<div class="lieu"><?php echo $donnees['lieu_nom']; ?></div>
<div class="pays"><?php echo $donnees['pays_nom']; ?>, <?php echo $donnees['comte_nom']; ?></div>
<img src="<?php echo $donnees['flag_nom']; ?>" alt="drapeau" class="flag"/>
</div>
<input type="hidden" id="pageno" value="1">
<img id="loader" src="img/loader.gif">
<script>
$(document).ready(function(){
$('#loader').on('inview', function(event, isInView) {
if (isInView) {
var nextPage = parseInt($('#pageno').val())+1;
$.ajax({
type: 'POST',
url: 'pagination.php',
data: { pageno: nextPage },
success: function(data){
if(data != ''){
$('#response').append(data);
$('#pageno').val(nextPage);
} else {
$("#loader").hide();
}
}
});
}
});
});
</script>
<?php }
$dirOrigine = "img_lieux/";
$diruploads = "uploads/";
$fichier = $donnees['lieu_url'];
// Dimensions de la vignette en pixels
$thumbWidth = 270;
$thumbHeight = 302;
// Lecture de l'image en supposant que ton image de base soit toujours un JPG
// Nota : si tu veux pouvoir utiliser des PNG ou autre, il faut tester le type de l'image et utiliser la fonction adaptée
$img = imageCreateFromJpeg($dirOrigine . $fichier);
// Détermine les dimensions de l'image d'origine
$imgWidth = imagesx($img);
$imgHeight = imagesy($img);
// Crée la future vignette avec TrueColor si GD2 est disponible, sinon tu peux utiliser ImageCreate()
$imgThumb = imageCreateTrueColor($thumbWidth, $thumbHeight);
// Redimensionne l'image d'origine,
imageCopyResized($imgThumb, $img, 0, 0, 0, 0, $thumbWidth, $thumbHeight, $imgWidth, $imgHeight);
// Sauvegarde de l'image dans le dossier uploads
imageJpeg($imgThumb, $diruploads . $fichier);
// Libération de la mémoire
imageDestroy($imgThumb);
?>
</body>
</html>Ok super Or1,
J'ai modifié le code par celui que tu as envoyé en modifiant:
- l'image du loader.
- j'ai mis le script ajax et le plugin dans le /head.
- J'ai retiré la classe de la div car ca faisait bug toute ma page (c'etait surement une class pour son exemple à lui).
Mais ca fonctionne bizarrement.
Je n'ai pas compris l'histoire de la page "pagionation.php".
Je dois mettre quoi là dedans ?
Surement pour ca que ca bug comme ça ?
Merci de ton aide !
Code:
[code]<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="styleR.css" />
<title>Visit Earth</title>
<!-- JQuery CDN -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- Inview Js (jquery.inview.js) -->
<script src="jquery.inview.js"></script>
</head>
<body>
<div id="bloc_page">
<header>
<p><img src="img/logo.jpg" alt="logo" id="logo"></p>
<h1>Découvrez les meilleures choses à voir et à faire dans le Monde. </h1><br />
</header>
<?php
try
{
// On se connecte à MySQL
$bdd = new PDO('mysql:host=localhost;dbname=visitearth;charset=utf8', 'root', 'root');
}
catch(Exception $e)
{
// En cas d'erreur, on affiche un message et on arrête tout
die('Erreur : '.$e->getMessage());
}
$reponse = $bdd->query('SELECT l.comte_nom, l.lieu_nom, l.pays_nom, p.flag_nom, l.lieu_url
FROM lieux l LEFT JOIN pays p ON l.pays_nom = p.pays_nom ORDER BY l.lieu_nom LIMIT 633 OFFSET 8');
?>
<div id="filters">
<div class="labeltheme">
<div>Thèmes</div>
<select name="lieux">
<option value="lieux" selected>Lieux à découvrir</option>
</select></div>
<div class="labelpays">
<div>Pays</div>
<select class= "selectpays" name="pays">
<?php
$requete = 'SELECT pays_nom FROM pays';
$liste_pays = $bdd->query($requete);
while ($donnees = $liste_pays->fetch()) {
echo '<option value="' . $donnees['pays_nom'] . '">' . $donnees['pays_nom'] . '</option>';
}
?>
</select></div>
<div class="labeltype">
<div>Types</div>
<select name="type">
</select></div>
</div>
<br>
<br />
<div class="textelieu">
<?php
$requete = 'SELECT lieu_nom FROM lieux';
$nombre_de_lieux = $bdd->query($requete);
$result = $nombre_de_lieux->fetchAll();
echo count($result);
$nombre_de_lieux->closeCursor();
?> ENDROITS À DÉCOUVRIR</div>
<br>
<?php while ($donnees = $reponse->fetch()) { ?>
<div class="vignette">
<img src="<?php echo $donnees['lieu_url']; ?>" alt="Lieu" class="imglieu"/>
<div class="overlay"></div>
<div class="lieu"><?php echo $donnees['lieu_nom']; ?></div>
<div class="pays"><?php echo $donnees['pays_nom']; ?>, <?php echo $donnees['comte_nom']; ?></div>
<img src="<?php echo $donnees['flag_nom']; ?>" alt="drapeau" class="flag"/>
</div>
<input type="hidden" id="pageno" value="1">
<img id="loader" src="img/loader.gif">
<script>
$(document).ready(function(){
$('#loader').on('inview', function(event, isInView) {
if (isInView) {
var nextPage = parseInt($('#pageno').val())+1;
$.ajax({
type: 'POST',
url: 'pagination.php',
data: { pageno: nextPage },
success: function(data){
if(data != ''){
$('#response').append(data);
$('#pageno').val(nextPage);
} else {
$("#loader").hide();
}
}
});
}
});
});
</script>
<?php }
$dirOrigine = "img_lieux/";
$diruploads = "uploads/";
$fichier = $donnees['lieu_url'];
// Dimensions de la vignette en pixels
$thumbWidth = 270;
$thumbHeight = 302;
// Lecture de l'image en supposant que ton image de base soit toujours un JPG
// Nota : si tu veux pouvoir utiliser des PNG ou autre, il faut tester le type de l'image et utiliser la fonction adaptée
$img = imageCreateFromJpeg($dirOrigine . $fichier);
// Détermine les dimensions de l'image d'origine
$imgWidth = imagesx($img);
$imgHeight = imagesy($img);
// Crée la future vignette avec TrueColor si GD2 est disponible, sinon tu peux utiliser ImageCreate()
$imgThumb = imageCreateTrueColor($thumbWidth, $thumbHeight);
// Redimensionne l'image d'origine,
imageCopyResized($imgThumb, $img, 0, 0, 0, 0, $thumbWidth, $thumbHeight, $imgWidth, $imgHeight);
// Sauvegarde de l'image dans le dossier uploads
imageJpeg($imgThumb, $diruploads . $fichier);
// Libération de la mémoire
imageDestroy($imgThumb);
?>
</body>
</html>[/code]
