Discussion :

[twisel]

bonjour,

j'ai un petit souci de positionnement de div dans un footer...

quand elles sont en float: right, aucun souci ça se positionne où je le souhaite, en bas à droite. en revanche, elles sont dans l'ordre inverse de ce que je voudrais (lecture de droite à gauche au lieu de gauche à droite)

si je les mets en float: left, l'ordre est bon, mais impossible de les placer correctement...

voici le lien vers un exemple: http://paul-le-quernec.fr/projets/pr...6&sortBy=annee

(il s'agit des rectangles gris en bas à droite)

voici le CSS:

Code :

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

1
2
3
4
5
6
7
8
9
.vignette_grise {
	background-color:#808080;
	width: 4%;
	height: 40%;
	float: right;
	margin-right: 5px;
	margin-top: 15px;
	cursor: pointer;
	}

merci d'avance pour votre aide!

[Invité]

Bonjour,
les images ne sont pas du tout optimisées (577,03 Ko !!).
Elles mettent 3 ans à s'afficher (chacune !)

Pour ton problème... quel problème ?
Toutes les cases sont grises !
Comment savoir quel résultat tu souhaites obtenir ? (dans quel ordre sont-elles censées s'afficher ?)

[rodolphebrd]

Bonjour,

pourquoi ne pas utiliser la propriété display:inline-block; pour .vignette_grise
Puis, dans le code HTML, placer la classe .infos après .vignette_grise pour plus de logique.

[rodolphebrd]

Comment savoir quel résultat tu souhaites obtenir ? (dans quel ordre sont-elles censées s'afficher ?)

quand elles sont en float: right, aucun souci ça se positionne où je le souhaite...
si je les mets en float: left, l'ordre est bon, mais impossible de les placer correctement...

[Candygirl]

Hello,

Une manière simple de contourner ton problème d'ordre d'affichage est d'attribuer un float right à un conteneur de tes vignettes puis un float left aux vignettes elles-mêmes.

[Invité]

@Rodolphe
Sais-tu dire si sur la page, les photos sont dans "le bon ordre" ou l'"ordre inverse" ?
Moi, pas.

[rodolphebrd]

En testant avec ta console et en jouant avec le flottement à droite puis à gauche tu y parviens.
Mais le cœur du problème n'est pas là.

[twisel]

merci pour vos réponses!

Bonjour,
les images ne sont pas du tout optimisées (577,03 Ko !!).
Elles mettent 3 ans à s'afficher (chacune !)

oui oui, je sais qu'elles sont grosses, mais bon, l'adsl est assez répandu de nos jours!
elles ont une résolution correcte pour un grand écran type 27"...

Pour ton problème... quel problème ?
Toutes les cases sont grises !
Comment savoir quel résultat tu souhaites obtenir ? (dans quel ordre sont-elles censées s'afficher ?)

si tu passes la souris sur les vignettes, actuellement le bon ordre des images est de droite à gauche.

Hello,

Une manière simple de contourner ton problème d'ordre d'affichage est d'attribuer un float right à un conteneur de tes vignettes puis un float left aux vignettes elles-mêmes.

déjà essayé (rapidement), ça n'a pas fonctionné comme je voulais...
(des histoires de width en % qui foutent un peu le bazar si je mets les vignettes dans une div...)

Bonjour,

pourquoi ne pas utiliser la propriété display:inline-block; pour .vignette_grise
Puis, dans le code HTML, placer la classe .infos après .vignette_grise pour plus de logique.

ça ne change pas vraiment le problème...

[Invité]

Une solution (encore plus simple que celle de Candygirl) :

• d'inverser l'ordre d'écriture des <span class="vignette_grise"> dans le code HTML : du dernier au premier ;
• en gardant ton CSS tel quel.

"Les derniers seront les premiers..."

Quant à la résolution des images...
Je suppose que je site n'est destiné qu'à des professionnels, bien équipés (VDSL + très grand écran).

Sinon, pour le commun des mortels (dont je fais partie, comme 95% des internautes), mon écran fait 1920px de large. Taille déjà raisonnable.
(j'exagérais, bien sûr en parlant de "3 ans". Mais déjà entre 1/2 et 2 secondes par image, c'est trop)
Je n'ose pas tester sur mon smartphone : j'ai peur qu'il explose !

Une solution serait de tester la résolution de l'écran du client (CSS media queries et/ou JavaScript), et de lui proposer (automatiquement) une résolution d'image adaptée.

Penser aussi au préchargement.

[twisel]

les images font 2000px de large, à peine plus que la résolution moyenne de n'importe quel portable.

je ne sais pas ce que tu as comme connexion, chez moi perso, sur un macbook et avec une vulgaire freebox v5 en wifi, ça s'affiche en quelques dixièmes de secondes! (en ayant vidé le cache évidemment)

sur le smartphone en 3G, là en effet, c'est plus long...

concernant l'ordre des vignettes, c'est un script (un ami me l'a fait), du coup, j'ose pas trop y toucher.


sinon, j'ai réessayé le coup de mettre les vignettes dans une div, comme le suggérait candygirl.
ça marche à peu près, même si je n'ai pas exactement le résultat que je voulais au départ... (les vignettes ont une taille fixe alors qu'avant elle s'adaptait à la taille de la fenêtre)

merci encore en tout cas!

le résultat:
http://paul-le-quernec.fr/projets/pr...6&sortBy=annee

[Invité]

Problème quand on réduit la taille de la fenêtre...
Les cases grises passent sur 2 lignes.

N.B. On peut voir le bout de code ?

A voir aussi => imageoptimizer (-20% à -30%, sans trop perdre en qualité)

[twisel]

Code php :

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
	<?php
		$imgdir = $dossierImg . "/"; 
                $allowed_types = array('png','jpg','jpeg','gif'); 
		$dimg = opendir($imgdir);//Open directory
		while($imgfile = readdir($dimg))
		{
		  if( in_array(strtolower(substr($imgfile,-3)),$allowed_types) OR
			  in_array(strtolower(substr($imgfile,-4)),$allowed_types) )
		  {$a_img[] = $imgfile;}
		}
 
		 $totimg = count($a_img);
		 for($x=0; $x < $totimg; $x++){echo "<span class='vignette_grise'><input type='hidden' value='" . $imgdir . $a_img[$x] . "'/></span>";}
 
		?>
 
 
 
 
		<script>
 
		$(".vignette_grise").hover(function(){
			var span = $(this).children("input").val();
			$("#changedImage").remove();
			var img = $('<img id="changedImage">');
			img.attr("src",span);
			img.appendTo("#conteneur");
		});
 
		</script>

[Torgar]

Merci de bien vouloir poster le code source généré !!!

[twisel]

Je pensais qu'il demandait le code du script...

Le code source généré, c'est tout con :

Code html :

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

1
2
3
4
<span class='vignette_grise'><input type='hidden' value='dossier_image/1.jpg'/></span>
<span class='vignette_grise'><input type='hidden' value='dossier_image/2.jpg'/></span>
...
...

[Invité]

@Torgar
En fait non, c'est bien ce code que je voulais voir.

Pour inverser l'ordre d'écriture des images dans le code html généré (!), remplacer simplement :

Code php :

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

for($x=0; $x < $totimg; $x++){echo "<span class='vignette_grise'><input type='hidden' value='" . $imgdir . $a_img[$x] . "'/></span>";}

par :

Code php :

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

for($x=$totimg-1; $x >=0; $x--){echo "<span class='vignette_grise'><input type='hidden' value='" . $imgdir . $a_img[$x] . "'/></span>";}

Et tu conserves ton CSS de départ.

[twisel]

cool! c'est exactement ce que j'ai cherché à faire dès le départ, mais comme je capte pas grand chose en php, j'ai préféré m'attaquer au css...

merci beaucoup!

[Invité]

En optimisant, ça donne :

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
$imgdir = $dossierImg . "/"; 
$allowed_types = array('png','jpg','jpeg','gif'); 
$dimg = opendir($imgdir);//Open directory
while($imgfile = readdir($dimg))
{
	if( in_array(strtolower(pathinfo($imgfile,PATHINFO_EXTENSION)),$allowed_types) )
	{ $a_img[] = $imgfile; }
}
$totimg = count($a_img);
for($x=$totimg-1; $x >=0; $x--){ // du dernier au premier
	echo '<span class="vignette_grise"><input type="hidden" value="' . $imgdir . $a_img[$x] . '"/></span>'."\n";
}
?>

L'extension d'un fichier s'obtient par :

Code :

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

pathinfo($imgfile,PATHINFO_EXTENSION)

Si c'est OK, pense à voter et à cliquer

[twisel]

non, il n'y a plus qu'une vignette qui apparait avec ton code! un poil trop optimisé!

sinon, concernant la taille des images, je viens de voir que la plupart font entre 150 et 250 Ko, avec quelques exceptions autour de 500Ko. ça semble correct, non?

[Invité]

Mon code fonctionne bien, pourtant.
Ou supprime le ."\n" (c'est juste un passage à la ligne dans le code)

As-tu vu => imageoptimizer (-20% à -30%, sans trop perdre en qualité)
200-250ko, c'est déjà beaucoup...

Et pour tester la validité des pages : http://validator.w3.org
(quelques erreurs de code à corriger)
Entre autres, on écrit : <br/> (pas </br>)

[twisel]

pour les images, elles sont déjà optimisées, si je baisse encore la qualité, le client va pas aimer... je vais voir avec lui ce qu'il en pense...

et oui, j'ai toujours cette fâcheuse tendance à écrire </br>... je sais pas pourquoi!

merci pour le lien!