Afficher les datas d'un tableau sur plusieurs colonnes

Comme sur ce site il y a des bons codes, moi aussi je met un code interressant. Mon code permet d'afficher les datas d'un tableau sur le nombre de colonne que vous choisissez vous meme. C'est hyper pratique et je l'ai fais avec des DIV, comme ca il est web 2.0 :)

Tous les codes

garcia

[2] sources en PHP voir

Code vu 3921 fois

Enregistré le 17 Juin 2009

téléchargement du zip

impression de la fiche

Code Source

01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.

<?php
/******************************************************************************/
/*                                                                            */
/*                       __        ____                                       */
/*                 ___  / /  ___  / __/__  __ _____________ ___               */
/*                / _ \/ _ \/ _ \_\ \/ _ \/ // / __/ __/ -_|_-<               */
/*               / .__/_//_/ .__/___/\___/\_,_/_/  \__/\__/___/               */
/*              /_/       /_/                                                 */
/*                                                                            */
/*                                                                            */
/******************************************************************************/
/*                                                                            */
/* Titre          : Afficher les datas d'un tableau sur plusieurs colonnes    */
/*                                                                            */
/* URL            : http://www.phpsources.org/scripts517-PHP.htm              */
/* Auteur         : garcia                                                    */
/* Date édition   : 17 Juin 2009                                              */
/*                                                                            */
/******************************************************************************/


// votre tableau
$images = array(
             'pomme',
             'orange',
             'baname',
             'kiwi',
             'papaye',
             'melon',
             'pasteque',
             'goyave',
             'avocat',
             'cerise',
             'fraise'
             );

// combien de colonne
$nbre_colonne = 3;

// NE TOUCHER PLUS A RIEN SAUF AU CSS
$width = 100 / $nbre_colonne;
$width = round ($width);

$count = 0;

for($i = 0; $i < count($images); $i++)
{
     if($count == 0)
     echo ' <div style="clear:both;">';

     echo '
         <div style="float:left;width:'.$width.'%">'.$images[$i].'</div>';

     $count++;

     if(($count == $nbre_colonne) || ($images[$i] == end($images)))
     {
         echo '
     </div>';
         $count = 0;
     }
}

?>

Tous les codes Tableaux

Fonctions du code

array

: Crée un tableau - (PHP 4, PHP 5)

round

: -

count

: Compte le nombre d'éléments d'un tableau ou le nombre de propriétés...

echo

: Affiche une chaîne de caractères - (PHP 4, PHP 5)

end

: Positionne le pointeur de tableau en fin de tableau - (PHP 4, PHP 5)

Commentaires

cromaxfab
Le 20 Juin 2009 à 18:09:00

Simple et pratique. Merci pour le partage.

patass
Le 22 Juin 2009 à 14:47:00

Et si, on veut, à la place du texte du tableau, on veut mettre des images avec possibilité de les agrandir par clic ou infobulles

cromaxfab
Le 22 Juin 2009 à 19:15:00

Bonjour, pour répondre à Patass, j'ai un peu modifié le code initial et utilisé Jquery et Jquery.lightbox pour l'affichage des photos.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<SCRIPT src="js/jquery-1.2.6.js" type=text/javascript></SCRIPT>
<SCRIPT src="js/jquery.lightbox-0.5.js" type=text/javascript></SCRIPT>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript">
$(function() {
$('#gallery a').lightBox();
});
$(function() {
$('a.gg').lightBox();
});
</script>
<style type="text/css">
/* jQuery lightBox plugin - Gallery style */
#gallery {
background-color: #444;
padding: 10px;
width: 790px;
}
#box {

padding: 2px;
width: 100%;
}
#box a:hover img {
border: 5px solid #fff;
border-width: 5px 5px 20px;
color: #fff;
}
#box img {
border: 5px solid #3e3e3e;
border-width: 5px 5px 20px;
}
#gallery ul { list-style: none; }
#gallery ul li { display: inline; }
#gallery ul img {
border: 5px solid #3e3e3e;
border-width: 5px 5px 20px;
}
#gallery ul a:hover img {
border: 5px solid #fff;
border-width: 5px 5px 20px;
color: #fff;
}
#gallery ul a:hover { color: #fff; }
</style>
</head>

<body bgcolor="#000099">
<?php
/******************************************************************************/
/* */
/* Titre : Afficher les datas d'un tableau sur plusieurs colonnes */
/* */
/* URL : http://www.phpsources.org/scripts517-PHP.htm */
/* Auteur : garcia */
/* Date édition : 17 Juin 2009 */
/* */
/******************************************************************************/

//Chemin vers le repertoire des images
$path = "images/";

// votre tableau
$images = array(
'image1.jpg',
'image2.jpg',
'image3.jpg',
'image4.jpg',
'image5.jpg',
'image6.jpg'
);

$titre_images = array(
'titre 1',
'titre 2',
'titre 3',
'titre 4',
'titre 5',
'titre 6'
);

// Nombre de colonne
$nbre_colonne = 3;

// Boucle pour l'affichage du tableau

$count = 0;

for($i = 0; $i < count($images); $i++)
{
if($count == 0)
echo '<div id="box" align="center" class="box"><br>';

echo '
<a class="gg" href="'.$path.$images[$i].'" title="'.$titre_images[$i].'">
<img src="'.$path.'thumb_'.$images[$i].'"/></a>';

$count++;

if(($count == $nbre_colonne) || ($images[$i] == end($images)))
{
echo '
</div></div>';
$count = 0;
}
}

?>

</body>
</html>

Pour voir une demonstration.
http://cromaxfab.fr/test/test_phpsource/test_jq/index.php

Ajouter un commentaire