auto_galerie: insérer une galerie d'images en une ligne !
Et PAF ! \o/ le logo qui pique dans les yeux !
Mouhouhaha !
Plus sérieusement, sur la base de la fonction auto_thumb de la semaine dernière j'ai bricolé une routine qui génère une galerie d'image à partir du chemin de dossier contenant lesdites images.
C'est simple et ça fonctionne... si quelqu'un en veut, c'est posé là dessous 
function auto_galerie($path=null,$title=null,$width=100,$height=100,$crop=false,$infos=false,$style=false){
if (!$path){return false;}
$liste=array_merge(glob($path.'/*.png'),glob($path.'/*.gif'),glob($path.'/*.jpg'),glob($path.'/*.jpeg'));
$thumb_name='_THUMB_';$crop_name='_CROPPED_';$prop_name='_PROPORTION_';
if (!empty($liste)){
if ($style){
echo '<style>
div.galerie{margin:auto;width:600px;text-align:center;}
div.photo{width:'.$width.'px;height:'.$height.'px;margin:5px;padding:5px;display:inline-block;vertical-align:top;border-radius:3px;}
div.photo:hover{background:#79c;}
div.galerie h1.title{}
div.photo img{opacity:0.6}
div.photo:hover img{opacity:1}
div.photo .infos{display:none;cursor:default;}
div.photo:hover .infos{display:block;position: relative;top: -100%;background-color:rgba(0,0,0,0.5); color:#eee;text-shadow:0 1px 1px #999}
div.photo:hover{transform:scale(1.2,1.2);-webkit-transform:scale(1.2,1.2);-moz-transform:scale(1.2,1.2),-o-transform:scale(1.2,1.2); }
div,div:hover{transition: all 300ms;}
</style>
';
}
echo '<div class="galerie">';
if ($title){echo' <h1 class="title">'.$title.'</h1>';}
foreach($liste as $image){
$i=basename($image);
if (stripos($i,$thumb_name)===false&&stripos($i,$crop_name)===false&&stripos($i,$prop_name)===false){
echo "<div class='photo'>
<a href='https://www.warriordudimanche.net/$image' onclick='window.open(this.href);return false;'><img src='https://www.warriordudimanche.net/".auto_thumb($image,$width,$height,'_THUMB_',$crop)."' /></a>";
if ($infos==true){
echo '<div class="infos">';
echo '<div class="nom">'.basename($image).'</div>';
$taille=round(filesize($image)/1000,1);
echo '<div class="taille">'.$taille.' Ko</div>';
echo '</div>';
}
echo '</div>';
}
}
echo '<div style="clear:both"></div></div>';
}else{echo '<p class="error">Pas d\'images dans <em>'.$path.'</em></p>';}
}
Cette fonction peut se contenter du seul chemin:
auto_galerie("images");
Mais peut prendre les paramètres suivants (dans l'ordre):
- $title: le titre de la galerie
- $width: la largeur des miniatures
- $height: la hauteur des miniatures
- $crop: recadrage des images ou pas (non recadrées par défaut)
- $infos: affichage des infos (nom et taille de l'image, non affichés par défaut)
- $style: style css de base (off par défaut)
Si vous voulez utiliser vos propres css, les ciblages sont enfantins:
- div.galerie
- div.photo
- div.infos_photo
- div.nom_photo
- div.taille_photo
Comme d'habitude, voici la page de démo (la même que celle d'auto_thumb mais avec l'utilisation d'auto_galerie en plus)
J'ai aussi refait un zip contenant tout le nécessaire, les fonctions étant regroupées dans le nouvel auto_thumbs.php...
Allez, à la semaine prochaine avec un plugin pluxml qui utilise tout ça 

✍ Écrire un commentaire
les commentaires relevant du SPAM seront filtrés et dégagés direct...