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;}
        &lt;/style&gt;
        ';
    }

    echo '&lt;div class="galerie"&gt;';
    if ($title){echo'   &lt;h1 class="title"&gt;'.$title.'&lt;/h1&gt;';}

                foreach($liste as $image){  
                    $i=basename($image);
                    if (stripos($i,$thumb_name)===false&amp;&amp;stripos($i,$crop_name)===false&amp;&amp;stripos($i,$prop_name)===false){               
                        echo "&lt;div class='photo'&gt;
                            &lt;a href='http://warriordudimanche.net/$image' onclick='window.open(this.href);return false;'&gt;&lt;img src='http://warriordudimanche.net/".auto_thumb($image,$width,$height,'_THUMB_',$crop)."' /&gt;&lt;/a&gt;";
                            if ($infos==true){
                                echo '&lt;div class="infos"&gt;';
                                echo '&lt;div class="nom"&gt;'.basename($image).'&lt;/div&gt;';
                                $taille=round(filesize($image)/1000,1);

                                echo '&lt;div class="taille"&gt;'.$taille.' Ko&lt;/div&gt;';
                                echo '&lt;/div&gt;';
                            }
                        echo '&lt;/div&gt;';
                    }
                }

    echo '&lt;div style="clear:both"&gt;&lt;/div&gt;&lt;/div&gt;';

}else{echo '&lt;p class="error"&gt;Pas d\'images dans &lt;em&gt;'.$path.'&lt;/em&gt;&lt;/p&gt;';}

}

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...

Quelle est le quatrième caractère du mot jghsf6 ?