Mosaique d'images dans une page statique
NaBiSs
Member
Bonjour à tous,
Je viens apporter ma petite pierre à l'édifice en aidant ceux qui recherchent un script créant une mosaïque d'images automatiquement et simplement.
Principe du script :
Le script vient chercher les images d'un dossier, crée les miniatures à la volée qu'il vient stocker dans un répertoire cache, puis affiche les miniatures avec les liens vers l'image taille originale.
Rien de nouveau si ce n'est que ces miniatures sont carrées, ce qui permet d'avoir un effet sympa.
Dans un premier temps, créez une page statique et collez-y le code suivant :
Pour modifier la tailles des miniatures, ajustez la variable $taille.
Pour rendre l'affichage plus sympa, je vous conseille un soupçon de javascript avec slimbox ou fancybox.
Dans mon cas, j'ai utilisé fancybox et édité le fichier header.php en ajoutant entre les balises "head" :
Ensuite il suffit de pimper son affichage avec les différentes alternatives offertes par fancybox.
EDIT 1 : Maintenant compatible avec plusieurs extensions d'images (JPG/GIF/PNG). Attention, la transparence est mal gérée lors de la création de la miniature.
Je viens apporter ma petite pierre à l'édifice en aidant ceux qui recherchent un script créant une mosaïque d'images automatiquement et simplement.
Principe du script :
Le script vient chercher les images d'un dossier, crée les miniatures à la volée qu'il vient stocker dans un répertoire cache, puis affiche les miniatures avec les liens vers l'image taille originale.
Rien de nouveau si ce n'est que ces miniatures sont carrées, ce qui permet d'avoir un effet sympa.
Dans un premier temps, créez une page statique et collez-y le code suivant :
<?php
$rep = "data/images/realisations"; // Répertoire contenant les images
$cache = "cache"; //nom du dossier à créer pour le cache
$taille = "60"; // Taille des miniature $taille x $taille en pixel
$tableauFichiers = array();
$dossier = opendir($rep);
while ($fichier = readdir ($dossier)){
if($fichier != '.' && $fichier != '..' && $fichier != $cache){
$tableauFichier[] = $fichier;
}
}
$nbImg = count($tableauFichier); // nombre d'images dans le dossier
// fonction enlevement extension
function backstr($haystack, $needle) {
return substr($haystack, 0, strlen($haystack) - strlen(strstr($haystack,$needle)));
}
if (!file_exists($rep.'/'.$cache)){ // Si le fichier cache n'existe pas
mkdir($rep.'/'.$cache); //création du repertoire
}
//Fonction génération miniature
function images_resize_carree($src, $dest, $largeur, $pos){
list($srcX, $srcY, $type, $attr) = getimagesize($src);
$imgSrc=imagecreatefromstring(file_get_contents($src));
if (empty($imgSrc)){
return false;
}
if($srcX>= $srcY){
$dim=$srcY;
$horizontale=true;
}
elseif($srcX<= $srcY){
$dim=$srcX;
$verticale=true;
}
else{
$dim=$srcX;
}
//on determine le point de depart x,y
if($horizontale){
switch($pos){
case "left":
$point_x_ref="0";
$point_y_ref="0";
break;
case "right":
$point_x_ref=($srcX)-($dim);
$point_y_ref="0";
break;
default:
$point_x_ref=($srcX/2)-($dim/2);
$point_y_ref="0";
break;
}
}
elseif($verticale){
switch($pos){
case "top":
$point_x_ref="0";
$point_y_ref="0";
break;
case "bottom":
$point_x_ref="0";
$point_y_ref=($srcY)-($dim);
break;
default:
$point_x_ref="0";
$point_y_ref=($srcY/2)-($dim/2);
break;
}
}
$imDest=@imagecreatetruecolor($largeur, $largeur);
imagecopyresampled($imDest, $imgSrc, 0, 0, $point_x_ref, $point_y_ref, $largeur , $largeur, $dim, $dim);
imagedestroy($imgSrc);
imagejpeg($imDest, $dest, 100);
imagedestroy($imDest);
return true;
}
$chemin = $rep.'/'.$cache.'/'; //chemin répertoire cache
echo '<p>';
for($i=0; $i<$nbImg; $i++){
$extension = strrchr($tableauFichier[$i],'.');// récupérer l'extension avec le point
$fichierWext = backstr($tableauFichier[$i],'.');//fichier sans extension
$imgThumb = $fichierWext.'-thumb'.$extension;//nom complet miniature
$racine = $rep.$selecteur.'/'.$tableauFichier[$i]; //chemin de l'image taille normale
if (!file_exists($chemin.$imgThumb)){ //Si la miniature n'existe pas, on la créer
images_resize_carree($racine,$chemin.$imgThumb,$taille,"");
}
echo '<a href="'.$rep.$selecteur.'/'.$tableauFichier[$i].'" class="fancybox" rel="fancy" ><img src="'.$rep.'/'.$cache.'/'.$imgThumb.'" alt="'.$fichierWext.'" /></a>';
echo "\n";
}
echo "</p> \n";
?>
Pour modifier la tailles des miniatures, ajustez la variable $taille.
Pour rendre l'affichage plus sympa, je vous conseille un soupçon de javascript avec slimbox ou fancybox.
Dans mon cas, j'ai utilisé fancybox et édité le fichier header.php en ajoutant entre les balises "head" :
<script type="text/javascript" src="<?php $plxShow->template(); ?>/js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="<?php $plxShow->template(); ?>/js/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="<?php $plxShow->template(); ?>/js/fancybox/jquery.easing-1.4.pack.js"></script>
<link rel="stylesheet" href="<?php $plxShow->template(); ?>/js/fancybox/jquery.fancybox-1.3.4.css"
<script type="text/javascript">
$(document).ready(function() {
$("a.fancybox").fancybox({
'overlayShow' : false
});
Ensuite il suffit de pimper son affichage avec les différentes alternatives offertes par fancybox.
EDIT 1 : Maintenant compatible avec plusieurs extensions d'images (JPG/GIF/PNG). Attention, la transparence est mal gérée lors de la création de la miniature.
Connectez-vous ou Inscrivez-vous pour répondre.
Réponses
PS: Il manque une balise p (étant donné qu'il y en a une à la fin)
En tout cas je trouve que les miniatures générées sont mieux "croppées" que celles dans le gestionnaire d'images de Plux !
alors je me demande un peu pourquoi ;-) c'est peut-être [aussi] du à mes images! j'ai fait que quelques tests sans plus
mais disons que les miniatures sont mieux centrée! je ne sais pas si c'est très clair...
A+
mes sites principaux : fonds d'écran gratuits - longue traîne - référencer votre site - brocante en ligne -
EDIT : lien mort, sorry ..
"carré" pas le top .. il faudrait que cela puisse s'adapter aux proportions des images ...
mais le problème reste le même : peut-on créer des galeries différentes et indépendantes ??
exemple:
http://www.unesourisetmoi.info/autos/index.php
(vois le système de galeries différentes géré avec un simple code)
@+
mes sites principaux : fonds d'écran gratuits - longue traîne - référencer votre site - brocante en ligne -
Pour un souci de mise en page, la seule solution reste bien de rogner l'image afin de ne pas la déformer.
Je pense avoir compris ce que tu veux dire, en gros l'idée c'est de privilégier un coté plus que l'autre ?
Admettons on redimensionne les images selon une certaine hauteur, ensuite on rogne sur la largeur.
Tout dépend de ce que l'on souhaite au final.
Est-ce que ton script fonctionne avec des images sources qui ne sont pas en jpg. car en regardant le code, tu utilises imagecreatefromjpeg.
Consultant PluXml
Ancien responsable et développeur de PluXml (2010 à 2018)
non pour moi le soucis est le 'format' (proportions) des "imagettes" ou "thumbs" ... qu'elles soient adaptées à celui des images qui vont ensuite s'afficher en cliquant dessus ...
là on a des "carrés" partout
mes sites principaux : fonds d'écran gratuits - longue traîne - référencer votre site - brocante en ligne -
Je ne comprends pas bien, dans ce cas tu peux utiliser le resize proposé par défaut par Pluxml, non ?
mes sites principaux : fonds d'écran gratuits - longue traîne - référencer votre site - brocante en ligne -
ce que je désires c'est que, dans une galerie, l'affichage des vignettes, ou thumbs, soit "proportionnel.
Autrement dit:
si l'image est "carrée" = thumb carré
si l'image est "horizontale" = thumb horizontal
si l'image est "verticale" = thumb vertical
exemple :
http://www.unesourisetmoi.info/autos/fonds-ecran-gratuit-automobile-ferrari.php
pour des images au format "wallpaper" par exemple , la taille des 'thumbs' est paramétrable, indépendamment de celle des images réelles qui s'affichent au clic, et que l'on met en ligne aux dimensions que l'on veut
ok ?
mes sites principaux : fonds d'écran gratuits - longue traîne - référencer votre site - brocante en ligne -
Le paramétrage de la création de la miniature se fait directement dans l'url de l'image. C'est donc très facile à mettre en place. Les miniatures sont mises en cache dans 1 répertoire.
Exemple d'url de création de la miniature (le script est ici placé dans le thème) : h=hauteur de 80 pixels - w=largeur de 210 pixels - q=compression à 80%
Une 1ère démo de base.
Une 2nde démo avec usage des filtres images.
Je ne sais pas si ça peut vous aider.
mes sites principaux : fonds d'écran gratuits - longue traîne - référencer votre site - brocante en ligne -
Je suis comme toi, moi aussi je voudrai qu'elle soient cliquables.
J'ai fait une demande ici et autre là pour la 5.1 . Mais je n'ai pas de réponse pour le moment.
Je veux bien de ton soutien pour faire avancer ma demande... qui est aussi la tienne. :P