Galerie photos JS "lightbox" et navigation clavier

Bonjour,

Suite à pas mal de commentaires que j'ai lu sur les limites de ce script dans le cas d'une navigation clavier j'ai essayé de voir s'il n'était pas possible d'améliorer cela.

En fait c'est assez simple. Il suffit d'avoir une ancre

<a href="#" id="ancre_bottom" name="ancre_bottom"></a>

que l'on place en fin de flux du document.
Cette ancre peut soit être directement dans le code source soit être générée en js avant le lancement du script lightbox.

après il suffit d'avoir l'instruction

window.location='#ancre_bottom';

ajoutée dans le script

	if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){
anchor.onclick = function () {window.location='#ancre_bottom'; myLightbox.start(this); return false;}
			}

Il s'agit des lignes 181 à 183 de lightbox.js

Le résultat de cet essai peut être vu ici :
http://clb56.freezee.org/test_upload/galerie_resultat.php?galerie=galerie1

S'il y a des avis pour continuer à avancer...

merci
Modifié par clb56 (02 Sep 2006 - 10:16)

Bonjour,
Je te suggère
1 - de modifier ton style personnalisé :

 #galerie_mini a:hover img,
#galerie_mini a:active img,
#galerie_mini a:focus img
             {
             border-color:red;
             }
           

pour que la bordure rouge de la vignette sélectionnée au clavier soit visible pour ie et ff.
2 - On ne voit pas l'information title
Modifié par chmel (03 Sep 2006 - 23:19)

Bonjour chmel,

a écrit :

Je te suggère
1 - de modifier ton style personnalisé :

#galerie_mini a:hover img,
#galerie_mini a:active img,
#galerie_mini a:focus img
{
border-color:red;
}

Oui tu as raison c'est mieux , je corrige...

... Mais

a écrit :

pour que la bordure rouge de la vignette sélectionnée au clavier soit visible pour ie et ff.

Pas tout à fait, cela fonctionne avec Firefox mais pas avec IE puisque ce dernier n'interprète de toute façon pas a:focus

a écrit :

2 - On ne voit pas l'information title

Avec IE tu veux dire ?

Oui c'est un de ses comportements agaçants que de mettre en infobulle le alt de l'image qui dans mon cas prend le pas sur le title du lien. Je pense que c'est facile à corriger en mettant pour l'image le même title que le lien...

... Sauf que au point où j'en suis rendu :
Texte de commentaire de la photo présent en dur dans le document que le javascript soit actif ou inactif, j'aurais autant aimé que ce texte ne soit plus le contenu du title du lien mais soit simplement récupéré, mis en variable, réutilisé dans le script de présentation.

C'est ce dont je parle ici :
[modif de tuto] Galerie photos javascript

clb56 a écrit :

En fait pour tout dire je pense que le commentaire de la photo devrait être présent en dur hors js. Etre récupéré et utilisé dans le dt si js actif sans passer par le title du lien, parce que le title ne devrait pas servir à ça.

Et pour le redire je ne sais pas du tout comment faire pour éviter cette étape "commentaire photo" = "title du lien"

A part ça le sujet de la discussion en cours ne portait pas vraiment sur ça
Modifié par clb56 (04 Sep 2006 - 11:39)

Salut,

clb56 a écrit :

A part ça le sujet de la discussion en cours ne portait pas vraiment sur ça

Je ne suis pas hs:

#galerie_mini a:active img,

agit pour la navigation clavier IE. tu peux tester ici
On ne voit pas l'information title, toujours en navigation clavier
Pourquoi n'essais-tu pas une infobulle css
Modifié par chmel (04 Sep 2006 - 13:30)

chmel a écrit :

#galerie_mini a:active img,

agit pour la navigation clavier IE. tu peux tester

Effectivement ça fontionne. Je viens de tester ça en local.

comme mes sites de référence ne l'utilisaient pas je n'y avait pas pensé.

cela ne marche pas sur mes vignettes mais il faut que regarde ça de plus près.

a écrit :

On ne voit pas l'information title, toujours en navigation clavier

Oui je suis bien d'accord mais ce n'est pas le title lui même qui me posais souci mais le commentaire de la photo qui, de fait, y est placé et qui constitue un contenu tellement important qu'il ne peut être envisagé qu'il ne soit pas accessible.

La solution que j'ai élaborée répond déjà à cette question et ce commentaire n'a donc plus réellement besoin d'être dans le title. Ce title pour autant qu'il ait dans ce cas encore besoin d'exister pourrait tout aussi bien se réduire à un simple "agrandir l'image".

Mais, encore une fois, j'ai lancé ce sujet pour cette discussion concerne la question très spécifique de l'embarras que créé la navigation clavier dans le cadre du script lightbox lui même. C'est à dire à partir du moment où c'est la photo elle même qui est affichée.

Dit autrement par rapport à ce qui est relevé notamment ici :
http://www.fairytells.net/index.php/Javascript

fairytells.net a écrit :

Ce qui n'est pas le cas du script plus connu : Lightbox JS, qui ne fonctionne qu'avec beaucoup de difficultés si l'on utilise le clavier.

Modifié par clb56 (04 Sep 2006 - 14:04)

allez comme c'est moi qui t'ai revelé le probleme je te propose un debut de solution mais basé non sur lightbox mais sur thickbox qui offre plus de possibilité.

c'est visible ici http://www.fairytells.net/accessible_thickbox

c'est en cours d'optimisation pour fonctionner sur IE, par rapport à ta solution j'ai rajouté quelques point notamment l'alternative à l'image en grande taille et à l'image de chargement, je gere egalement le retour du focus au point de départ lorsque tu ferme l'agrandissement et lorsque tu sort de la thickbox pour éviter au focus de repartir au début de la page
Modifié par goetsu (08 Sep 2006 - 16:09)

Bonjour à tous,

1000 excuses goetsu, j'avais complètement zappé le fait que tu étais intervenu dans cette discussion.

J'irai visiter l'adresse que tu as mise en lien, ça m'intéresse bien.

Pour ma part je reposte pour indiquer que les choses ont bien avancé pour la navigation clavier dans le cadre du script lightbox.

L'ajout de cette instruction :

window.location='#ancre_bottom';

dans la fonction

updateNav: function() {

		Element.show('hoverNav');				

		// if not first image in set, display prev image button
		if(activeImage != 0){
			Element.show('prevLink');
			document.getElementById('prevLink').onclick = function() {
				[#red][b]window.location='#ancre_bottom';[/b][/#] myLightbox.changeImage(activeImage - 1); return false;
			}
		}

		// if not last image in set, display next image button
		if(activeImage != (imageArray.length - 1)){
			Element.show('nextLink');
			document.getElementById('nextLink').onclick = function() {
				[#red][b]window.location='#ancre_bottom';[/b][/#] myLightbox.changeImage(activeImage + 1); return false;
			}
		}
		
		this.enableKeyboardNav();
	}

Il s'agit des lignes 466 à 487 de lightbox.js tel que je l'ai un peu modifié.

La navigation par la touche tab devient du coup très simple et assurée.

J'ai au passage utilisé le Document Object Model pour créer des images en dur comme support des liens Suivant et Précédent au lieu des background-image (sur lien vide) initiales. Du coup le passage d'une image à l'autre sans utiliser les vignettes reste possible dans le cas css inactive et images chargées.

J'ai aussi revu quelques aberration de la feuille de style qui empèchaient un "enregistrer sous..." simple de l'image et avait supprimé le outline des liens Suivant et Précédent.

Résultat visible ici :
http://clb56.freezee.org/test_upload/galerie_resultat.php

Re salut,

je viens de regarder :
http://www.fairytells.net/accessible_thickbox/

houlala ça à l'air compliqué , je sais vraiment pas comment ils font pour sortir des javascript aussi complexes

Néanmoins deux petites choses me gêne.

Le commentaire que l'on peut souhaiter pour accompagner chaque photo et qui se trouve tenir (à tort je le crains) exclusivement dans le title des vignettes est complètement inaccessible en navigation clavier avec javascript inactif.
J'en parle dans ce post :
http://forum.alsacreations.com/topic-23-17556-1-modif-de-tuto-Galerie-photos-javascript.html#p132726

Pour ma part j'ai résolu le problème en repensant la liste des vignette elle même sous la forme, pour chaque item : lien vers image sur vignette + commentaire en dur dans un <p>

Dans le cas lightbox.js j'ai fait précéder l'appel à ce script de l'appel à un script recup_comment.js

Et ça fonctionne bien je trouve.

La deuxième chose que je trouve bizarre c'est le résultat si on ouvre les grandes images à partir des vignettes (et non des liens previous/next) avec les css inactives, ça fiche un sacré bazard dans la page. C'est pas un problème d'accessibilité d'ailleurs, simplement c'est très curieux.

goetsu a écrit :
je gere egalement le retour du focus au point de départ lorsque tu ferme l'agrandissement et lorsque tu sort de la thickbox pour éviter au focus de repartir au début de la page

C'est très juste, je m'en vais de ce pas régler ça de mon coté.

Merci pour la suggestion