Galerie d'image

marrtin
PHP

Hello'w tout le monde !

Voilà depuis quelques heures j'ai essayé avec de nombreuse solution à afficher plusieurs images sur une seule page provenant de diverse destination avec le tuto de Grafikart sur les galeries d'images. J'ai essayé de répéter le code plusieurs fois mais cela créer plusieurs conflits et j'ai aussi modifier le nom des variables mais ça ne fonctionne pas ...
Alors est-ce vraiment possible ?

Je rappelle le code :

<?php
$dos = "portfolio/min";
$dir = opendir($dos);
while($file = readdir($dir)){
    $allow_ext = array("jpg",'png','gif');
    $ext = strtolower(substr($file,-3));
    if(in_array($ext,$allow_ext)){
        ?>
                <a href="portfolio/<?php echo $file; ?>" class="zoombox zgallery1" title="<?php echo $file; ?>">
                <img src="portfolio/min/<?php echo $file; ?>"/>
                </a>
        <?php
    }
}
?>

Merci par avance, ZiOu !

11 réponses

zvetlania
Réponse acceptée

Oui : c'est peut être un peu bourrin mais je vais essayer de te montrer :

$categories = array(
    'animations',
    'concerts',
    'expositions',
    );
// Gestion de la gallerie photo : ajout d'images
    if(!empty ( $_FILES) )
    {
        require("../Galerie_photo/imgClass.php") ;
        $img = $_FILES 'img'] ;
        $ext = strtolower (substr($img'name'],-3)) ;
        $allow_ext = array ("jpg","png","gif") ;
        $nom = substr($img'name'], 0, -4) ;
        $categorie = $_POST'categorie'];
        if (in_array($ext, $allow_ext) )
        {
            unset($sql, $req);
            $sql = 'SELECT * from galerie WHERE nom = "'.$nom.'"';
            $req = mysql_query($sql) or die(mysql_error()) ;
            $resultat = mysql_num_rows($req) ;
            if ($resultat == 0)
            {
                move_uploaded_file($img'tmp_name'],"../Galerie_photo/images/".$categorie."/real_size/" .$img'name']) ;
                // Appel de la classe creerMin (chemin de l'image uploadée, nouveau chemin, nouveau nom, largeur, hauteur )
                Image::creerMin("../Galerie_photo/images/".$categorie."/real_size/" .$img'name'], "../Galerie_photo/images/".$categorie."/min/", $img'name'], 215, 112 );
                Image::convertirJpg("../Galerie_photo/images/".$categorie."/real_size/" .$img'name']);
                unset($sql, $req);
                $sql = "INSERT INTO galerie (categorie,nom) VALUES ('".$categorie."','".$nom."')";
                $req = mysql_query($sql) or die(mysql_error()) ;
            }
            else
            {
                $image_deja_existante = "Image existante";
            }
        }
        else
        {
            $erreur = "Ce fichier n'est pas une image" ;
        }
    }
    ?>

Quand j'insère mon image, j'appelle la classe imgClass ( merci Grafikart :p )
Elle va me créer une miniature de mon image (Image::creerMin)+ une extension qui deviendra .jpg (Image::convertirJpg).
En + de ça, j'insère sa catégorie et son nom dans une Base de données.
En clair j'ai mon chemin "Galerie_photos/images" et dans ce chemin j'ai 3 dossiers ( animation, concerts, expositions ) dans chacun de ces 3 dossiers j'ai 2 sous-dossiers, appelés real_size ( image taille réelle convertie en jpg ) et min ( miniature créée ).

Du coup avec ça, j'upload l'image avec 

<!-- Ajouter une image à ma galerie -->
<legend> Ajouter une image à la galerie </legend>
<br>
    <?php
        if(isset($image_deja_existante))
        {
            echo '<p>'.$image_deja_existante.'</p>' ;
        }
    ?>
    <form method="post" action ="admin.php" enctype="multipart/form-data">
    <input type="file" name="img" value="relouuu"/>
       <?php
    echo '<select name=categorie>';
    for ($i=0; $i<count($categories); $i++)
    {
    $option.= '<option value="'.$categories$i].'">'.$categories$i].'</option>';
    }
    echo $option;
    echo '</select>';
    ?>
    <input type="submit" name="Envoyer"/>
    </form>
 </fieldset>
    </div>
     <!-- ------------------------------------------------------------------------------------------- -->

Pour info, tout le code se trouve dans la page admin.php à ce moment

PhiSyX

Hello, utilise glob( string $pattern , int $flags = 0 ] ) ? :D

Ex:

$dos = glob('{mon/dos/img/,../mon/2em/dps/img/}*{jpg,gif,png,etc..}', GLOB_BRACE);
foreach ($dos as $d) {
    echo '<a href="' . $d . '" class="zoombox zgallery1" title="' . $d . '">';
    echo '<img src="' . $d . '"/>';
}
zvetlania

Salut, je ne pense pas répondre à ton souci, cependant j'ai aussi une galerie zoombox, je la fais fonctionner comme ça : upload d'image + INSERT INTO en même temps dans ma BDD, avec une catégorie choisie avant ( WHERE categorie = mavariable ).
Ensuite pour la voir, je ne fais pas de readdir mais un SELECT * FROM galerie WHERE categorie = animations par exemple,
Mais j'ai en fait une classe reliée à tout ça, qui va chercher le répertoire miniature, lié à la vraie image, si ça t'intéresse je pourrai la poster, j'y ai mis la pagination aussi

marrtin
Auteur

@Physix !
Tu n'utilise plus $dir = opendir($dos); dans ta condition ?

@ zvetlania !
En gros tu insert l'adresse de tes images dans une BDD et tu les récupère ensuite pour les afficher ?

zvetlania

Après, j'ai créé une classe pour appeler ces images dans une galerie : galerieClass.php

<?php
class galerie
{
    public $repertoire = null;
    public $sous_categorie = array() ;
    public $extension = '.jpg';
    public $max_images = null ;
    public $start_images = null;
    public $nbr_images = null;
    public $liste_images = array();
    public function choix_repertoire($repertoire)
    {
        if(!is_dir($repertoire))
        {
            return false;
        }
        $this->repertoire = $repertoire;
        return true;
    }
    public function creer_sous_categories($sous_categorie = array())
    {
        foreach($sous_categorie as $v)
        {
        $this->sous_categorie] = '/'.$v.'/' ;
        }
    }

    public function choix_categorie($nom_categorie)
    {
        mysql_connect("localhost","root","root");
        mysql_select_db("lecercle");
        $sql = 'SELECT nom FROM galerie WHERE categorie = "'.$nom_categorie.'"';
        $req = mysql_query($sql);
        while($resultat = mysql_fetch_array($req, MYSQL_ASSOC))
        {
            $this->liste_images] = $resultat'nom'];
            $this->categorie = $nom_categorie;

        }

    }
    public function get_step( $nombre )
    {
        $this->step = $nombre ;
        return ;
    }

    public function get_start_image($start_images)
    {
        $this->start_images = $start_images ;
        return ;
    }

    public function affiche_liste_img ()
    {

        $step = $this->start_images + $this->step ;
        $count = count( $this->liste_images );
        if( $step > $count )
        {
            $step = $count;
        }
        $code_HTML = null ;
        $code_HTML .='<div id=cadre>';
        for( $i=$this->start_images ; $i < $step ; $i++ )
        {
            $code_HTML .= '<div id=min>';
            $code_HTML .= '<a class=min href="'.$this->repertoire.$this->sous_categorie[0].$this->liste_images$i].$this->extension.'" rel="zoombox[galerie]">';
            $code_HTML .= '<img src="'.$this->repertoire.$this->sous_categorie[1].$this->liste_images$i].$this->extension.'" />';
            $code_HTML .= '</a>';
            $code_HTML .= '</div>';
        }
        $code_HTML .='</div>';
        return $code_HTML ;
    }
    public function affiche_suppression_img()
    {
        $step = $this->start_images + $this->step ;
        $count = count( $this->liste_images );
        if( $step > $count )
        {
            $step = $count;
        }
        $code_HTML = null ;

        for( $i=$this->start_images ; $i < $step ; $i++ )
        {

           $code_HTML.= '<img src="'.$this->repertoire.$this->sous_categorie[1].$this->liste_images$i].$this->extension.'">';
            $code_HTML .= '<input type="checkbox" name="options]" value="'.$this->liste_images$i].'">';

        }
        define ('chepa', 1);
        $code_HTML .='<input type="submit" value="Valider">';
        return $code_HTML ;
    }
        public function affiche_bouton_step()
        {
            $result = count($this->liste_images) / $this->step;
            $result = ceil($result) ;
              $j = 0 ;
              $code_HTML = null;
              $code_HTML .= '<div id=pages>';
            for($i=0; $i<$result; $i++)
            {
                $page = $i+1;
                $code_HTML .= '<a class=bouton href=./galerie.php?page='.$this->categorie.'&s='.$j.'>'.$page.'</a>';
                $j = $j+$this->step;

            }

            unset($j) ;
            $code_HTML .= '</div>';
            return $code_HTML ;

        }
            public function affiche_bouton_prec()
            {
                $code_HTML=null;
                if($this->start_images !=0)
                {
                $code_prec = $this->start_images-$this->step;

                $code_HTML .= '<a class=bouton_navigation href=./galerie.php?page='.$this->categorie.'&s=0><<</a>';
                $code_HTML .= '<a class=bouton_navigation href=./galerie.php?page='.$this->categorie.'&s='.$code_prec.'><</a>';
                }

                return $code_HTML ;

            }
            public function affiche_bouton_suiv()
            {
                $code_suiv = $this->start_images+$this->step;
                $last_step = count($this->liste_images)-$this->step;
                if($code_suiv>=count($this->liste_images))
                {
                    $code_suiv = $last_step;
                }

                $code_HTML=null;
                if($this->start_images <$last_step)
                {
                $code_HTML .= '<a class=bouton_navigation href=./galerie.php?page='.$this->categorie.'&s='.$code_suiv.'>></a>';
                $code_HTML .= '<a class=bouton_navigation href=./galerie.php?page='.$this->categorie.'&s='.$last_step.'>>></a>';
                }
                 return $code_HTML ;

            }

}
?>

Je sais c'est bourrin, mais le code n'est pas si compliqué à capter si tu regarde bien

zvetlania

Et enfin, pour appeler mes images dans ma page où elles seront affichées : ma page galerie.php

<?php
// ---------------------------------------------------------------------------------------
require_once('./galerieClass.php');
if(!isset($_GET's']))
{
    $_GET's'] = 0;
}
if(!isset($_GET'm']))
{
    $_GET'm'] = 12;
}
$sous_categorie = array('real_size', 'min') ;
$repertoire = './images/'.$_GET'page'];
// ---------------------------------------------------------------------------------------
$galerie = new galerie ;
$galerie->choix_repertoire($repertoire) ;
$galerie->creer_sous_categories($sous_categorie) ;
$galerie->choix_categorie($_GET'page']]) ;
$galerie->get_start_image($_GET's']) ;
$galerie->get_step($_GET'm']) ;
$code_galerie = $galerie->affiche_liste_img() ;
$code_step = $galerie->affiche_bouton_step() ;
$code_prec = $galerie->affiche_bouton_prec();
$code_suiv = $galerie->affiche_bouton_suiv();
$categories = array(
'animations',
'concerts',
'expositions',
);
$result = count($categories);
for($i=0; $i<$result; $i++)
{
   if ($_GET'page'] == $categories$i])
   {
        $cat .= '<h17><a class=bouton_cat_2 href=galerie.php?page='.$categories$i]'>'.$categories$i].'</a></h17>';
   }
   else
   {
        $cat .= '<h17><a class=bouton_cat href=galerie.php?page='.$categories$i]'>'.$categories$i].'</a></h17>';
   }
}

// print_r ($galerie);
// ---------------------------------------------------------------------------------------
$code_page = <<< EOPAGE
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="./zoombox/jquery.js"></script>
    <script type="text/javascript" src="./zoombox/zoombox.js"></script>
    <link rel="stylesheet" type="text/css" href="./style_galerie.css" />
    <link href='http://fonts.googleapis.com/css?family=Nobile' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Allan:bold' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" media="screen" href="./zoombox/zoombox.css" />
    <link rel="stylesheet" type="text/css" href="./style_galerie.css" />
<title> Galerie Photos </title>
</head>
<body>
    <div id=dessus>
    <a class=bouton_accueil href=../index.php>Retour Accueil</a>
    {$code_prec}
    {$code_step}
    {$code_suiv}
    </div>
    {$cat}
<div id=cadre_galerie>
    {$code_galerie}     
</div>
</body>
</html>
EOPAGE;
echo $code_page ;
// ---------------------------------------------------------------------------------------
?>

Pour le système eopage, je ne sais pas si tu connais mais c'est bien sympa !

marrtin
Auteur

Ok excellent !
Puis-je vois ta galerie par la même occasion ?

zvetlania

Enfin, 2-3 explications :
$_GET'm'] = 12; ça veut dire 12 images par page, tu change à tes souhaits.
$_GET's'] = 0; ça veut dire commence à l'image zéro ( la 1ère, j'ai appelé ça step, par exemple la page 2 marquera s=12... )

zvetlania

Et voici la page créée par grafikart : imgClass

<?php
class Image{
    static function creerMin($img,$chemin,$nom,$mlargeur=100,$mhauteur=100)
    {
        // On supprime l'extension du nom
        $nom = substr($nom,0,-4);
        // On récupère les dimensions de l'image
        $dimension=getimagesize($img);

        // On crée une image à partir du fichier récup
        if(substr(strtolower($img),-4)==".jpg")
        {
            $image = imagecreatefromjpeg($img);
        }
        else if(substr(strtolower($img),-4)==".png")
        {
            $image = imagecreatefrompng($img);
        }
        else if(substr(strtolower($img),-4)==".gif")
        {
            $image = imagecreatefromgif($img) ;
            }
        // L'image ne peut etre redimensionnée
        else
        {
            return false ;
        }
        // Création des miniatures
        // On crée une image vide de la largeur et hauteur voulue
        $miniature =imagecreatetruecolor ($mlargeur,$mhauteur);

        // On va gérer la position et le redimensionnement de la grande image
        if($dimension[0]>($mlargeur/$mhauteur)*$dimension[1] )
        {
            $dimY=$mhauteur; $dimX=$mhauteur*$dimension[0]/$dimension[1]; $decalX=-($dimX-$mlargeur)/2; $decalY=0;
        }

        if($dimension[0]<($mlargeur/$mhauteur)*$dimension[1])
        {
            $dimX=$mlargeur; $dimY=$mlargeur*$dimension[1]/$dimension[0]; $decalY=-($dimY-$mhauteur)/2; $decalX=0;
        }

        if($dimension[0]==($mlargeur/$mhauteur)*$dimension[1])
        {
            $dimX=$mlargeur; $dimY=$mhauteur; $decalX=0; $decalY=0;
        }
        // on modifie l'image créée en y plaçant la grande image redimensionnée et décalée
        imagecopyresampled($miniature,$image,$decalX,$decalY,0,0,$dimX,$dimY,$dimension[0],$dimension[1]);
        // On sauvegarde le tout
        imagejpeg($miniature,$chemin."/".$nom.".jpg",90);
        return true;
    }

    static function convertirJPG ($img)
    {
        // On crée une image à partir du fichier récup
        if(substr(strtolower($img),-4)==".jpg")
        {$image = imagecreatefromjpeg($img);}

        else if(substr(strtolower($img),-4)==".png")
        {$image = imagecreatefrompng($img);}

        else if(substr(strtolower($img),-4)==".gif")
        {$image = imagecreatefromgif($img) ;}
        // L'image ne peut etre redimensionnée
        else    {return false ;}

        unlink ($img) ;
        imagejpeg($image,substr($img,0,-3)."jpg",90);
        return true ; 
    }
}
?>
zvetlania

Désolé d'avoir floodé la page, mais tu as toutes les infos, recopie ces pages : admin.php, les 2 class et galerie.php, je te donne mon css pour que tu aies un résultat rapide

body
{
    background-image: url(../images/archives/pastel_sombre.png) ;
    text-align: center;
}
div#cadre
{
    width: 1000px;
}
div#dessus
{
    width: 1000px;
    margin: auto;
    height: 100px;
    background-image: url(../images/bandeau_haut_1000.jpg);
}
div#cadre_galerie
{
    margin: auto;
    border-bottom: 1px solid black;
    width: 1000px;
    height: 700px;
    background-image: url(../images/fond_galerie.jpg);
}
div#footer
{
    width: 1000px;
    height: 30px;
    background-color: red;
}
div#min
{
    margin-left: 51px;
        border: none;

}
.min
{
    margin: auto;
    height: 112px;
    width: 300px;
    float:left;
    margin-top: 20px;

}
a.min
{
   background-image: url(../images/fond_min.png);
}
.ajout_image
{
    width: 600px;
    border: 1px solid black;
}
div#pages
{
    float: left;
    height: 100px;

}
div#mini_cadre
{
    border: 10px solid black;
    float: right;
    width: 200px;
}
a.bouton
{

    color: black;
    height: 30px;
    width: 50px;
    text-decoration: none;
    margin-top: 40px;
    margin-left: 20px;
    line-height: 30px;
    font-family: arial;
    font-size: 15px;
     background-image: url(../images/bouton_nav_1.png);
    display: block;
    float: left;

}
a:hover.bouton
{
    color: #660000;
    background-image: url(../images/bouton_nav_2.png);
}
a.bouton_accueil
{
    float: left;
    margin-top: 40px;
    height: 30px;
    width: 150px;
    margin-left: 150px;
    text-decoration: none;
    font-family: 'OFL Sorts Mill Goudy TT', arial, serif;
    font-size: 18px;
    color: black;
    line-height: 30px;
     background-image: url(../images/bouton_accueil_1.png);

}
a:hover.bouton_accueil
{
        background-image: url(../images/bouton_accueil_2.png);

}
a.bouton_navigation
{
    color: black;
    height: 30px;
    width: 50px;
    text-decoration: none;
    margin-top: 40px;
    margin-left: 20px;
    line-height: 30px;
    font-size: 15px;
     background-image: url(../images/bouton_nav_1.png);
    display: block;
    float: left;

}
a:hover.bouton_navigation
{
    color: #660000;
    background-image: url(../images/bouton_nav_2.png);
}
a.bouton_cat
{
    float: left;
    margin-top: 20px;
    height: 30px;
    width: 150px;
    margin-left: 180px;
    text-decoration: none;
    font-family: 'OFL Sorts Mill Goudy TT', arial, serif;
    font-size: 18px;
    color: black;
    line-height: 30px;
     background-image: url(../images/bouton_accueil_1.png);

}
a:hover.bouton_cat
{
        background-image: url(../images/bouton_accueil_2.png);

}
a.bouton_cat_2
{
    float: left;
    margin-top: 20px;
    height: 30px;
    width: 150px;
    margin-left: 180px;
    text-decoration: none;
    font-family: 'OFL Sorts Mill Goudy TT', arial, serif;
    font-size: 18px;
    color: black;
    line-height: 30px;
     background-image: url(../images/bouton_accueil_2.png);

}

Evidemment tu n'as pas les images, mais déjà les dimensions qui te permettent d'être en accord avec 12 images / page :p met des background-color à la place, crée les dossiers et sous dossiers et test l'upload d'images, tu verras de suite ce que ça donne, si tu as un souci dis le moi !

marrtin
Auteur

Ok je te remercie beaucoup ! Après je ne vais pas tout copier bêtement, je vais essayer de regarder et de comprendre ton code.

Est-ce que je peux voir ta galerie, et si j'ai un soucis à tu un moyen de contact autre que les questions de Grafikart ^^ ?