Décalage Css a cause du php

Version imprimable

2 pièce(s) jointe(s)

bonsoir à tous ! :mouarf:

alors voilà j'ai un problème, je crée un album photo de base qui ressemblé à ca :

Code:

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
<div class="slider">
    <input type="radio" name="slide_switch" id="id1"/>
    <label for="id1">
        <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" width="100"/>
    </label>
    <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg"/>
 
 
    <input type="radio" name="slide_switch" id="id2" checked="checked"/>
    <label for="id2">
        <img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="100"/>
    </label>
    <img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg"/>
 
    <input type="radio" name="slide_switch" id="id3"/>
    <label for="id3">
        <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" width="100"/>
    </label>
    <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg"/>
 
    <input type="radio" name="slide_switch" id="id4"/>
    <label for="id4">
        <img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" width="100"/>
    </label>
    <img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg"/>
 
    <input type="radio" name="slide_switch" id="id5"/>
    <label for="id5">
        <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" width="100"/>
    </label>
    <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg"/>
</div>

je l'ai transformé en :

Code:

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
<?php
 
if(!empty($_FILES)){
		require("imgClass.php");
		$img = $_FILES ['img'];
		$text = strtolower(substr($img['name'],-3));
		$allow_ext = array("jpg", 'png', 'gif');
		if(in_array($text,$allow_ext)) {
		move_uploaded_file($img['tmp_name'],"images/".$img['name']);
		//Ligne de redimension image Min//
		img::creerMin("images/".$img['name'],"images/min",$img['name'],320,160);
		img::convertirJPG("images/".$img['name']);
		}
		else{
			$erreur ="Votre fichier n\'est pas une image";
	}	
}
?>
<html>
<head>
<title>Bêta test</title>
<script src="http://thecodeplayer.com/uploads/js/prefixfree.js" type="text/javascript"></script>
<script src="http://thecodeplayer.com/uploads/js/prefixfree.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css"/> 
<!----<link rel="stylesheet" type="text/css" href="theme/style.css"/> !--->
 </head>
 
<body>
 
<?php
if(isset($erreur)){
	echo $erreur;
	}
	?>
<form method="post" action="index.php" enctype="multipart/form-data">
<input type="file" name="img"/>
<input type="submit" name="Envoyer" />
</form>
<div class="slider">
 
<?php
$i=1;
while ($i)
{
$dos = "images/min";
$dir = opendir ($dos);
while($file=readdir($dir)){
		$allow_ext = array("jpg", 'png', 'gif');
		$text = strtolower(substr($file,-3));
		if(in_array($text,$allow_ext)) {
	?>
 
<input type="radio" name="slide_switch" id="id<?php echo $i;?>"/>
	<label for="id<?php echo $i;?>">
	<a href="images/<?php echo $file; ?>" width="100"/>
	</label> <br>
	<img src="images/min/<?php echo $file; ?>"/>
<!--nom de l'image	<h4>  ?<php echo $file; ?></h4> --->
	</a>
 
	<?php
	}
}
?>
 
	<?php
	$i++;
	}
	?>
</div>
 
 
 
 
 
</body>
</html>

le problème c'est que j'ai un truc qui ressemble plus à rien , et ca fait plus du tout pareil :cry:

( rendu attendu : Pièce jointe 121897 )

( Rendu actuelle : Pièce jointe 121898 )

merci de votre aide !

28/06/2013, 00h28
sabotage

c est le jeu des 7 erreurs entre le code du haut et celui du bas ?
- en bas il y a un lien, pas en haut
- en bas il a un <br/>, pas en haut
- en bas il y a un <h4>, pas en haut
- ton <div> est répète pour chaque fichier puisque tu l as mis dans la boucle.
- il manque le </div>
28/06/2013, 00h34
bybyx

Excuse moi j'avais pas mis tout le code :mrgreen:
28/06/2013, 12h25
Celira

Ce qui serait bien, ce serait d'avoir la source de la page générée qui n'affiche pas correctement et de faire la comparaison avec le html que tu es censé avoir.
28/06/2013, 12h43
bybyx

bha j'ai tout mis, en fait le premier code que j'ai poster pour mon album c'est une page basique ou on rajoute les codes a la mains, j'ai voulu évoluer je suis donc passer au code numéro 2 que j'ai posté ( je l'ai mis en entier )
et c'est le deuxième codes qui bloque :mrgreen:

je pense que c'est ce que tu voulais savoir
28/06/2013, 15h03
Celira

Pas tout à fait. Ce que je voulais, c'est le code HTML généré de ta page affichée à partir du script.

vu que je vois pas trop je te donne tout ce que j'ai si tu veux :mouarf:

: Index.php :

Code:

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
<?php
 
if(!empty($_FILES)){
		require("imgClass.php");
		$img = $_FILES ['img'];
		$text = strtolower(substr($img['name'],-3));
		$allow_ext = array("jpg", 'png', 'gif');
		if(in_array($text,$allow_ext)) {
		move_uploaded_file($img['tmp_name'],"images/".$img['name']);
		//Ligne de redimension image Min//
		img::creerMin("images/".$img['name'],"images/min",$img['name'],320,160);
		img::convertirJPG("images/".$img['name']);
		}
		else{
			$erreur ="Votre fichier n\'est pas une image";
	}	
}
?>
<html>
<head>
<title>Bêta test</title>
<script src="http://thecodeplayer.com/uploads/js/prefixfree.js" type="text/javascript"></script>
<script src="http://thecodeplayer.com/uploads/js/prefixfree.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css"/> 
<!----<link rel="stylesheet" type="text/css" href="theme/style.css"/> !--->
 </head>
 
<body>
 
<?php
if(isset($erreur)){
	echo $erreur;
	}
	?>
<form method="post" action="index.php" enctype="multipart/form-data">
<input type="file" name="img"/>
<input type="submit" name="Envoyer" />
</form>
 
 
<?php
 
$dos = "images/min";
$dir = opendir ($dos);
while($file=readdir($dir)){
		$allow_ext = array("jpg", 'png', 'gif');
		$text = strtolower(substr($file,-3));
		if(in_array($text,$allow_ext)) {
	?>
	<div class="slider">
	<?php
	$i=1;
while ($i)
{
?>
<input type="radio" name="slide_switch" id="id<?php echo $i;?>"/>
	<label for="id<?php echo $i;?>"></label>
	<a href="images/<?php echo $file; ?>" width="100"/>
	 <br>
	<img src="images/min/<?php echo $file; ?>"/>
<!--nom de l'image	<h4>  ?<php echo $file; ?></h4> --->
	</a>
 
	<?php
	}
}
?>
 
	<?php
	$i++;
	}
	?>
</div>
 
 
 
 
 
</body>
</html>

( il est en entier comme tout les codes )
imgclass.php :

Code:

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
<?php
 
class Img{
 
	static function creerMin($img,$chemin,$nom,$mlargeur=100,$mhauteur=100){
		// On supprime l'extension du nom
		$nom = substr($nom,0,-4);
		// On récupère les dimensions de l'image
		$dimension=getimagesize($img);
		// On cré une image à partir du fichier récup
		if(substr(strtolower($img),-4)==".jpg"){$image = imagecreatefromjpeg($img); }
		else if(substr(strtolower($img),-4)==".png"){$image = imagecreatefrompng($img); }
		else if(substr(strtolower($img),-4)==".gif"){$image = imagecreatefromgif($img); }
		// L'image ne peut etre redimensionne
		else{return false; }
 
		// Création des miniatures
		// On cré une image vide de la largeur et hauteur voulue
		$miniature =imagecreatetruecolor ($mlargeur,$mhauteur); 
		// On va gérer la position et le redimensionnement de la grande image
		if($dimension[0]>($mlargeur/$mhauteur)*$dimension[1] ){ $dimY=$mhauteur; $dimX=$mhauteur*$dimension[0]/$dimension[1]; $decalX=-($dimX-$mlargeur)/2; $decalY=0;}
		if($dimension[0]<($mlargeur/$mhauteur)*$dimension[1]){ $dimX=$mlargeur; $dimY=$mlargeur*$dimension[1]/$dimension[0]; $decalY=-($dimY-$mhauteur)/2; $decalX=0;}
		if($dimension[0]==($mlargeur/$mhauteur)*$dimension[1]){ $dimX=$mlargeur; $dimY=$mhauteur; $decalX=0; $decalY=0;}
		// on modifie l'image crée en y plaçant la grande image redimensionné et décalée
		imagecopyresampled($miniature,$image,$decalX,$decalY,0,0,$dimX,$dimY,$dimension[0],$dimension[1]);
		// On sauvegarde le tout
		imagejpeg($miniature,$chemin."/".$nom.".jpg",90);
		return true;
	}
 
	static function convertirJPG($img){
				// On cré une image à partir du fichier récup
		if(substr(strtolower($img),-4)==".jpg"){$image = imagecreatefromjpeg($img); }
		else if(substr(strtolower($img),-4)==".png"){$image = imagecreatefrompng($img); }
		else if(substr(strtolower($img),-4)==".gif"){$image = imagecreatefromgif($img); }
		// L'image ne peut etre redimensionne
		else{return false; }
		unlink($img);
		imagejpeg($image,substr($img,0,-3). "jpg",90);
		return true;
	}
 
 
}
 
?>

c'est tout ce que j'ai ...

28/06/2013, 16h16
Celira

A quoi te sert la boucle while($i) ? Tu as déjà une boucle sur le contenu du dossier avec while($file=readdir($dir))Sans compter que là tu as une boucle infinie, while($i) boucle tant que $i à différent de false (autrement dit de 0) et tu ne touches pas à $i à intérieur de la boucle.

A part ça, ton code est presque bon. Il faut juste initialiser $i à l'extérieur de ton while($file=readdir($dir)) (sinon tu vas rester coincer à 1)
28/06/2013, 17h05
bybyx

bha je bloque sur

Code:

while ($i)

j'ai tout essayé 8O et ca marche pas ...

et ce while me sert de créer une variable d'incrémentation :mouarf:

while c'est juste une boucle, ça n'incrémente rien :koi: Essaye sans le while($i) ça marchera sans doute beaucoup mieux.
Au passage, pour récupérer l'extension tu as pathinfo qui fait ça très bien ;)

Code:

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
<?php
$allow_ext = array("jpg", 'png', 'gif'); 
$dos = "images/min";
$dir = opendir ($dos);
$i=1; // compteur initialisé hors de la boucle
?>
<div class="slider">
<?php
while($file=readdir($dir)){
	$text = pathinfo($file, PATHINFO_EXTENSION);
	if(in_array($text,$allow_ext)) {
	?>
<input type="radio" name="slide_switch" id="id<?php echo $i;?>"/>
<label for="id<?php echo $i;?>">
	<img src="images/min/<?php echo $file; ?>" width="100" />
</label>
<br>
<img src="images/min/<?php echo $file; ?>"/>
<!--nom de l'image	<h4>  ?<php echo $file; ?></h4> --->
	<?php
	$i++;
	}
}
?>
</div>

28/06/2013, 18h14
bybyx

de la façon que tu as fait, le problème les id seront égal = 1 :aie:

while me sert a crée mes images ainsi de suite et tu obtiens bien la génération automatique de id1,id2,id3...
28/06/2013, 18h22
Celira

Ben non, ya un $i++; à la ligne 21 justement pour ça.
On parcourt le dossier, et à chaque fichier image, on affiche et on incrémente $i.
28/06/2013, 22h34
bybyx

1 pièce(s) jointe(s)

ha oui j'ai trouvé ! merci c'est largement mieux par contre en suivant tes indications ca me donne les images de travers enfin pas droit et que les miniatures, ca vient du css je pense
Pièce jointe 122055
je viens de voir le css, je ne pense pas que ca viennent de la :cry: