Galerie photo[RESOLU]

(reprise du message précédent)

Ben tu ne génères justement que les images, et le css fait le reste ...

On t'as donné la solution ici plus haut d'ailleurs... les MARGES .

Laurent >> je ne connais pas les spécifications par coeurs, mais justement soyons réalistes : une fois qu'on dit que css est "créé" pour la présentation, ça veut aussi dire "n'utilisez plus le code html pour la présentation", chose avec laquelle tu es certainement d'accord...

Pourquoi aller s'embêter et embêter les différents utilisateurs avec un tableau de mise en page, sans aucune valeur "sémantique" alors qu'une liste non ordonnées dont la présentation est gérée avec css fait très bien l'affaire et a les différents avantages que j'ai présenté plus haut...

Parce qu'alors, où s'arrête le truc ? refaisons nos sites avec des tableaux ...

même si du points de vue de l'accessibilité quelques personnes se débrouillerons un petit temps pour par exemple ne pas utiliser de tableaux imbriqués, il faudra un rien de temps pour qu'on se retrouve à nouveau dans le bordel duquel on tente de se sortir...

On a donc un script PHP fait sans difficulté, au résultat satisfaisant

Peut-être ajouter juste après la balise <table>:

<caption>Cliquez sur les vignettes suivantes pour accéder aux images</caption>

Maintenant, si Olivier préfère une liste, que de son côté il va peut-être faire plus facilement qu'un tableau... C'est bien aussi.

Pour une fois que chacun peut faire ses choix selon ses préférences : profitons-en

a écrit :
Ben tu ne génères justement que les images, et le css fait le reste ...

On t'as donné la solution ici plus haut d'ailleurs... les MARGES .

oui les marges ok, pas de problème mais ensuite au bout de 6 marges le retour chariot vient automatiquement ??

Ce n'est pas vraiment une question de retour chariot.

Si tu as un block conteneur de 600px de large, contenenta 36 images flottantes à gauche de 100px de large chacune, l'agent utilisateur va

- faire flotter les images, et donc les placer hors du flux à gauche les unes des autres

- faire passer les images (à partir de la 7ieme) à la ligne vu qu'il n'y a plus de place dans le bloc conteneur.

En plus c'est même mieux que ça :

si tu spécifies la largeur de ton block conteneur en pourcentage, tu pourras mettre un nombre variable d'images en fonction de la résolution, ce qui est bien pratique pour les gens qui ont un grand écran.

Note: si tu as le bouquins de Meyer, il y a un dossier la dessus (présenter une gallerie d'images).
Modifié par TriadPtale (18 Jul 2005 - 14:27)

imotep : la largeur de tes images étant connue, tu peux jouer sur la largeur du conteneur pour ne permettre que tes 6 images par lignes. L'ajustement se fait avec les marges...

TriadPtale a écrit :

Laurent >> je ne connais pas les spécifications par coeurs, mais justement soyons réalistes : une fois qu'on dit que css est "créé" pour la présentation, ça veut aussi dire "n'utilisez plus le code html pour la présentation", chose avec laquelle tu es certainement d'accord...

D'abord le problème immédiat d'Imotep. Si cela t'intéresse, nous en discuterons après
Modifié par Laurent Denis (18 Jul 2005 - 14:36)

justement messieurs j'aimerais savoir comment faire pour spécifier un nombre d'image si on utilise un width en pourcentage.

Pas tout lu, la flemme je lirais le reste plus tard !

Mais NON, le tableau (et ce n'est pas par extremisme puisque j'ai justifié (pertinament par ailleurs le fait que ce n'est pas adapté) n'est pas adapté.

Tableau = relation entre ligne et/ou colonnes
Ici, il n'y a aucune relation entre les lignes ou les colonnes, c'est juste un enchainement de bidules les uns à la suite des autres, ça n'a vraiment pas la gueule d'un tableau, et j'ai pas employé les termes sémantique, tabulaire ou autre ni extremisme, j'ai juste dit que ça n'avait pas la structure d'un tableau et ça n'en est pas un.

S'il veut l'utiliser pour la présentation (ce qui serait ici uniquement son rôle), libre à lui, c'est pas mon problème, mais c'est pas adapté.

Que sont les 6 premières vignettes (une ligne) par rapport aux 6 suivantes ? (la ligne qui suit), rien du tout. Que sont les X premières vignettes en colonnes par rapport aux X (ou X-1) suivantes de la seconde colonnes, encore rien du tout.

Ahh oui parcequ'en bas du tableau en plus, on aura peut être des cellules vides qui ne servent à rien du tout, mais c'est pas grave, c'est comme les <div>&nbsp;</div> ou les <div></div> c'est rigolo

Nan, là franchement c'est archi pas adapté du tout et pas la peine de brandir la sacro sainte norme ou je sais pas quoi, il suffit d'être logique

Et générer

<ul>
<li><img /></li>
...
</li>
</ul>

par rapport à

<table>
<caption>bla bla pwet tableau vilain ici</caption>
<tr>
<td><img /></td>
// attention, faut en compter 6 !  pas plus, pas moins ! sinon c'est la ca-ca, c'est la ca-ta, c'est la catasrooooophheuuuh
...
</tr>
<tr>
// et rebelotte, ca-ca... strophe
</tr>
</table>

Je vois mal la simplicité du bordel

Tu me dépasse Laurent, t'es un paradoxe sur pied (sauf si t'en a pas (des pieds)), l'autre jour, tu dis "la normes dit que bla bla, c'est pas valide, pas de doctype" ou des trucs du genre et là tu dis "boarf, la norme, elle craint, elle est pas complète"

(propos volontairement tronqués et exagérés, mais l'idée est là )


J'en ai oublié pas mal, mais faut lire qu'il y a des smileys qui rigolent partout hein ! j'attaque personne et je suis de bonne humeur
Je voulais juste le dire avec humour mais le fond de ma pensée reste le même

Modifié par Olivier (18 Jul 2005 - 15:39)

Je suis d'accord qu'il vaut mieux utiliser une liste plutôt qu'un tableau. Voici mes raisons, qui ont été dites dans le fil de discussion :

1. Les tableaux ne devraient pas servir pour la présentation (ca peut arriver, mais en général ca ne devrait pas servir à ca). Puisqu'une liste fonctionne très bien, pourquoi utiliser un tableau ? Pourquoi tondre le gazon avec une pelle lorsqu'on a déjà à disposition une tondeuse à gazon ?

2. Lorsqu'on va générer le tableau dynamiquement, on devra faire des conditions pour décider lorsqu'on ferme une ligne (tr) pour en ouvrir une autre, selon le nombre de photos qu'on veut par ligne. On demande des ressources au serveur pour rien. Évidemment, ces ressources demandées ne sont pas énormes, mais c'est quand même des efforts qu'on demande au serveur juste pour la présentation visuelle des données, alors qu'une liste peut très bien fonctionner.

3. Comme mentionné, on se retrouve avec des cellules vides si le nombre d'images ne correspond plus exactement au nombre d'images qu'on avait prévu par ligne.

La question n'est pas de prouver que les tableaux ne sont pas un mal ici, mais plutôt pourquoi utiliser un tableau plutôt qu'une liste ? Il faut justifier l'utilisation du tableau, et non pas trouver des arguments comme quoi c'est acceptable.

Oui on peut décider de choisir l'un ou l'autre, mais la liste me semble mieux adaptée, sémantiquement correcte, et au niveau technique, c'est déjà beaucoup plus simple à générer et à modifier.
Modifié par Merkel (18 Jul 2005 - 15:54)

Bon, imotep dit nous quand tu as résolu ton truc, histoire qu'on continue la discussion

imotep a écrit :
justement messieurs j'aimerais savoir comment faire pour spécifier un nombre d'image si on utilise un width en pourcentage.

Tu viens de mettre en évidence la limite de la galerie de vignettes full CSS : pour ne pas avoir à introduire un balisage ou une class dans le HTML, il faut la placer dans un conteneur de largeur fixe pour figer le nombre de vignettes par lignes.

Dans un conteneur de largeur relative (%), il faut faire intervenir:
- soit un élément du type <br /> doté d'un clear intercalé entre chaque groupe de 6 vignettes
- soit une classe similaire appliquée toutes les 6*n +1 vignettes pour une ligne de 6.

Ce n'est pas problématique, puisque tu génères ta planche en PHP.

Mais il reste à voir comment ce dispositif va s'intégrer dans le reste de ta mise en page : que donnera l'espace à droite des vignettes dans une grande largeur ? Que donneront les rangs de 6 vignettes dans une largeur trop petite pour elles ?
Et à comparer cela avec le comportement de ton tableau de présentation.

Partant de là, et sachant que ton tableau de présentation sera valide et même accessible si (et seulement si) tu le conçoit dans ce but... tu es maître de ton choix.

Un critère, déloyal, mais important : si je suis privé de l'usage d'une souris ou de tout autre dispositif de pointage, laquelle des deux solutions sera la plus facile en navigation au clavier ?

<edit>On discute APRES le tag RESOLU, messieurs. Mais ça s'annonce amusant et instructif </>
Modifié par Laurent Denis (18 Jul 2005 - 17:26)

Et bien faisons notre petit tour de "fais donc ça, c'est mieux que ça !"

Pourquoi se casser le c*l avec 6 vignettes en fluide alors qu'on peut en mettre plus, je vois pas l'interet de perdre de l'espace exprès alors que je vois mal en quoi ça generais d'en avoir 8 9 ou même, attention, seuleument pour les audacieux, 10 vignettes !!

Au delà de tableau/pas tableau, là c'est vraiment

Et justifier l'utilisation d'un tableau et de tout le binz côté serveur (ce que je voulais souligner avec le

moi même a écrit :

// attention, faut en compter 6 ! pas plus, pas moins ! sinon c'est la ca-ca, c'est la ca-ta, c'est la catasrooooophheuuuh

, etc nan, ça me paraît maladroit et plutôt catégorique

Une solution alternative offre bien plus d'avantages et de simplicités. Didju !

Proposer d'utiliser un tableau pour ce genre de bidule devrait se faire avec plus de précaution, sinon c'est la porte ouverte aux tableaux de mise en page tout partout et adios tout le boulot que se casse le train à faire...
Surtout quant c'est moins adapté !!!!

Merkel m'a bien fait marrer avec sa pelle pour tondre le plouse, c'est vrai que c'est à peu près pareil...
C'est comme si tu disais, "wé mais avec ma pelle je dégomme pas les fleurs sur la bordure et je peux trondre la plouse juste en dessous alors qu'avec la tondeux j'aurais tout défoncé"

Enfin bref... qu'imotep fasse comme il veut, on lui a expliquer les 2 solutions.

Tableau = tu te casses la tête, c'est pas adapté, t'as plus de code, côté serveur, ça fait travailler pour rien tout ça pour de la présentation
Liste = très simple à mettre en place, tout à fait adapté, moins de code, rien côté serveur sauf la génération normale du contenu, aucun point de mise en forme.

Et pour l'histoire des "6" et pas plus pas moins, c'est de la place gâchée !
La balle est dans ton camp.

<edit>Un bon tableau est un tableau (mort ^^) avec des <th> justifié ! (entre autre)
Déjà si y a pas moyen de mettre des <th> justifié, y plus qu'à rentrer à la maison et chercher un autre balisage ! Non mais !</edit>
Modifié par Olivier (18 Jul 2005 - 17:29)

Le bidule à coup de <br /> ou de classe c'est déjà "moins pire" mais ça reste de la bidouille surtout pour quoi c'est faire !!

Limité à X photos pour une largeur fixe, okay, je vois la logique
pour une largeur fluide beaucoup moins déjà ^^ (je me répète, c'est l'âge !)

Lâchons du leste sur notre foutu volonté de contrôle absolu de tout et n'importe quoi Hein Laurent (smiley qui sifflote ^^)

Laurent Denis a écrit :

<edit>On discute APRES le tag RESOLU, messieurs. Mais ça s'annonce amusant et instructif </>

J'insiste sur le fait qu'il vaudrait mieux discuter avant de proposer une solution. Il faut d'abord définir si dans son cas et en général, il vaut mieux utiliser un tableau ou une liste (non-ordonné ou de définition) ou des images une à la suite de l'autre, ou une pelle.

Une fois qu'on sera fixé sur ce qui est le plus adapté et justifié, là on pourra adapter la présentation pour ce qu'il désir.

À moins qu'Imotep considère nos discussions comme de la pollution dans son sujet, j'aimerais mieux qu'on continue. As-tu une objection Imotep ? Si ca te déplaît, on pourrait créer un sujet en parallèle pour éviter de noyer ton sujet dans nos discussions de paysagistes.
Modifié par Merkel (18 Jul 2005 - 17:48)

Bah ça le concerne tout de même !!!
C'est pour son cas précis qu'on se pose la question, pourquoi ouvrir un autre topic

La discussion m'interesse, biensur, et elle ne me dérange point, puisqu'elle m'aide a comprendre prècisement l'utilisation de tel ou tel tag!
Mais bon quand olivier tu dis :

a écrit :
Et pour l'histoire des "6" et pas plus pas moins, c'est de la place gâchée !
La balle est dans ton camp.

je ne comprends pas !
Je compte faire une galerie de photos de vacance, je pense donc en présenter au minimum 40, ce qui ferait si on se fixe sur 40, 6 lignes de 6 images plus 4 autres mais bon après tout je peux faire en sorte qu'il y en ait 42 se qui ferait 7 lignes !

le block qui contient mes images est d'une largeur de 80%.
il vaudrai peut être mieux dans ce cas de faire la largeur fixe si un utilisateur utilise une petite fenetre ???
mais qui dit largeur fixe dit aussi un problème de choix de résolution ...
d'ou le pourquoi j'utilise la fluidité .
Mais bon je pourais faire en sorte de trouver la largeur adequate pour que lors d'une réduction de fenetre mes images ne soient pas en bagaille ...

Mais étant donne une largeur fluide, en pleine page ça en me pose pas de problème, mais pour une reduction de fenetre comment faire pour qu'il passer a la ligne suivante ???

la est le gros prolème

imotep a écrit :
mais pour une reduction de fenetre comment faire pour qu'il passer a la ligne suivante ???

Voilà, déjà, en utilisant un tableau avec 6 cellules par ligne, tu force la fenêtre à avoir un certain minimum pour consulter les images. En utilisant une liste flottante (float), si la personne réduit la fenêtre, les images passeront automatiquement à la ligne suivante. Quelqu'un pourrait donc réduire la fenêtre de beaucoup afin d'obtenir au final une image par ligne. Elles se positionneraient automatiquement une à la suite de l'autre. C'est ce que tu veux ? Si c'est le cas, faut oublier le tableau qui lui ne pourra pas faire de sauts de ligne comme ca, à moins qu'un truc CSS m'échappe?
Modifié par Merkel (18 Jul 2005 - 21:24)

non justement, je ne veux pas, lors d'une reduction de fenetre, que les images passent en colonne, je souhaite qu'il reste 6 cellules comme me l'offre le tableau.

Il est embêtant, cet Imotep
- vignettes bien réparties dans un conteneur de largeur relative à la zone d'affichage
- 6 vignettes par lignes en permanence, dernière ligne exceptée.

Ne vous plaignez pas : il ne vous demande pas que le bloc des 6 vignettes soit centré

Bon, avec le temps, de l'ingéniosité, ou simplement la bonne source, on y arriverait peut-être.

Bilan, dans le cas d'Imotep :
- validité identique
- conformité itou
- accessibilité identique (peut-être meilleure dans le cas d'un tableau de vignettes, en navigation au clavier, selon moi, mais c'est une discussion à mener à part)
- contraintes et limites techniques ausi embêtantes dans un cas et dans l'autre
- "sémantique" identique : que ce soit une liste de vignette ou une série de cellules de vignettes ne donne lieu à aucune exploitation particulière.
- temps de développement nettement plus long pour une solution que pour l'autre, pour Imotep.
- ne pas utiliser des tableaux de présentation est un choix recommandé, mais simplement un choix à l'heure actuelle. En utiliser exige des précautions, mais c'est aussi un choix à l'heure actuelle, dans des conditions à mettre en avant...

La question devient : dans quelles conditions (restrictives) un tableau de présentation est-il un choix à envisager en l'état actuel de l'art et des implémentations des standards ?
Modifié par Laurent Denis (18 Jul 2005 - 21:59)

étant donné que je veux 6vignettes que la fenetre soit en pleine page ou bien diminué, le tableau est la seule solution ou on peut le faire avec les puces dans mon cas?

mais j'ai regardé pas ma de script de galerie et il utilise tous le table, pourquoi je sais pas !
Modifié par imotep (18 Jul 2005 - 21:59)

ha oui ptite question sans rapport <table> et <ul>

dans le script javascript, lors du chargement de la grande image, on incorpore en fait le title du lien de la miniature au alt de la grande image!
est il possible de recuperer le alt de la miniature et de l'incorporer dans le alt de la grande image ?

function displayPics()
{
	var photos = document.getElementById('galerie') ;
	// On récupère l'élément ayant pour id galerie
	var liens = photos.getElementsByTagName('a') ;
	// On récupère dans une variable tous les liens contenu dans galerie_mini
	var big_photo = document.getElementById('grande_image') ;
	// Ici c'est l'élément ayant pour id big_pict qui est récupéré, c'est notre photo en taille normale

	var titre_photo = document.getElementById('image').getElementsByTagName('h2')[0] ;
	// Et enfin le titre de la photo de taille normale
	
	// Une boucle parcourant l'ensemble des liens contenu dans galerie_mini
	for (var i = 0 ; i < liens.length ; ++i) {
		// Au clique sur ces liens 
		liens[i].onclick = function() {
			big_photo.src = this.href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
			big_photo.alt = this.title; // On change son titre
			titre_photo.firstChild.nodeValue = this.title; // On change le texte de titre de la photo
			return false; // Et pour finir on inhibe l'action réelle du lien
		};
	}
}
window.onload = displayPics;
// Il ne reste plus qu'à appeler notre fonction au chargement de la page
		

[/i]