Discussion :

[puresprit]

Bonjour,

J'ai une base de données d'oeuvres d'art.

Dans mon appli, j'ai une page PHP qui affiche une Table contenant les caractéristiques de chacune des oeuvres (avec une pagination limitant à 100 maxi le nombre de lignes par écran)..

Chaque ligne de cette table correspond à un record de la base et affiche une vingtaine de champs : nom et prenom de l'artiste, date, dimensions, techniques, etc... L'un de ces champs (dans la table, c'est une cell TD) contient une VIGNETTE JPG figurant l'oeuvre correspondante.

L'utilisateur peut cliquer sur l'une quelconque de ces vignettes afin d'obtenir l'affichage de l'image originale de l'oeuvre, en grand format.

Il y a des milliers d'oeuvres, les images sources sont lourdes (jusqu'à 5Mo), les vignettes font quelques ko. Donc lors du clic, je fais un accès serveur, récupère la "BIG Image" et ré-affiche ma table en superposant par dessus un DIV contenant le ZOOM. Et c'est là où se pose mon problème.

J'aimerais en effet que lors de ce ré-affichage, il se passe 2 choses :
1. Que la table sous-jacente s'affiche (se positionne) sur la ligne qui a été cliquée : je fais ça très bien grâce à une ancre.
2. Idéalement, que le DIV contenant le zoom s'affiche RELATIVEMENT à cette ligne (juste en dessous) ET se SUPERPOSE à la table.

Et là, je rame :

• Si j'insère le DIV-zoom dans le flot de la table en lui associant un "position:relative"... il s'affiche en libèrant toute la place nécessaire entre la ligne concernée et la ligne suivante, dans le même plan, sans tenir compte de ma commande de superposition (z-index:1),
• Si je créee mon DIV à la fin de la table et le positionne en "position:absolute", il s'affiche en se superposant correctement à la table mais... je n'arrive pas à l'associer verticalement à la ligne concernée...

Avez-vous des suggestions ?
Merci pour votre aide !

[Invité]

Bonjour,

1/ un div en position:absolute; se positionne par rapport au 1er parent POSITIONNÉ qu'il rencontre (en remontant dans l'arborescence du DOM).
Il faut donc mettre le <td> parent en position:relative;.
Ainsi, le 1er parent positionné rencontré est ce <td>.

N.B. Avec un peu de code (HTML + CSS), on pourrait mieux te répondre...

2/

...les images sources sont lourdes (jusqu'à 5Mo)...

5Mo Pas bon.
Il faut redimensionner (physiquement) les images à leur taille maxi d'affichage. Question de performance (temps de chargement des images).

[puresprit]

Ca marche !

Je suis une bûche... Je n'avais jamais percuté sur le fait qu'on pouvait positionner un TD !... Tellement l'habitude de considérer que le formatage interne des tables obéit à des règles propres.....

Pour les images à 5Mo....... (maxi, en moyenne c'est plutôt 2 Mo) : c'est une contrainte de cahier des charges. Le client a des écrans Retina 27" et veut du détail.
En revanche, ça pose d'autres problèmes, notamment à la création des vignettes : la décompression du JPG pour créer chaque vignette transite par une BitMap monstrueuse qui parfois me fait atteindre la limite d'allocation-mémoire sur le serveur... une situation qui n'est pas simple à récupérer, en PHP. Sans parler des temps de calcul...

Merci en tous cas !

[gazza]

Bonjour,

Cas très intéressant ! Serait-il possible d'avoir le code final pour tester ?

Merci par avance

[Invité]

...Le client a des écrans Retina 27" et veut du détail...

OK, mais il n'est pas le seul à consulter son site, non ?

A ta place, je proposerai 3 tailles d'images :

• HD (haute définition), celle demandée par le client
• Normal (adaptée au écrans "normaux")
• picto

Avec :

• affichage de la "Normale" au clic sur le picto
• ajout d'une icône "HD" s'il veut avoir la version haute définition

N.B. Les internautes consultent de plus en plus sur leur smartphone.
2Mo c'est déjà beaucoup trop.