Vous n'êtes pas identifié.

Annonce

Pages: 1

 

#1 probleme de pagination de ma galerie du 16-01-2012 11:17:44

olivierbem
c00lnaute nouveau
Date d'inscription: 16-01-2012
Messages: 3

probleme de pagination de ma galerie

Bonjour à tous,
je suis un bleu dans le développement web et actuellement je suis entrain de monter un site dans lequel il y'a une galerie, j'ai trouvé le code de la galerie dans ce site http://creer-un-site.fr/simple-galerie-d-images-222.php , et j'ai utilisé totalement ce code ça fonctionne bien et ça me flair bien, mon souci c'est que j'ai beaucoup d'image et c'est plus très beau, je voudrai paginer les miniatures, après plusieurs recherches je suis toujours perdu. Pouvez vous m'aider à régler ce problème?

Hors ligne

 

16-01-2012 11:17:44

Mister $$$
Créer un site


#2 Re probleme de pagination de ma galerie du 16-01-2012 11:38:08

c00lman
Administrateur
Date d'inscription: 16-08-2007
Messages: 1631
Site web

Re: probleme de pagination de ma galerie

Bonjour et bienvenue olivierbem,

Le code est à l'origine prévue pour une toute petite galerie d'images comme par exemple sur les sites d'annonces et n'a pas été pensé pour y introduire une pagination. Ceci dit, je vais tenter d'y remédier mais il va falloir être un peut patient..le temps que je trouve une solution et que j'effectue quelques testes. Sinon, penchez-vous sur des scripts prêts à l’emploie.

Créer un site internet gratuitement.

Hors ligne

 

#3 Re probleme de pagination de ma galerie du 16-01-2012 12:03:10

olivierbem
c00lnaute nouveau
Date d'inscription: 16-01-2012
Messages: 3

Re: probleme de pagination de ma galerie

Merci beaucoup pour votre réaction, en fait je travail sur ce script depuis plus d'une semaine, j'ai eu a télécharger plusieurs script prêt à l'emploi, ça marche sauf que pour tous ces site l'image standard ne s'affiche pas sur la même page; j'ai essayé de résoudre le problème en vain, j'ai même essayé de prendre la portion du code qui traite de la pagination pour intégrer dans le code de ce site et cela n'a pas marché.comme je vous ai dis précédemment je ne m'ensors pas encore en php.Je vais attendre la solution que vous allez me proposer.
Merci d'avance et aussi merci pour votre site et pour ce que vous faites

Dernière modification par olivierbem (16-01-2012 12:36:03)

Hors ligne

 

#4 Re probleme de pagination de ma galerie du 17-01-2012 15:00:30

c00lman
Administrateur
Date d'inscription: 16-08-2007
Messages: 1631
Site web

Re: probleme de pagination de ma galerie

Salut,

J'y suis parvenus non sans difficultés et ça semble fonctionner pour le moment...
En partant toujours du tutoriel sur : "Simple galerie" j'en est tiré le résultat suivant :" Simple galerie avec pagination".

Code PHP :

Code:

<div class="conteneur-galerie-image">
<?php
//ici le nombre d'image à afficher par page
$nombre_image_a_afficher = 2;
//ici l'emplacement du dossier à scanner
$adresse_miniature = "galerie-images/mini/";
//ici l'emplacement du dossier contenant les images de grandes tailles
$adresse_normal = "galerie-images/normal/";
$moinsun=$nombre_image_a_afficher-1;
$url_page = $_SERVER['PHP_SELF'];
//Numérotation de la page
if(empty($_GET['page'])){
    $num_page = 1;
}
else{
    $num_page = (is_numeric($_GET['page'])?$_GET['page']:1);
}
//Ouverture du répertoire
$ouverture = opendir($adresse_miniature);
$compteur = 0;
//début de la numérotation
$debut = ($num_page - 1) * $nombre_image_a_afficher;
//Fin de la numérotation
$fin = $debut + $moinsun;
echo '<ul class="miniature-galerie-image">';
//Boucle sur le répertoire
while (($Fichier = readdir($ouverture)) !== false) {
    if($Fichier != '.' && $Fichier != '..' && $Fichier != $url_page) {
        if ($compteur >= $debut && $compteur <= $fin) {
            if($compteur==$debut){
                echo '<div class="droite-galerie-image"><div id="affiche-image"><img src="'.$adresse_normal.$Fichier.'" alt="'.$Fichier.'"/></div></div>';
            }
            echo '<li><img alt="'.$Fichier.'" src="'.$adresse_miniature.$Fichier.'" onmouseover="ChangeImage(\''.$adresse_normal.$Fichier.'\');"/></li>';
        }
        $compteur++;
    }
}
closedir($ouverture);
echo '</ul></div><div class="pagination">';
echo ($num_page > 1?'<a title="Page '.($num_page - 1).'" href="'.$url_page.'?page='.($num_page - 1).'">« Page précédente</a>  ':'<span class="disabled">Page précédente</span> ');
$total = floor($compteur / $nombre_image_a_afficher);
if ($total != $compteur / $nombre_image_a_afficher)
$total++;
for($numerotation = 1;$numerotation <= $total;$numerotation++)
if($numerotation == $num_page){
    echo '<span class="nolien">'.$numerotation.'</span>';
}
else{
    echo '<a title="Page '.$numerotation.'" href="'.$url_page.'?page='.$numerotation.'">'.$numerotation.'</a>';
}
echo ($nombre_image_a_afficher * $num_page < $compteur?'  <a title="Page '.($num_page+1).'" href="'.$url_page.'?page='.($num_page+1).'">Page suivante »</a>':' <span class="disabled">Page suivante</span>');
echo '</div>';
?>

Code CSS :

Code:

.conteneur-galerie-image{
margin:0 auto;
border:5px solid #EEE;
width:670px;
height:auto;
overflow:auto;
padding:5px;
}
.gauche-galerie-image{
width:100px;
height:auto;
float:left;
}
.droite-galerie-image{
width:550px;
height:auto;
float:right;
text-align:center;
}
.droite-galerie-image img{
width:490px;
height:400px;
background:#D5F4FF;
padding:5px;
}
.miniature-galerie-image{
list-style-type:none;
padding:0;
}
.miniature-galerie-image li{
display:inline;
}
.miniature-galerie-image li img{
width:80px;
height:80px;
background:#EEE;
padding:5px;
margin:2px;
}
.miniature-galerie-image li img:hover{
background:#D5F4FF;
}
.pagination {
line-height:2em;
text-align:center;
padding : 5px;
}
.pagination a{
color:black;
background:#D5F4FF;
text-decoration:none;
margin:1px;
padding:5px;
}
.pagination span.disabled{
border:1px solid #EEE;
background : #EEE;
margin:1px;
padding:5px;
}
.pagination span.nolien{
border:1px solid #EEE;
background : #EEE;
margin:1px;
padding:5px;
color : white;
}

Code Javascript :

Code:

<script type="text/javascript">
<!--
var ChangeImage = function ChangeImage(Url)
{
    document.getElementById('affiche-image').innerHTML = '<img src="'+Url+'" />';
}
-->
</script>

Code de redirection :

Code:

<?php
if (isset($_GET["page"]) && !is_numeric($_GET['page'])){
    header("Status : 301 Moved Permanently");
    header('location:galerie.php');
}
if (isset($_GET["page"]) && $_GET['page'] == 1){
    header("Status : 301 Moved Permanently");
    header('location:galerie.php');
}
?>

Note : il faut changer le nom de la page dans les redirections en fonction du nom de votre propre page ou se trouve la galerie.

Vous avez 3 variables à modifier :

$nombre_image_a_afficher : le nombre d'image à afficher par page.
$adresse_miniature : url menant au dossier miniature.
$adresse_normal : url menant au dossier des photos plus grandes.

Dans l'exemple en ligne, mon fichier se nome "galerie.php" et se trouve à la racine de mon site.
Mon répertoire contenant les miniature se situe dans : "galerie-images/mini/".
Mon répertoire contenant les images de grandes tailles se situe dans : "galerie-images/normal/".
J'affiche 2 images par page.

Note bis : Je rappel que les images miniatures et de taille normal doivent impérativement porter le même nom et la même extension.

Le fichier dans son ensemble :

Code:

<?php
if (isset($_GET["page"]) && !is_numeric($_GET['page'])){
    header("Status : 301 Moved Permanently");
    header('location:galerie.php');
}
if (isset($_GET["page"]) && $_GET['page'] == 1){
    header("Status : 301 Moved Permanently");
    header('location:galerie.php');
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr-fr">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<meta http-equiv="Content-Language" content="fr" />
<style>
.conteneur-galerie-image{
margin:0 auto;
border:5px solid #EEE;
width:670px;
height:auto;
overflow:auto;
padding:5px;
}
.gauche-galerie-image{
width:100px;
height:auto;
float:left;
}
.droite-galerie-image{
width:550px;
height:auto;
float:right;
    text-align:center;
}
.droite-galerie-image img{
width:490px;
height:400px;
background:#D5F4FF;
padding:5px;
}
.miniature-galerie-image{
    list-style-type:none;
padding:0;
}
.miniature-galerie-image li{
display:inline;
}
.miniature-galerie-image li img{
width:80px;
height:80px;
background:#EEE;
padding:5px;
margin:2px;
}
.miniature-galerie-image li img:hover{
background:#D5F4FF;
}
.pagination {
    line-height:2em;
    text-align:center;
    padding : 5px;
}
.pagination a{
color:black;
background:#D5F4FF;
text-decoration:none;
margin:1px;
padding:5px;
}
.pagination span.disabled{
border:1px solid #EEE;
background : #EEE;
margin:1px;
padding:5px;
}

.pagination span.nolien{
border:1px solid #EEE;
background : #EEE;
margin:1px;
padding:5px;
color : white;
}
</style>
<script type="text/javascript">
<!--
var ChangeImage = function ChangeImage(Url)
{
    document.getElementById('affiche-image').innerHTML = '<img src="'+Url+'" />';
}
-->
</script>
</head>

<body>
<h1>Simple galerie photo avec pagination</h1>
<div class="conteneur-galerie-image">
<?php
//ici le nombre d'image à afficher par page
$nombre_image_a_afficher = 2;
//ici l'emplacement du dossier à scanner
$adresse_miniature = "galerie-images/mini/";
//ici l'emplacement du dossier contenant les images de grandes tailles
$adresse_normal = "galerie-images/normal/";
$moinsun=$nombre_image_a_afficher-1;
$url_page = $_SERVER['PHP_SELF'];
//Numérotation de la page
if(empty($_GET['page'])){
    $num_page = 1;
}
else{
    $num_page = (is_numeric($_GET['page'])?$_GET['page']:1);
}
//Ouverture du répertoire
$ouverture = opendir($adresse_miniature);
$compteur = 0;
//début de la numérotation
$debut = ($num_page - 1) * $nombre_image_a_afficher;
//Fin de la numérotation
$fin = $debut + $moinsun;
echo '<ul class="miniature-galerie-image">';
//Boucle sur le répertoire
while (($Fichier = readdir($ouverture)) !== false) {
    if($Fichier != '.' && $Fichier != '..' && $Fichier != $url_page) {
        if ($compteur >= $debut && $compteur <= $fin) {
            if($compteur==$debut){
                echo '<div class="droite-galerie-image"><div id="affiche-image"><img src="'.$adresse_normal.$Fichier.'" alt="'.$Fichier.'"/></div></div>';
            }
            echo '<li><img alt="'.$Fichier.'" src="'.$adresse_miniature.$Fichier.'" onmouseover="ChangeImage(\''.$adresse_normal.$Fichier.'\');"/></li>';
        }
        $compteur++;
    }
}
closedir($ouverture);
echo '</ul></div><div class="pagination">';
echo ($num_page > 1?'<a title="Page '.($num_page - 1).'" href="'.$url_page.'?page='.($num_page - 1).'">« Page précédente</a>  ':'<span class="disabled">Page précédente</span> ');
$total = floor($compteur / $nombre_image_a_afficher);
if ($total != $compteur / $nombre_image_a_afficher)
$total++;
for($numerotation = 1;$numerotation <= $total;$numerotation++)
if($numerotation == $num_page){
    echo '<span class="nolien">'.$numerotation.'</span>';
}
else{
    echo '<a title="Page '.$numerotation.'" href="'.$url_page.'?page='.$numerotation.'">'.$numerotation.'</a>';
}
echo ($nombre_image_a_afficher * $num_page < $compteur?'  <a title="Page '.($num_page+1).'" href="'.$url_page.'?page='.($num_page+1).'">Page suivante »</a>':' <span class="disabled">Page suivante</span>');
echo '</div>';
?>

</body>
</html>
Créer un site internet gratuitement.

Hors ligne

 

#5 Re probleme de pagination de ma galerie du 17-01-2012 15:34:30

olivierbem
c00lnaute nouveau
Date d'inscription: 16-01-2012
Messages: 3

Re: probleme de pagination de ma galerie

Merci beaucoup COOlman,
J'ai testé ta solution et ça marche, tu m'as sorti d'un stress.
Je pense que je ferai de ce forum mon forum préféré.
Merci beaucoup et bonne continuation

Dernière modification par olivierbem (17-01-2012 15:34:55)

Hors ligne

 

#6 Re probleme de pagination de ma galerie du 17-01-2012 19:27:12

c00lman
Administrateur
Date d'inscription: 16-08-2007
Messages: 1631
Site web

Re: probleme de pagination de ma galerie

De rien :).

Tu peux me montrer ce que ça donne comme résultat (forum ou en MP) car j'ai peut être une autre solution à te proposer?

Créer un site internet gratuitement.

Hors ligne

 

#7 Re probleme de pagination de ma galerie du 21-01-2012 16:33:35

fleur69
c00lnaute occasionnel
Date d'inscription: 24-09-2011
Messages: 59
Site web

Re: probleme de pagination de ma galerie

rhoo bah ça c'est gentil ça va grandement m'aider moi aussi :D

petite débutante obstinée...

Hors ligne

 

#8 Re probleme de pagination de ma galerie du 21-01-2012 18:38:57

c00lman
Administrateur
Date d'inscription: 16-08-2007
Messages: 1631
Site web

Re: probleme de pagination de ma galerie

Et bien tant mieux icon_mrgreen . Ceci dit, j'ai un peut mieux niveau pagination...

Créer un site internet gratuitement.

Hors ligne

 

#9 Re probleme de pagination de ma galerie du 22-01-2012 12:05:31

fleur69
c00lnaute occasionnel
Date d'inscription: 24-09-2011
Messages: 59
Site web

Re: probleme de pagination de ma galerie

ben pour le moment ça me suffit , c'est simple et ça reste joli.  a part quelques images qui sont déformés mais je pense qu'il suffit de jouer sur les width et height dans la feuille de style.

petite débutante obstinée...

Hors ligne

 

#10 Re probleme de pagination de ma galerie du 22-01-2012 12:56:59

c00lman
Administrateur
Date d'inscription: 16-08-2007
Messages: 1631
Site web

Re: probleme de pagination de ma galerie

Pour éviter les images déformées, il faut qu'elles soient à la bonne dimensions d'entré de jeu. Si les dimensions des miniatures dans la feuille de style sont 80px*80px alors tes images miniatures doivent être de taille 80px*80px ...comme ça, pas de surprise :).

Perso j'utilise Light Image Resizer pour redimensionner mes images.

Créer un site internet gratuitement.

Hors ligne

 

 

Pages: 1

Propulsé par PunBB
© Copyright 2007
Forum créer un site

Partenaires de « créer un site internet »

Création de sites | Annuaire généraliste | Jeux flash | Locations de vacances | Petites annonces gratuites | Site Internet | Forum gratuit