galerie automatisé pour le bootstrap tweeter
bonsoir à tous,
alors je ne suis pas doué pour faire tout ce qui est tuto, mais voilà j'avais envie de partager ce petit truc que j'ai conçus.
J’espère ne pas avoir essayer de réinventer la roue. A l'heure actuel, le code n'est pas optimisé, je le sais, mais je ne saurai comment l'optimisé, mais il tourne rond, c'est déjà pas mal je trouve.
Alors voici l'idée
prenons un répertoire ftp qui s'appelle photo,
dans ce répertoire il ya
salon
fsx
greg
.....
dans chaque répertoire il y a des photos
le prg que je vous propose va faire ceci
Il va lister tous les répertoires et leurs contenu,et créer un onglet à chaque répertoire détecté,
et chaque onglet affichera une mini et simplissime galerie du contenu du répertoire.
Avant d'afficher il va créer des fichiers miniature au format png
et voici le résultat
voici le code, partez pas en courant :D
<<h3><div class="page-header">Les photos de FFS2</div></h3>
<div class="bs-docs-example">
<script>
$(document).ready(function(){
$('.carousel3').carousel3({
interval: 2000
});
});
</script>
<?php
//recherche et stockage des fichiers avec leur emplacements
function GetAllFiles($folder,$ext=array('txt'),$recursif=true) {
$files = array();
$dir=opendir($folder);
while ($file = readdir($dir)) {
if ($file == '.' || $file == '..') continue;
if (is_dir($folder.'/'.$file)) {
if ($recursif==true)
$files=array_merge($files, GetAllFiles($folder.'/'.$file, $ext));
} else {
foreach ($ext as $v) {
if (strtolower($v)==strtolower(substr($file,-strlen($v)))) {
$files] = $folder.'/'.$file;
break;
}
}
}
}
closedir($dir);
return $files;
}
//recherche et stockage des emplacements
function GetAllFiles2($folder2,$ext2=array('txt'),$recursif2=true) {
$files2 = array();
$dir2=opendir($folder2);
while ($file2 = readdir($dir2)) {
if ($file2 == '.' || $file2 == '..') continue;
if (is_dir($folder2.'/'.$file2)) {
if ($recursif2==true)
$files2=array_merge($files2, GetAllFiles2($folder2.'/'.$file2, $ext2));
} else {
foreach ($ext2 as $v2) {
if (strtolower($v2)==strtolower(substr($file2,-strlen($v2)))) {
$files2] = $folder2;
break;
}
}
}
}
closedir($dir2);
return $files2;
}
//lancement recherche et stockage des fichiers avec leur emplacements
$search=GetAllFiles('./include/photos/',array('jpg'));
$lrf=$search;
$lrf2=str_replace(".JPG", "min.png", $lrf);
$lrf2=str_replace(".jpg", "min.png", $lrf);
$lrf3=str_replace(".JPG", "min.png", $lrf);
$lrf3=str_replace(".jpg", "diap.png", $lrf);
//création de miniature
include 'convertisseur2.php';
//lancement recherche et stockage des emplacements
$search=GetAllFiles2('./include/photos/',array('jpg'));
$lr=$search;
$nbf = count($lrf); //nombre de fichiers trouvé
$pdtf=0;
$tr;
$dnra = array(); //position de démarrage de chaque répertoire par rapport à la liste compléte de fichiers
// calcul du nombre d'onglet à créer en fonction du nb de répertoire et sous répertoire
while ($pdtf<($nbf+1))
{
if ($tr != $lr$pdtf])
{
$tr=$lr$pdtf];
$dnra]=$pdtf;
$pdtf=$pdtf+1;
}
else
{
$tr=$lr$pdtf];;
$pdtf=$pdtf+1;
}
}
$dp=4;
?>
<div class="bs-docs-example">
<ul id="myTab" class="nav nav-tabs">
<?php
$nbrd = (count($dnra))-1;
$ddr=0;
$po=0;
//création des onglets
while ($ddr<$nbrd)
{
if ($po==0)
{
$po=1;
$titre=$lr$dnra$ddr]];
?>
<li class="active"><a href="#<?php echo $ddr; ?>" data-toggle="tab"><?php echo substr($titre,18); ?></a></li>
<?php
}
else
{
$titre=$lr$dnra$ddr]];
?>
<li class=""><a href="#<?php echo $ddr; ?>" data-toggle="tab"><?php echo substr($titre,18); ?></a></li>
<?php
}
$ddr=$ddr+1;
}
?>
</ul>
<div id="myTabContent" class="tab-content">
<?php
$pg=0;
$ddr=0;
$pdtf=0;
$pdtf2=0;
$g=0;
while ($ddr<$nbrd)
{
if ($pg==0)
{
$pg=1;
?>
<div class="tab-pane fade active in" id="<?php echo $ddr; ?>">
<?php
$ps=0;
$ts=0;
$al=1;
$ddr=$ddr+1;
$dg=$dnra$g];echo '<br>';
$g=$g+1;
$pdtf2=$dg;
$fg=$dnra$g];echo '<br>';
//création des liste carroussels
?><div class="container" style="margin-top:60px;">
<div id="myCarousel<?php echo $dp; ?>" class="carousel slide3">
<ol class="carousel-indicators">
<?php
while ($pdtf2<$fg)
{
if ($ps==0)
{
?>
<li data-target="#myCarousel<?php echo $dp; ?>" data-slide-to="<?php echo $ts; ?>" class="active"></li>
<?php
$ps=$ps+1;
}
else
{
?>
<li data-target="#myCarousel<?php echo $dp; ?>" data-slide-to="<?php echo $ts; ?>"></li>
<?php
}
$pdtf2=$pdtf2+1;
$ts=$ts+1;
}
$ps=0;
$ts=0;
?>
</ol>
<div class="carousel-inner">
<?php
//création des carroussels
$pdtf2=$dg;
$ts=0;
while ($pdtf2<$fg)
{
if ($ps==0)
{
?>
<div class="active item"><img src="<?php echo $lrf3$pdtf2]; ?>"></div>
<?php
$ps=$ps+1;
}
else
{
?>
<div class="item"><img src="<?php echo $lrf3$pdtf2]; ?>"></div>
<?php
}
$pdtf2=$pdtf2+1;
}
?>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel<?php echo $dp; ?>" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel<?php echo $dp; ?>" data-slide="next">›</a>
</div>
</div>
<?php
//création des contenues des onglets
while ($pdtf<$fg)
{
if ($al==1)
{ ?> <ul class="thumbnails"> <?php }
?>
<li class="span3">
<a href="<?php echo $lrf$pdtf]; ?>" class="thumbnail">
<img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="<?php echo $lrf2$pdtf]; ?>">
</a>
</li>
<?php
$pdtf=$pdtf+1;
if ($al==4)
{ ?> </ul> <?php $al=0;}
$al=$al+1;
}
?>
</div>
<?php
}
else
{
$dp=$dp+1;
?>
<div class="tab-pane fade" id="<?php echo $ddr; ?>">
<?php
$ps=0;
//$ts=0;
$al=1;
$ddr=$ddr+1;
$dg=$dnra$g];echo '<br>';
$g=$g+1;
$fg=$dnra$g];echo '<br>';
//création des liste carroussels
?><div class="container" style="margin-top:60px;">
<div id="myCarousel<?php echo $dp; ?>" class="carousel slide3">
<ol class="carousel-indicators">
<?php
while ($pdtf2<$fg)
{
if ($ps==0)
{
?>
<li data-target="#myCarousel<?php echo $dp; ?>" data-slide-to="<?php echo $ts; ?>" class="active"></li>
<?php
$ps=$ps+1;
}
else
{
?>
<li data-target="#myCarousel<?php echo $dp; ?>" data-slide-to="<?php echo $ts; ?>"></li>
<?php
}
$pdtf2=$pdtf2+1;
$ts=$ts+1;
}
$ps=0;
?>
</ol>
<div class="carousel-inner">
<?php
//création des carroussels
$pdtf2=$pdtf;
while ($pdtf2<$fg)
{
if ($ps==0)
{
?>
<div class="active item"><img src="<?php echo $lrf3$pdtf2]; ?>"></div>
<?php
$ps=$ps+1;
}
else
{
?>
<div class="item"><img src="<?php echo $lrf3$pdtf2]; ?>"></div>
<?php
}
$pdtf2=$pdtf2+1;
}
?>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel<?php echo $dp; ?>" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel<?php echo $dp; ?>" data-slide="next">›</a>
</div>
</div>
<?php
//création des contenues des onglets
while ($pdtf<$fg)
{
if ($al==1)
{ ?> <ul class="thumbnails"> <?php }
?>
<li class="span3">
<a href="<?php echo $lrf$pdtf]; ?>" class="thumbnail">
<img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="<?php echo $lrf2$pdtf]; ?>">
</a>
</li>
<?php
$pdtf=$pdtf+1;
if ($al==4)
{ ?> </ul> <?php $al=0;}
$al=$al+1;
}
?>
</div>
<?php
}
}
?>
</div>
</div>le fichier pour la création de minitature
<?php
$lrfac=$search;
$lrfac=str_replace(".JPG", ".jpg", $lrfac);
$nbfac = count($lrfac);
//echo "convertisseur appelé <br>";
function imagethumb( $image_src , $image_dest = NULL , $max_size = 100, $expand = FALSE, $square = FALSE )
{
if( !file_exists($image_src) ) return FALSE;
// Récupère les infos de l'image
$fileinfo = getimagesize($image_src);
if( !$fileinfo ) return FALSE;
$width = $fileinfo[0];
$height = $fileinfo[1];
$type_mime = $fileinfo'mime'];
$type = str_replace('image/', '', $type_mime);
if( !$expand && max($width, $height)<=$max_size && (!$square || ($square && $width==$height) ) )
{
// L'image est plus petite que max_size
if($image_dest)
{
return copy($image_src, $image_dest);
}
else
{
header('Content-Type: '. $type_mime);
return (boolean) readfile($image_src);
}
}
// Calcule les nouvelles dimensions
$ratio = $width / $height;
if( $square )
{
$new_width = $new_height = $max_size;
if( $ratio > 1 )
{
// Paysage
$src_y = 0;
$src_x = round( ($width - $height) / 2 );
$src_w = $src_h = $height;
}
else
{
// Portrait
$src_x = 0;
$src_y = round( ($height - $width) / 2 );
$src_w = $src_h = $width;
}
}
else
{
$src_x = $src_y = 0;
$src_w = $width;
$src_h = $height;
if ( $ratio > 1 )
{
// Paysage
$new_width = $max_size;
$new_height = round( $max_size / $ratio );
}
else
{
// Portrait
$new_height = $max_size;
$new_width = round( $max_size * $ratio );
}
}
// Ouvre l'image originale
$func = 'imagecreatefrom' . $type;
if( !function_exists($func) ) return FALSE;
$image_src = $func($image_src);
$new_image = imagecreatetruecolor($new_width,$new_height);
// Gestion de la transparence pour les png
if( $type=='png' )
{
imagealphablending($new_image,false);
if( function_exists('imagesavealpha') )
imagesavealpha($new_image,true);
}
// Gestion de la transparence pour les gif
elseif( $type=='gif' && imagecolortransparent($image_src)>=0 )
{
$transparent_index = imagecolortransparent($image_src);
$transparent_color = imagecolorsforindex($image_src, $transparent_index);
$transparent_index = imagecolorallocate($new_image, $transparent_color'red'], $transparent_color'green'], $transparent_color'blue']);
imagefill($new_image, 0, 0, $transparent_index);
imagecolortransparent($new_image, $transparent_index);
}
// Redimensionnement de l'image
imagecopyresampled(
$new_image, $image_src,
0, 0, $src_x, $src_y,
$new_width, $new_height, $src_w, $src_h
);
// Enregistrement de l'image
$func = 'image'. $type;
if($image_dest)
{
$func($new_image, $image_dest);
}
else
{
header('Content-Type: '. $type_mime);
$func($new_image);
}
// Libération de la mémoire
imagedestroy($new_image);
return TRUE;
}
$dfac=0;
$exist=0;
$new=0;
while ($dfac<$nbfac)
{
//echo $lrfac$dfac]; echo '<br>';
//echo str_replace(".jpg", ".png", $lrfac$dfac]);echo '<br>';
$image_src = $lrfac$dfac];
$image_dest = str_replace(".jpg", "_min.png", $lrfac$dfac]);
if (file_exists($image_dest))
{
// echo "Le fichier $image_dest existe. <br>";
$exist=$exist+1;
}
else
{
imagethumb($image_src, $image_dest, 260); // Créé une miniature de "image.png" de maximum 90 pixels et l'enregistre dans le fichier "thumb.png"
// echo "<br><br>Le fichier $image_dest est convertis.<br><br>";
$new=$new+1;
}
$dfac=$dfac+1;
}
if ($new !=0){echo "<br>$new miniatures viennent d'être crées convertis et ";}
$dfac=0;
$exist=0;
$new=0;
while ($dfac<$nbfac)
{
//echo $lrfac$dfac]; echo '<br>';
//echo str_replace(".jpg", ".png", $lrfac$dfac]);echo '<br>';
$image_src = $lrfac$dfac];
$image_dest = str_replace(".jpg", "_diap.png", $lrfac$dfac]);
if (file_exists($image_dest))
{
//echo "Le fichier $image_dest existe.<br>";
$exist=$exist+1;
}
else
{
imagethumb($image_src, $image_dest, 940); // Créé une miniature de "image.png" de maximum 90 pixels et l'enregistre dans le fichier "thumb.png"
//echo "<br><br>Le fichier $image_dest est convertis.<br><br>";
$new=$new+1;
}
// imagethumb($image_src, $image_dest, 940); // Créé une miniature de "image.png" de maximum 90 pixels et l'enregistre dans le fichier "thumb.png"
$dfac=$dfac+1;
}
if ($new !=0){echo "$new diaporama viennent d'être crée convertis<br><br> ";}
?>et le fichier équivalent à index.php
<!DOCTYPE html>
<html>
<head>
<title>FFS2 V3.00</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<!-- Bootstrap -->
<link href="/css/bootstrap.css" rel="stylesheet" media="screen">
<link href="/js/table/themes/blue/style.css" rel="stylesheet" media="screen">
<script src="js/table/jquery.tablesorter.pager.js"></script>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/table/jquery.tablesorter.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/modal.js"></script>
</head>
<body>
<br>
<div class="container">
<?php include 'include/photos/lecturedemo.php'; ?>
</div>
<br>
<br>
</body>
</html>je sais que ce n'est pas grand chose, que c'est brouillon et tordu d'esprit, mais si quelqu'un vois de quoi un faire un tuto je serai content et sinon cela ne sera pas grave car j'en aurai l'utilité.
@+
10 réponses
Suggestions : - Faire des miniatures - Un système de cache, car tu ne vas pas ajouter des photos toutes les minutes j'imagine :D - Nom de variable en anglais et qui ne font pas 3km** Sinon c'est une bonne ressource, merci.
salut Hotgeart
Alors pour les miniatures pourrais tu être plus précis, car je ne suis pas sur de te comprendre.
Pour le cache j'y ai songé, mais ne connaissant pas la chose... Si tu as un lien qui expliquerai je suis preneur
pour les noms de variable, elles seront modifiées très prochainement. Mais comme je me suis énormément mélanger les crayons sur ce coup, c'est pour ça quelles sont aussi longue et en fr.
Mais je prend note et je modifierai.
Merci de tes conseils.
@+
Flo
alors j'ai retouché le code, réduit les nom des variables, et intégré un carrousselle
Quand on fait une galerie photo on affiche des miniatures pour alléger le poids de la page.
Imagine une galerie avec des photos de 5Mo * 10 photos/page donc ton visiteur va devoir pour chaque page télécharger directement 50 Mo. Alors qu'il ne t'a rien demandé, peu être qu'il était sur son GSM et que tu viens de lui bouffer 50Mo sur son abonnement.
Donc miniature sur les pages et quand tu cliques sur une photo, tu l'affiches en taille réelle.
ça m'obligerai à jouer avec 2 liste de fichier différente, déjà avec une cela est plutôt complexe, mais bon j'y penserai.
ça m'obligerai à jouer avec 2 liste de fichier différente, déjà avec une cela est plutôt complexe
En effet c'est plus compliqué mais c'est au développeur de se casser la tête pour que l'utilisateur aie une expérience agréable sur le site. Cela passe notamment par de l'optimisation. Comme l'a dit Hotgeart, si tu charges 50 Mo de photos, non seulement tu vas faire télécharger des Mo en trop ce qui peut être gênant sur des forfaits non illimités mais en plus tu ralentis énormément ton site. Globalement, au delà de 4-5s secondes de chargement de page, il y a beaucoup de chances que l'utilisateur ferme ta page avant de visionner tes images.
je dois trouver la meilleur approche pour l'ajouter à mon prg, c'est promis je vais y réfléchir sérieusement, mais par contre pour l'histoire de cache, quelqu'un à une piste car je ne sais pas trop ou mettre les pieds
j'ai juste une question, pour la conversion, qui va failre le boulot, le client ou le serveur??
Pour ta question, je suis sur que tu peux trouver la réponse tout seul avec ce qu'on vient de discuter ;) .
Sinon il est possible de resize les images et de mettre en cache : http://bit.ly/10KIOCs .
[mod humour on] t chiant je viens de finir la mise au point du créateur d'image miniature et diaporama[/mod humour on]
plus sérieusement je viens de terminer le prg qui gérera la création des miniatures, je termine les test et je met les code à jour.
pour l'histoire du cache tant pis, je passerai ça dans une mise à jours, je dois passé à autre chose.
code mise à jours