Galerie photo JS

Bonjour a tous,

J'ai mis en pratique le tuto Galerie photo avec JavaScript mais je sèche sur un point : quand on clique sur une image j'aimerai qu'il y est un changement d'état qui indique au visiteur qu'il a déjà vu cette image. J'ai essayé avec la class a:visited img mais ça ne fonctionne pas car il faudrait pour cela que le lien pointe ailleurs que dans la page. Y a-t-il une possibilité de faire cela en javascript ou par toute autre moyen car je n'ai pas vraiment pas d'idée.

ma version de test ce trouve ici
http://mikamoon.free.fr/labo/

Merci d'avance

Si tu n'as pas 3000 photos, tu mets une session avec un array repli par des 0 qui deviennent 1 si visité

Houlà,j'aurais du préciser que mis a part le css ou je me débrouille, les autres langages sont pour moi compliqué. Peut tu m'expliquer plus en détail ton idée ou me renvoyer vers un tuto qui m'expliquerai ton propos. Merci en tout cas de ta réponses

Stok a écrit :
Houlà,j'aurais du préciser que mis a part le css ou je me débrouille, les autres langages sont pour moi compliqué.

Ben ça va être dur parce que là il faudrait écrire un peu de JavaScript, par exemple pour rajouter une classe aux liens cliqués.

En faisant ça de manière très crade (et schématique), ça pourrait donner:

<a href="url de l'image" onclick="this.className+='visited'"><img /></a>

Mais le but du script JS pour cette galerie de photos est d'externaliser le comportement, donc c'est en modifiant le script qu'il faudrait gérer cet ajout de classe. À vue de nez, cela peut se faire ainsi:

this.className += ' visited';
return false; // Et pour finir on inhibe l'action réelle du lien

La première ligne est à rajouter dans le script, au dessus de la seconde (logique).

Le fonctionnement obtenu est le suivant: au clic sur un des liens de la galerie:
- l'url de destination du lien remplace l'url de l'élément IMG contenu par le lien;
- le contenu du title du lien remplace le contenu du DT;
- le contenu du title du lien remplace le alt de la grande image;
- on ajoute "visited" à la classe du lien;
- on bloque l'action normale du lien.

J'ai opter pour la deuxième solution et cela fonctionne sauf sur IE (j'ai tester 6 et 8).
Dans le script j'ai rajouté la ligne

this.className += ' visited';

juste au dessus de celle là

return false; // Et pour finir on inhibe l'action réelle du lien

dans ma feuille de style j'ai rajouté

.visited
{
  border-style:none;
  filter : alpha(opacity=30);
  filter: progid:DXImageTransform.Microsoft.alpha( opacity=30);
  -moz-opacity : 0.3;
  opacity : 0.3;
}

quelqu'un a une idée ? ma version de test est toujours accessible ^^

http://mikamoon.free.fr/labo/

Stok a écrit :
J'ai opter pour la deuxième solution et cela fonctionne sauf sur IE (j'ai tester 6 et 8).

Qu'est-ce qui ne fonctionne pas au juste? La classe n'est pas ajoutée (à vérifier avec les outils pour développeur d'IE8 par exemple)? Ou bien c'est l'opacité qui ne passe pas?

Pour l'opacité, je dirais que c'est parce que:
- Dans IE 6-7, les liens n'ont pas le layout. Voir l'article sur le hasLayout dans IE.
- Dans IE8, ça vient sans doute du fait que la syntaxe utilisée est mauvaise (il faut utiliser -ms-filter avec une syntaxe bien particulière).

Stok a écrit :
Dans le script j'ai rajouté la ligne

this.className += ' visited';

Non, tu as rajouté la même ligne mais sans l'espace avant le "visited". Du coup lors du premier clic, le className devient "visited", au deuxième clic c'est "visitedvisited", au troisième clic c'est "visitedvisitedvisited", etc. L'espace évite ce problème (on obtient "visited visited visited" si on clique trois fois, ce n'est pas très propre, mais au moins ça marche).

Pour rappel, on peut visualiser avec Firebug ou un outil du même genre (outils pour développeur de Safari, IE8 ou Opera...) les modifications du code HTML (ou, pour être plus juste, les modifications du DOM). Ça permet de repérer ce genre de problème.

a écrit :
Qu'est-ce qui ne fonctionne pas au juste? La classe n'est pas ajoutée (à vérifier avec les outils pour développeur d'IE8 par exemple)? Ou bien c'est l'opacité qui ne passe pas?

Je dirais que l'opacité ne pose pas de problème, j'ai testé sur une class a:visited img toute simple et l'opacité change correctement une fois le liens visité sous IE6 et IE8

http://mikamoon.free.fr/labo/test.html

Donc je pencherai plutôt sur le fait que la classe n'est pas ajoutée correctement mais je n'ai rien trouvé pour affirmer cette thèse . En tout les cas merci de tes réponses.

Ps: j'ai modifié l'espace dans le script
Modifié par Stok (15 Apr 2009 - 15:22)

J'ai rejeté un œil à tout ça et en fait il s'agit bien de la transparence qui ne s'active pas correctement donc au niveau de l'ajout de la classe il n'y a aucun problème.

Pour IE8 le problème est réglé avec l'ajout de

  -ms-filter: alpha(opacity=30);
  -ms-opacity:0.3;

au niveau de la classe visited ce qui nous donne ça

.visited
{
  border-style:none;
  filter : alpha(opacity=30);
  filter: progid:DXImageTransform.Microsoft.alpha( opacity=30); 
  -moz-opacity : 0.3;
  opacity : 0.3; 
  -ms-filter: alpha(opacity=30);
  -ms-opacity:0.3;
}

Pour IE6 et IE7 ça ne fonctionne toujours pas donc cela vient sûrement des layout mais là je sèche , je ne comprends pas ce que je suis censé changé pour que cela fonctionne
Modifié par Stok (16 Apr 2009 - 20:49)

Si on simplifiait un peu? 6 syntaxes différentes pour l'opacité, bravo, c'est un record.

.visited {
	border-style: none;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
	opacity: .5;
}

-moz-opacity est obsolète depuis des années, et -ms-opacity n'existe pas.

Si le layout est nécessaire pour IE 6-7, il faut que les liens concernés aient un rendu de type bloc (display:block) et un zoom:1 par exemple, ou bien qu'ils soient flottants (et autres possibilités mais pas super intéressantes à priori). Je ne t'apprends rien vu que tu as lu l'article qui va bien.
Modifié par Florent V. (17 Apr 2009 - 14:42)