Bien, dans ce tutoriel je vais vous montrer comment mettre en place un système de galerie automatique en PHP.
Décidez à mettre en place cette galerie ? OK alors on y va !
Première phase : préparer l'arborescence pour nos fichiers.
Alors l'idéal, selon moi, est de créer un sous répertoire nommé galerie par exempe et d'y placer l'ensemble des fichiers et dossiers concernant la galerie (à savoir l'arborescence ci-dessous + les fichiers), ça vous permettra de garder votre site bien organisé même si vous rajouter d'autres modules par la suite.
Voici donc l'arborescence :
Bon rien de particulier dans les fichiers JS et CSS, comme vous pouvez le voir on utilise la bibliothèque Javascript MooTools ainsi que le script de Smoothbox pour l'affichage des photos dans une lightbox. Rien de particulier à voir dans les fichiers CSS non plus, les styles sont relativement simples et peuvent sans autre être modifié à votre guise
Là où ça devient plus intéressant c'est les fichiers fonctions.php et index.php sur lesquels on va se pencher dans la prochaine étape.
Creusons un peu le code source du fichier fonctions.php. On va donc passer en revue les différentes fonctions qui vont permettre à votre galerie d'être automatique
Liste des fonctions :
Voyons maintenant le code
<?php // Générateur de miniatures function make_thumb($src,$dest,$desired_width) { // Ouverture de l'image $source_image = imagecreatefromjpeg($src); $width = imagesx($source_image); $height = imagesy($source_image); // Trouver la hauteur désiré pour la miniature, en fonction de sa largeur $desired_height = floor($height*($desired_width/$width)); // Créer une nouvelle image (virtuelle) $virtual_image = imagecreatetruecolor($desired_width,$desired_height); // Copie de l'image source à la taille désirée imagecopyresized($virtual_image,$source_image,0,0,0,0,$desired_width,$desired_height,$width,$height); // Créer physiquement l'image dans le répertoire de destination imagejpeg($virtual_image,$dest); } // On récupère les fichiers depuis le répertoire source function get_files($images_dir,$exts = array('jpg')) { $files = array(); if($handle = opendir($images_dir)) { while(false !== ($file = readdir($handle))) { $extension = strtolower(get_file_extension($file)); if($extension && in_array($extension,$exts)) { $files[] = $file; } } closedir($handle); } return $files; } // Récupère l'extension du fichier function get_file_extension($file_name) { return substr(strrchr($file_name,'.'),1); } ?>
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Auto Gallery Plugin</title> <link href="css/auto-gallery.css" type="text/css" rel="stylesheet" /> <link rel="stylesheet" href="css/smoothbox.css" type="text/css" /> <script type="text/javascript" src="js/mootools.js"></script> <script type="text/javascript" src="js/smoothbox.js"></script> </head> <body> <?php include 'fonctions.php'; // Paramètres $images_dir = 'preload-images/'; $thumbs_dir = 'preload-thumbs/'; // Largeur des miniatures $thumbs_width = 200; // Nombres de miniatures par ligne $images_per_row = 6; // Récupération de la liste des images $image_files = get_files($images_dir); // S'il y a au moins 1 image on rentre dans le script if(count($image_files)) { $index = 0; // Traitement des images foreach($image_files as $index=>$file) { $index++; $thumbnail_image = $thumbs_dir.$file; if(!file_exists($thumbnail_image)) { $extension = get_file_extension($thumbnail_image); // Si l'extension est reconnue alors on génère la miniature if($extension) { make_thumb($images_dir.$file.$thumbnail_image.$thumbs_width); } } // Une fois que les miniatures ont été générées la boucle foreach prépare le code html pour chaque image echo '<a href="'.$images_dir.$file.'" class="photo-link smoothbox" rel="gallery"><img src="'.$thumbnail_image.'" /></a>'; echo "\n"; // On place à la fin de chaque ligne un clear pour que tout soit bien aligné if($index % $images_per_row == 0) { echo '<div class="clear"></div>'; echo "\n"; } } echo '<div class="clear"></div>'; } else { // Si aucune image n'a été trouvé echo '<p>Aucune image dans cette galerie.</p>'; } ?> </body> </html>
Et voilà c'est fini ! Vérifiez une dernière fois que vous avez bien respecté l'arborescence du plugin, que vous avez bien entré le code source dans les fichiers index.php et fonctions.php et enfin n'oubliez pas de charger des images dans le répertoire "preload-images".
Une fois que ces trois points sont ok vous pouvez accéder à la page du script, ne vous inquiétez pas si la page met long à se charger c'est parce que le script doit générer une première fois toutes les miniatures et suivant le nombre d'image que vous avez ça peut prendre pas mal de temps donc ce n'est pas impossible que vous deviez recharger la page plusieurs fois avant que toutes les miniatures aient été générées