Nous allons créer un galerie d’image pour appliquer ce que nous avons vue précédemment.
Dans un premier temps nous créons la page en statique, ainsi que la mise en page. Créons également le dossier images, pour les vignettes et les images.
Ce qui nous donne:
Après nous remanions le tous, quelques dossiers renommés, déplacé, etc.
Le dossier cache nous sert pour les vignettes.
Nous partons du fichier animaux.html que nous coupons en plusieurs fichers que nous plaçons dans inclusion.
Le main du site devient galerie.php.
Nous faisons plutôt deux fichiers css:
Le dexième css:
Qui est associer avec le javascript pour former une bordure autour du bloc afficheur.
L’entête du site: entete.php
La navigation principale: navigation.php
Nous plaçons du php pour lire tous les fichiers se trouvant dans galeries, sans les fichiers courants et parents, symbolisés ici par (!=’.’ et !=’..’) ensuite nous donnons l’ordre d’écrire ces fichiers qui remplacent le menu initial.
Le main: galerie.php
Le titre de la galerie apparaîtra avec son nom respectif. Et les fichiers lu grace au php seront bien des images (celles qui s’afficheront). Pour l’instant les vignettes sont remplacées par le nom de ce fichier (chaque image).
Nous plaçons du php “include” pour inclure l’entête, la navigation, en haut du main et un en bas de page pour le pied de page.
Le pied de page: pied.php
Le lien, pour le fichier javascript, et un script qui font fonctionner la galerie d’images.
Le code javascript:
Au clic sur le menu, le titre de la galerie s’affiche (ici paysages) et au clic sur les fichiers, apparaît l’image choisie.
Pour aller plus loin il nous faut voir les fonction dans php…..(ce référer à l’article Fonction php ).
Intégrer les fonctions:
Nous créons les fonctions que nous plaçons dans le dossier inclusions sous l’intitulé “lib-images.inc”.
Nous créons aussi un fichier “reducteur-image.php”, et un autre “recadreur-image.php” pour exécuter les actions.
Et c’est dans galerie.php que nous plaçons le lien (en quelque sorte l’url) , ici, du réducteur et du recadreur, pour afficher l’image exécutée.
Les fonctions:
<?php
function transformeLargeurImage( $image, $largeur ) {
return imagescale( $image, $largeur, -1, IMG_BICUBIC );
}
function transformeEchelleImage( $image, $coef) {
// Votre code ici utilsant la fonction imagesx()
$largeur = imagesx( $image )*$coef;
return imagescale( $image, $largeur, -1, IMG_BICUBIC );
}
function transformeHauteurImage( $image, $hauteurFinale) {
return imagescale(
$image,
imagesx($image) * $hauteurFinale / imagesy($image),
$hauteurFinale,
IMG_BICUBIC ) ;
}
function recadreImageAuCentre( $image, $largeur, $hauteur) {
$x = ( imagesx($image) – $largeur ) / 2 ;
$y = ( imagesy($image) – $hauteur ) / 2 ;
return imagecrop($image, [‘x’=>$x,’y’=>$y,’width’=>$largeur,’height’=>$hauteur]);
}
// Réduit ou agrandit à la taille maximum permettant à la totalité de l’image de se placer dans le rectangle de $largeurMaximum par $hauteurMaximum
function reduitFormatMaximum( $image, $largeurMaximum, $hauteurMaximum) {
$coef = min( $largeurMaximum/imagesx($image),$hauteurMaximum/imagesy($image) );
return transformeEchelleImage( $image, $coef) ;
}
// Réduit ou agrandit à la taille minimum permettant de remplir tout le rectangle
de $largeurMinimum par $hauteurMinimum
function reduitFormatMinimum( $image, $largeurMinimum, $hauteurMinimum) {
$coef = max( $largeurMinimum/imagesx($image),$hauteurMinimum/imagesy($image) );
return transformeEchelleImage( $image, $coef) ;
}
// recadre au centre selon le rectangle de $largeur par $hauteur en minimisant les zones rognées
function recadreAuMaximum($image,$largeur,$hauteur) {
$image = reduitFormatMinimum($image, $largeur, $hauteur);
$image = recadreImageAuCentre($image, $largeur, $hauteur);
return $image;
}
Intégration dans galerie.php:
Les lignes 21 et 22 intègrent les vignettes à la place d’ // .entree. qui lui était utile, quand on n’avait commencé que par le “reducteur-image”
Par la suite nous numérotons les images.
Nous plaçons un compteur, que nous acrémentons dans la boucle et aussi une balise <span>.
Puis un peu de css:
Ensuite nous retaillons l’image avec un seul fichier: retailleur-image.php qui remplacera les deux autres(recadreur et reducteur).
Nous plaçons le chemin retailleur-image (ligne 25 et 29) et plaçons “r=1” entre le “?” et le “&” de la ligne 29.
Nous codons le retailleur .Par la même occasion nous voulons faire de sorte que les images soit en cache, pour sortir plus vite et que celui-ci se vide, quand il dépasse une certaine taille. Il nous faut donc aussi créer un autre fichier lib-cache.inc.
Les fonction qui nous permettent de lire et de vider le dossier cache.
Nous rajoutons la possibilité de retailler et recadrer l’image. Ceci dans galerie.php avec l’action de valider. Nous nous servons des valeurs du retailleur, l, h, et r.
Un peu de cosmétique.
Le css:
Ici le lien de la galerie améliorée à utiliser pour nos site avec images de substitutions, avec possibilité de retailler celles-ci.
http://galerie-v5.gwd-france.com/galerie.php