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='http://www.warriordudimanche.net/$image' onclick='window.open(this.href);return false;'><img src='http://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...