Problème Galerie Dynamique

**TRUNCKS** · 04/01/2011, 17h41

Bonjour à vous,

J'ai essayé de faire une galerie dynamique.

Après plusieurs heures de bidouillages ( je suis nouveau en php ), j'ai quelques petits soucis.

Pour l'upload d'image, pas de soucis particulier, sauf que si j'actualise ma page, tout tombe en rideau ( la dernière se dédouble )

Mais le plus gros soucis, c'est la partie ou les images s'affichent, la grande image s'affiche correctement mais la miniature fait n'importe quoi.

Déjà elle chevauche la grande, elles se mettent les unes en dessous des autres ( au lieu de côte à côte ) et je n'arrive pas du tout à la redimensionner automatiquement quand je l'upload, elle aura la taille de l'image par défaut.

Pourriez-vous m'aider ?

**TRUNCKS** · 04/01/2011, 23h31

Voici le php de la partie admin ( celle où l'on upload les images )

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
 
 
<?php
include('params.inc.php');
if(!empty($_POST['nom'])){
	$erreurs = array(); //initialise un tableau d'erreurs au cas ou :)
	$nom = mysql_escape_string(trim($_POST['nom'])); //enleve les espaces de chaque côté de la variable
	$lienimage = '';
	$typesacceptes = array('image/jpeg','image/jpg','image/png','image/gif');
	//vérifie si les images existent et qu'elles sont au bon format
	if(!empty($_FILES['image1']['name']) && 
	!empty($_FILES['image2']['name']) && 
	in_array($_FILES['image1']['type'],$typesacceptes) && 
	in_array($_FILES['image2']['type'],$typesacceptes)
	){
		$lienimage = mysql_escape_string($_FILES['image1']['name']);
		copy($_FILES['image1']['tmp_name'],'images/'.$lienimage);
		copy($_FILES['image2']['tmp_name'],'images/miniatures/'.$lienimage);
 
		//connexion à la BDD
		$connect=mysql_connect(MYHOST,MYUSER,MYPASS) or die ('erreur de connexion'); 
		mysql_select_db(MYDB) or die ('erreur de connexion à la base'); 
 
		$requeteinsert = 'INSERT INTO images(nom,lienimage) VALUES(\''.$nom.'\',\''.$lienimage.'\')';
		$result = mysql_query($requeteinsert,$connect);
		echo '<p class="success">Votre image a bien été enregistrée!</p>';
		mysql_close($connect);	
	}
	else{
		$erreurs[] = 'Veuillez uploader une image valide (format jpg, png ou gif)!';
	}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Galerie Snoupix Flip | Admin</title>
		<!-- CSS -->
		<link rel="stylesheet" href="css/admin.css" type="text/css" media="screen, projection" />
	</head>
	<body>
		<?php
	if(!empty($erreurs)){
		echo '<div class="error">
		<p>Erreurs rencontrées</p>
	<ul>';
	foreach($erreurs as $erreur){
		echo '<li>'.$erreur.'</li>';
	}
	echo '</ul>
	</div>';
		}
		?>
		<form method="post" action="admin.php" enctype="multipart/form-data">
			<fieldset>
	<legend>Ajout d'une image</legend>
	<label for="nom">Nom</label>
	<input type="text" id="nom" name="nom"/>
	<label for="image1">Image</label>
	<input type="file" id="image1" name="image1"/>
         <label for="image2">Miniature</label>
	<input type="file" id="image2" name="image2"/>
	<button type="submit">Uploader</button>
			</fieldset>
		</form>
		<table summary="Liste des images de la galerie">
			<caption>Liste des images</caption>
			<tr>
				<th>Id</th>
				<th>Nom</th>
				<th>Supprimer</th>
			</tr>
			<?php
			$connect=mysql_connect(MYHOST,MYUSER,MYPASS) or die ('erreur de connexion'); 
			mysql_select_db(MYDB) or die ('erreur de connexion à la base'); 
 
			if(!empty($_GET['sup']) && is_numeric($_GET['sup'])){
				$requeteselect = 'SELECT lienimage FROM images WHERE id=\''.mysql_escape_string($_GET['sup']).'\'';
				$result = mysql_query($requeteselect, $connect);
				$image_courante = mysql_fetch_array($result,MYSQL_ASSOC);
				unlink('images/'.$image_courante['lienimage']);
				unlink('images/miniatures/'.$image_courante['lienimage']);
 
				$requetesup = 'DELETE FROM images WHERE id=\''.mysql_escape_string($_GET['sup']).'\'';
				$result = mysql_query($requetesup, $connect);
			}
 
			$requeteselect = 'SELECT id,lienimage,nom FROM images';
			$result = mysql_query($requeteselect, $connect);
			while($image_courante = mysql_fetch_array($result,MYSQL_ASSOC)){
				echo '<tr>
						<td>'.$image_courante['id'].'</td>
						<td>'.stripslashes($image_courante['nom']).'</td>
						<td><a href="admin.php?sup='.$image_courante['id'].'">Supprimer</a></td>
				</tr>';
			}
			mysql_close($connect);	
			?>
		</table>
	</body>
</html>

Et la partie où la galerie s'affiche.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
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
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Galerie</title>
	<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
	<script type="text/javascript" src="js/jquery-1.3.1.js"></script>
	<script type="text/javascript" src="js/jquery-ui-personalized-1.6rc2.packed.js"></script>
	<script type="text/javascript" src="js/jquery.flip.js"></script>
	<script type="text/javascript" src="js/codeFlip.js"></script>
</head>
<body>
	<div id="header">
		<h1>Galerie dynamique</h1>
	</div>
	<div id="conteneur">
		<div id="principale">
			<div id="flipBox">
				<div class="grande_image">
					<?php
					include('params.inc.php');
					$connect=mysql_connect(MYHOST,MYUSER,MYPASS) or die ('erreur de connexion'); 
					mysql_select_db(MYDB) or die ('erreur de connexion à la base'); 
					$requeteselect = 'SELECT id,lienimage,nom FROM images';
					$result = mysql_query($requeteselect, $connect);
					$tableau = array();
					$i = 0;
					while($image_courante = mysql_fetch_array($result,MYSQL_ASSOC)){
						//on met toutes les infos dans un tableau
						$tableau[$image_courante['id']]['nom'] = $image_courante['nom'];
						$tableau[$image_courante['id']]['lienimage'] = $image_courante['lienimage'];
						if($i == 0){ //si il s'agit de la première image on l'affiche
							echo '<img src="images/'.$tableau[$image_courante['id']]['lienimage'].'" 
										alt="'.stripslashes($tableau[$image_courante['id']]['nom']).'"/>
								  <span>'.stripslashes($tableau[$image_courante['id']]['nom']).'</span>';
						}
						++$i;
					}
					mysql_close($connect);	
					?>
				</div>
			</div>
			<div class="miniatures">
				<?php
					foreach($tableau as $image){
						echo '<a class="flipBT" href="#"  title="'.stripslashes($image['nom']).'">
                                        <img src="images/miniatures/'.$image['lienimage'].'" class="chemin" alt="images/'.$image['lienimage'].'"/>
                                </a>';
					}
				?>
			</div>
		</div>
	</div>
</body>
</html>

Et le CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
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
66
67
68
 
 
 
form{
	width:500px;
	margin:auto;
	background-color:#e5e5e5;
	border-radius:1em; /*Trop cool pour IE :) */
	-moz-border-radius:1em; /*Trop cool pour IE :) */
}
form *{
	font-size:1.0em;
	font-family:georgia;/*on my mind!!*/
}
form fieldset{
	border:none;
}
 
form legend{
	font-size:2em;
	color:#777;
	margin-top:0.3em;
}
form label{
	display:block;
	float:left;
	width:150px;
	text-align:right;
}
form input, form select, form textarea{
	width:300px;
	margin-bottom: 1em;
	margin-left:0.5em;
}
form button{
	position:relative;
	left:160px;
}
 
 
table{
width:50%;
margin:auto;
}
table caption{
font-size:2em;
color:#777;
}
table th{
background-color:#ddd;
border:none;
}
 
.error,.success{  
	width:50%;
	padding:0.3em;  
	margin:0.3em auto;
}
.error{
	color:#8a1f11;  
    background-color:#fbe3e4;
	border:2px solid #8a1f11;
}
.success{
	border:2px solid #1f9b15;
	color:#1f9b15;
	background-color:#cefcd4;
}

Problème Galerie Dynamique

Langage PHP

Discussions similaires

Partager

Partager