Affichage d'une image dans la même page

[Nerva]

Bonjour,

Je ne sais pas si c'est la bonne rubrique mais tant pis.

Dans une page html, en cliquant sur les vignettes, je fais apparaître les "grandes images" dans une nouvelle fenêtre de la manière la plus classique du monde :

<td width="196" valign="middle"><div align="center"><a href="images/test_gr_001.jpg"><img src="images/test_pe_001.jpg" width="150" height="190" border="0"></a></div></td>

Quelle sont les possibilités existantes pour afficher l'image dans la même page partie inférieure sans malmener la mise en page du tableau ?

De plus, je désirerai pouvoir refermer la grande image en cliquant dessus.

Merci d'avance.

[ElMoustiko]

Tu as le JavaScript qui te permet de faire tout cela sans aucun chargement de page, il n'y a que l'image à charger. Tu peux gerer l'affichage ou le "cachage" de l'image via une simple fonction JS. Attention par ailleur à prévoir une solution de secours pour le cas ou le JS soit desactivé, en ouvrant l'image dans une nouvelle fenetre comme ce que tu fais actuellment si le JS est desactivé.

Par ailleur tu peux le faire via PHP (ou n'importe quel langage serveur, mais je ne connais que le PHP), en rechargeant la page cette fois ci.

Par exemple en faisant des liens du type : index.php?image=titre_image

Ensuite via PHP tu gère l'inclusion des images (stockées dans une bdd par exemple ou grace à la fonction glob(); ou .... ) en faisant quelque chose du style :

if(isset($_GET['image']))
{
   echo "<img src=\"titre_image\" alt=\"titre_image"\ />";
}

[Nerva]

Malheureusement, je ne connais pas le PHP... J'ai bien trouvé un script - assez costaud - qui permet de faire ce que je veux mais c'est une vraie galère pour conserver la mise en page initiale car mes images sont dans un tableau.

[ElMoustiko]

Je suis en train de faire quelques exemple d'utilisation du JavaScript, et ton problème m'a donné un exemple de plus, j'ai donc fait un petit truc tout c*n mais qui marche très bien et qui n'entrave pas l'acces aux photos si le JS est desactivé, ce qui donne ceci :

http://www.elmoustikoblog.net/tutos/js/galerie/index.html

Je te laisse allez farfouille le code source, je ne l'ai pas encore commenté, ca ne saurait tarder vu que je declinerais mes exemples en tutoriels

Pour toute remarque sur cet exemple, je suis tout ouie, je viens de le coder vite fait, je ne suis pas sûr qu'il soit à l'abris de bugs.

@++

[Loupilo]

http://www.elmoustikoblog.net/tutos/js/galerie/index.html

J'en veux d'autres des comme ça

Excellent !

Amicalement,

Loupilo

[ElMoustiko]

D'autres vont venir d'ici peu loupilo Il me faudrait des idées pour voir ce qu'il est possible de faire.

Déjà j'attend de voir l'avis des experts sur ce exemple, voir s'il y a des soucis auxquels je n'ai pas pensé, etc... et puis il faudrait l'améliorer un peu aussi.

[LaurentDenis]

Je crois que c'est une très belle utilisation de javascript :

- effectivement non obstructive

- simple (pas de traitement trop lourd côté client)

- et qui apporte vraiment quelque-chose à l'utilisateur.

Ce n'est pas si souvent qu'on voit ce genre de script

Bravo !

Pour améliorer, quelques pistes auxquelles tu as peut-être déjà pensé :

- éviter les liens adjacents pour les miniatures et revoir les textes des alt pour les rendre plus signifiants.

- mettre en lien des miniatures non pas l'image brute mais une page en bonne en due forme. Peut-être sous la forme "images/photo1.html", le script se chargeant de modifier l'extension en "photo1.png" ?

Cette page "vue en taille normale" pourrait comprendre, outre l'image en taille normale et les éléments de navigation du site :

- le descriptif texte de l'image (pour évacuer le problème du "longdesc")

- les liens vers les vues normales de l'image précédente / suivante.

Bref, elle donnerait au visiteur sans javascript (et aux lecteurs d'écran...) une expérience de navigation aussi confortable qu'au visiteur avec javascript.

Tiens, au passage, dans un photoblog, je verrais bien les commentaires dans cette page "image agrandie"...

[ElMoustiko]

On va dire que c'est parceque c'est le matin, mais j'ai pas compris grand chose ! Va falloir que je repasse tout à l'heure pour vérifier que je n'ai rien compris

Sinon

- éviter les liens adjacents pour les miniatures et revoir les textes des alt pour les rendre plus signifiants.

Tu veux dire mettre les miniatures dans une liste (<ul>) parceque c'est une liste d'images, si c'est ça, oui c'etait prévu, mais je n'y avait a vrai dire pas pensé au premier jet et je n'y ai pas retouché. Pour le texte des alt, euh c'est à l'utilisateur final de changer le texte , mes images étant loin d'etre parlantes, je n'ai pas attribué d'attribut alt très parlant, je devrais peut etre prendre de vraies photos pour donner un exemple plus concret.

- mettre en lien des miniatures non pas l'image brute mais une page en bonne en due forme. Peut-être sous la forme "images/photo1.html", le script se chargeant de modifier l'extension en "photo1.png" ?

Euh, tu veux dire refaire la même page (donc X pages html pour X photos) qu'ici en incluant la photo portant le nom de la page. Oui c'est une idée (en corrigeant l'adresse du lien via JS en titre.png plutot que titre.html), mais à vrai dire l'idée de faire X pages pour X photos me rebute, d'autant que pour ce genre de choses on imagine qu'on ne veuille pas utiliser de langage serveur (bien que ca ne soit pas incompatible). Par ailleur toi qui parlais de degradation acceptable pour IE par exemple avec les CSS, tu parles de degradation acceptable pour allez un chiffre bidon 80% des utilisateurs, dans notre exemple les non utilisateur du JS sont moins de 80% des utilisateurs et la "degradation" est très acceptable. Mais bien sûr si l'on peut faire mieux, pourquoi ne pas se gener pour faire le mieux pour le plus d'utilisateurs, certes Mais encore une fois l'idée de X pages pour X photos me rebute

- le descriptif texte de l'image (pour évacuer le problème du "longdesc")

- les liens vers les vues normales de l'image précédente / suivante.

Oula oui ça serait tip top ;p on pourrait ecrire dans un paragraphe via JS la valeur de l'attribut longdesc s'il est renseigné. J'essairai d'y songer, je pense le noter en commentaire dans le script pour y revenir plus tard parceque je suis sur un menu déroulant utilisant le JS en fichier externe (c'est pas evident en faisant un script court et efficace )

Pour les suivants / précédent, il faudrait que je vois si c'est faisable facilement.

Ahh bah finalement j'ai l'air d'avoir tout compris. Merci des ces pistes d'optimisations, je pense qu'en utilisant une liste non ordonnée pour mettre les miniatures, j'aurais quelque chose de plutot pas mal non ?

Modifié 26 Septembre 2004 par ElMoustiko

[LaurentDenis]

Ah... Excuses-moi, je ne suis pas toujours très clair.

Pour être honnête, je suis (involontairement) très orienté sur une utilisation bien précise de ton script : on m'a demandé le CMS d'un photoblog à base de DotClear... où ton script conviendrait très bien au cahier des charges de la page d'accueil

Donc mon idée de page HTML complète pour chaque image allait effectivement avec l'idée d'un site dynamique.

Mais tu as tout à fait raison : dans la version de base actuelle de ton script, l'affichage brute des images en grand format est effectivement une dégradation tout à fait acceptable dans les navigateurs graphiques sans javascript activé.

Surtout que je ne compte plus les modèles de galeries de photos que j'ai regardées et qui sont à peu près inutilisables hors d'une configuration utilisateur bien précise

Pour l'accessibilité:

- la liste non ordonnée serait impeccable.

- pour inciter les gens à bien utiliser l'attribut alt, que dirais-tu de mettre pour les miniatures quelque-chose comme alt="Ecrivez ici la description de la miniature" (et sur le même principe pour les images en taille normale) ?

[ElMoustiko]

Ahh wé en fait tu voulais que je te fasse le boulot

Plus sérieusement, tes indications pour l'optimisation du script sont tout à fait juste, et on arriverais à un script vraiment complet en les appliquant.

Il serai judicieux aussi d'utiliser les listes de definition pour la photo taille normale avec titre de la photo, photo, et description de la photo, (dt, dd, dd)

En recuperant le title de l'image, le longdesc et le herf du lien.

Pour celà il faudrait expliquer à l'utilisateur final qu'il devra indique un titre à son image via title et une description via longdesc... peut on esperer un tel comportement de tous ? j'en doute... Donc ca reste dans les commentaires au cas où l'envie me prenne de le faire tout de meme.

[ElMoustiko]

Bon bah j'ai réussi à faire un truc finalement

http://www.elmoustikoblog.net/tutos/js/galerie/index.html

Donc les titres des photos sont récupérés via le title du lien des miniatures (on pourrait le faire en mettant le title sur les img, ... apres je ne sais pas ce qui est le mieux)

Le texte du dt est remplacé en fonction de l'image affichée.

Après reste à savoir si c'est très accessible... la desactivation du JS entraine une perte d'information directe sur la photo puisque en affichant que la photo on n'affiche pas son titre... place aux experts !

Sinon pour le longdesc, c'est un lien vers un fichier *.txt c'est bien ça ? auquel cas je ne vois pas trop comment récuperer le texte via JS...

Donc dans cette version tu as affichage du titre de la photo en foction de la photo.

liste non ordonnée pour les miniatures, liste de def pour la photo et son titre (si on arrivait a recuperer le longdesc, on pourrait ajouter un dd contenant ce longdesc).

Voilà chef J'ai des doutes sur l'accessibilité du contenu, je te laisse donc me dire ce qu'il en est.

Modifié 26 Septembre 2004 par ElMoustiko

[Sylvain Trovalet]

Je trouve ça très réussi pour ma part.

J'ai fait un test sans javascript et ça passe bien aussi.

Pour l'histoire du titre perdu et bien il faut en revenir à l'idée de laurent et faire une page html par image.

En tout cas Bravo.

[ElMoustiko]

Oui mais sans faire X pages pour X photos, l'information n'est donc pas utilisable pour les non utilisateur de JS... donc d'un point de vue accessibilité au contenu, c'est moyen moyen... ensuite il faut se demander si ces informations sont indispensables... a priori si l'on souhaite les indiquer c'est que OUI... si c'est un petit plus, je pense qu'on peut s'en contenter... non ?

Si vous avez des idées de choses ou d'autre utilisant le JS je suis preneur pour tenter de faire une solution JS extraite de la page html et accessible (j'ai bien dis tenter ! c'est pour montrer qu'il ne faut pas sataniser le JS dans tous les cas).

[Sylvain Trovalet]

je ne vois pas le problème d'accessibilité. En fait le JS apporte un plus graphique ou d'ergonomie et rien de plus, de même le js est utilisé dans les formulaires pour faciliter la gestion mais il n'empêche que la vérification serveur est tout de même obligatoire.

[ElMoustiko]

Et bien sans le javascript on a acces à la photo via un lien vers celle ci, mais par ailleur on a pas acces au titre de cette photo (on pourrait imaginer utiliser le longdesc en tant que description de la photo et l'afficher de la même facon que le titre via JS) donc il y a perte d'information, celle ci n'est accessible que via le code source de la page contenant les miniatures. Il y a un donc un manque d'acces au contenu, les informations données ne sont pas complètes.

Mais tout dépend du but recherché, si le titre est seulement un petit plus qui n'est pas necessaire a l'image, certe il n'y a pas de problème, mais si l'on souhaite donner le titre tout en desactivant le JS (a moins de faire X pages pour X photos ce que je voulais eviter) c'est impossible (a moins qu'il n'y ait une solution alternative), donc il y a bien un probleme d'acces aux données du document.

Ou bien trouves tu que non ? (je cherche à me renseigner pour faire un truc propre, fonctionnel, utilisable par tous quelque soit la config machine et logicielle)

@++