Génération automatique d’une galerie photo à partir d’un répertoire d’images

Écrit par aDy. Posté dans Flash, PHP

Vous avez besoin de présenter rapidement une galerie photo, sans base de données ou besoins trop spécifiques ?

Je vous propose deux scripts sympathiques qui ont retenu mon attention :

Auto-Generating Photo Gallery
Auto-Generating Photo Gallery

Auto-Generating Photo Gallery

Ce script PHP génère une galerie de vos photos avec un effet FancyBox.

DEMO EN LIGNE

Il vous faut par contre créer les miniatures en ajoutant un suffixe, exemple : Image: 023.jpg et Miniature: 023-thumb.jpg, à placer dans le même dossier que les images originales.

TELECHARGER

ou bien (si le site officiel est down)

TELECHARGER

SimpleViewer
SimpleViewer

SimpleViewer

Ce script vous propose différents rendus Flash assez agréables et possède pas mal d’atouts :

  • Chargement intelligent des images
  • Navigation intuitive des images
  • Léger (17 ko)
  • Interface customisable (autant le cosmétique que le redimensionnement par rapport au navigateur)
  • Compatible Windows, Mac, Linux et tous navigateurs qui possède au minimum FLash8
  • Contrôle la version du plugin installé chez l’internaute et propose de mettre à jour si besoin
  • Gestion internationale des polices
  • Navigation au clavier (Flèches directionnelles, Début/Fin, Page Up/Down)
  • Navigation à la molette de la souris
  • Possibilité de faire clic droit sur une image pour l’ouvrir dans une nouvelle page et ainsi la sauvegarder sur son PC
  • Gratuit

Démos en ligne du script et site officiel :

TELECHARGER

ou bien (si le site officiel est down)

TELECHARGER

Conclusion :

Il ne va pas sans dire que ces solutions ne sont pas entièrement automatisées, mais avec un peu de jugeotte et de connaissances PHP, il est facilement possible d’automatiser le tout (gestion miniatures pour le premier script, edition dynamique du XML pour le second script, etc…)

Exemple 1 : Pour notre premier script Auto-Generating Photo Gallery, Andy (merci à lui) propose ce petit script pour la gestion des miniatures que voici :

On définis les 3 fonctions :

function createThumb_square($source,$dest) {
$thumb_size = 100;
$size = getimagesize($source);
$width = $size[0];
$height = $size[1];
 
if($width> $height) {
$x = ceil(($width - $height) / 2 );
$width = $height;
} elseif($height> $width) {
$y = ceil(($height - $width) / 2);
$height = $width;
}
 
$new_im = ImageCreatetruecolor($thumb_size,$thumb_size);
$im = imagecreatefromjpeg($source);
imagecopyresampled($new_im,$im,0,0,$x,$y,$thumb_size,$thumb_size,$width,$height);
imagejpeg($new_im,$dest,100);
}
 
function createThumbName($file,$pic_format,$thumb_mask)
{
 
$pic_name_length = strlen($file);
 
$pic_name_length = $pic_name_length - strlen($pic_format);
 
$pic_name = substr($file, 0, $pic_name_length);
 
$pic_name_thumb = $pic_name.$thumb_mask.$pic_format;
return $pic_name_thumb;
}
 
function fileExists($dir, $file)
{
if ($handle = opendir($dir)) {
 
while (false !== ($file_name = readdir($handle))) {
if($file_name == $file){
return true;
}
}
return false;
}
}

Puis on rajoute dans notre script index.php :

/* step one: read directory, make array of files */
if ($handle = opendir($image_dir)) {
while (false !== ($file = readdir($handle)))
{
if ($file != ‘.’ && $file != ‘..’)
{
$file_thumb = createThumbName($file,$pic_format,$thumb_mask);
if(strstr($file,’-thumb’))
{
$files[] = $file;
}elseif (!fileExists($image_dir,$file_thumb))
{
echo ‘reingelaufen’;
// echo ‘neuer Thumbname ist:’.” “.$file_thumb;
createThumb_square($image_dir.$file,$image_dir.$file_thumb);
}
 
}
}
closedir($handle);
}

Exemple 2 : AlivePixel qui ont crée un chouette dossier spécifique à SimpleViewer, vous expliquent comment automatiser les tâches suivantes : génération automatique des miniatures et des commentaires photo, ainsi que l’édition dynamique du XML (tout bonnement remplacé par un script PHP qui le génère à la volée)

Enfin, si le coeur vous en dis et pour être automatisé à 100%, rien ne vous empêche de créer un module de gestion d’upload pour envoyer vos images en masse, il existe un script vraiment sympa dans le genre : FancyUpload

Enjoy ! 😉

Mots-clefs : , , , , , , , ,

Rétrolien depuis votre site.

Commentaires (4)

  • cainenberg

    |

    Exactement ce que je cherchais, merci bien ^^

    Répondre

  • Patrick

    |

    Le lien de démo ne marche pas, il amène vers une page en 404 !
    En tout cas le script à l’air d’être assez bien fait, je vais l’essayer, ça peut être bien pour partager des photos de vacances facilement.

    Répondre

  • Adrien

    |

    Merci Patrick, je met à jour le lien démo dès ce soir 😉

    Répondre

  • Matthieu

    |

    Bonjour,

    merci pour ce script sympa 🙂 Petit déterrage, mais ça peut servir à d’autres…

    Comme Andy, j’apporte ma petite contribution pour Auto-Generating Photo Gallery. Exécuté tel quel, ce script marche, mais contient quelques erreurs que j’ai corrigées.

    1) dans la function createThumb_square($source,$dest) il faut rajouter ces 2 lignes juste en dessous de $height = $size[1]; pour initialiser les variables :

    $x = 0;
    $y = 0;

    2) juste avant la ligne /* step one: read directory, make array of files */ c’est mieux d’initialiser aussi le tableau en rajoutant :

    $files = array();

    3) pour la génération des vignettes à la volée, c’est pas clair.
    Au lieu de la ligne :
    $file_thumb = createThumbName($file,$pic_format,$thumb_mask);

    préférer la ligne :
    $file_thumb = createThumbName($file,’.jpg’,’-thumb’);

    (sinon il me dit que $pic_format n’est pas initialisée, et idem pour $thumb_mask. Ou sinon, initialiser les variables avec les valeurs correspondantes).

    4) juste avant foreach($files as $file) il faut aussi déclarer la variable :

    $count = 0;

    Là, entre le script initial + la modif d’andy ça fonctionne correctement sans Warning. Et les vignettes sont bien générées si non existantes (merci Andy ;-))

    J’ai rajouté 2 éléments :

    a) un passage en HTML5. Très simple compte tenu de la simplicité du code.
    b) des légendes aux photos.

    Pour passer en HTML5, remplacer les 4 premières lignes :

    par leur équivalent HTML5 :

    C’est tout ! (le reste du code est ultra simple et valide HTML5).

    Pour les légendes, j’ai créé un fichier PHP annexe qui contient juste un tableau avec [nomFichier] => titre légende et ai reporté ça dans l’index.php.

    Juste avant la ligne /* step two: loop through, format gallery */ j’ai rajouté :

    // define array legends
    require(‘array_legends.php’);

    asort($files);

    pour trier alphabétiquement les photos (sinon, il faut retirer asort(files)) et pour déclarer le tableau des légendes donné plus loin).

    Et dans le foreach, juste avant le $count++ j’ai rajouté :

    $test_legend = str_replace(‘.jpg’,’.JPG’,$file); // because my extensions are uppercase for normal pictures
    $test_legend = str_replace(‘-thumb’, »,$test_legend);
    $title = (array_key_exists($test_legend, $array_legends)) ? ‘ title= »‘.$array_legends[$test_legend].' »‘ :  »;

    et juste en dessous dans la ligne qui crée la balise a + img, j’ai remplacé (ajouté mon $title plus exactement) :

    str_replace(‘-thumb’, »,$file),' »><img src=

    C'est tout pour l'index.

    Pour les légendes, j'ai donc créé le fichier array_legends.php dans le même dossier que l'index.php, avec ce contenu ci :

    Autant de lignes qu’il y a de photos, attention à la casse majuscule/minuscule.

    Merci et à+ !

    Répondre

Laisser un commentaire