Piwigo.org

Toff · 2006-11-19 22:44:01

acp a écrit:
Pour ce qui du valideur (?), c'est un bon moyen de "débugguer" son code, quand les différences sont trop importantes entre FF et IE également.

Oui d'ailleurs ma page ne devrait pas etre en xhtml transitional puisque pwg ne l'est pas à l'origine, c'est une boulette que j'ai fait quand j'ai modifié mon template.

EX-FTB a écrit:
Effectivement si le javascript est désactivé cela ne va pas faire joli, sauf si via le PHP/ template, j’arrive à tester le fonctionnement du javascript et de coder les title en connaissance de cause.

Malheureusement c'est pas vraiment facile de détecter si le javascript est activé en php, y'a bien un moyen qui consiste à positionner un cookie mais ça marchera pas sur la première page enfin c'est pas très clean quoi.

gbo · 2006-11-22 21:45:30

Je viens de publier le site avec des « infos bulles » plus sympathiques (en utilisant les infos de Toff).
Cela impacte la gestion des EXIF et des boutons suivants/précédents de la barre de boutons et sur l’image.
Les EXIF se complètent (lorsque c’est possible 300D) en appuyant sur le bouton du même nom.
Pour le moment le code est brut de fonderie, mais semble ok sous IE et FF.
Merci de me faire part de vos remarques.
Je compile l’ensemble des modifications et j’essaye de faire une synthèse dans les jours qui viennent.

gbo · 2006-11-30 21:21:32

Mon objectif était de laisser le plus de place possible pour la photo.
Pour cela j’ai supprimé les miniatures au bas de la photo dans picture.tpl
J’ai aussi adapté le haut de l’écran.

Quand je suis passé sur le site de TOFF, la présentation des miniatures lors du sur vol de bouton m’a emballé.

J’ai donc récupéré le code du javascript chez : http://www.dustindiaz.com/sweet-titles

Pour afficher les images dans les infos bulle, j’ai créé un attribut SWTTIPS qui contient le code HTML d’affichage de la miniature.
Idem pour l’affichage des métadata.

Attention sous IE les attributs « Alt » des images apparaissent aussi dans les infos bulle.
J’ai donc modifié le script pour élimer les « Alt » des images et récupérer les attributs SWTTIPS.

Les attributs « Title » restent en place ce qui fait que rien ne change si javascript est désactivé.

Kervinou · 2007-02-23 20:00:47

Hello !
Excelent donc ta galerie, tant la navigation que les miniatures...

Seulement, je ne comprends pas ce que tu entends par "j’ai créé un attribut SWTTIPS qui contient le code HTML d’affichage de la miniature"

Qu'est-ce que ca signifit ??!

Merci d'avance

gbo · 2007-02-23 21:39:13

Si tu regardes le code source d’une page d'image de mon site tu verras au niveau des boutons:

<img title="Dernier : Lycée thiers" swttips="<center><img src='./galleries/Nocturnes/thumbnail/TN-Photo_017_raw.jpg' />

Je récupère via le java script décris dans les autres post tout ce qui se trouve après swttips et je l'affiche en dessous du bouton.
L’idée m’est venue en regardant comment fonctionnait « TOOLTIP », un script qui affiche des bulles d’info en survolant du texte.
Je ne sais pas si cela est conforme aux normes du Web !
Mais cela fonctionne bien avec FF2 et IE6.

Comme le .Js pèse 5K, je ne l'utilise que pour les pages de photo.
Cela explique en partie mon besoin d'avoir des header dynamiques en fonction de la page.

Kervinou · 2007-02-23 23:32:39

Merci oui, j'ai récupéré sweet-titles, et je test çà
j'ai quelques pbs pour le moment...
++

MAJ 00h00

Rien à faire, je ne vois vraiment pas le rapport entre les 2 .js le .css et la balise swttips

J'ai essayé çà -> swttips="<center><img src='{last.IMG}' /></center>"
çà -> swttips="salut - {previous.IMG}"

Mais ca donne rien, j'ai bien la bulle qui est plus sympa avec par ex: (Premier : titre de l'image précédente)
et en dessous j'ai une espèce de partie de URL en rouge qui n'affiche rien du tout...

Là je capte pas du tout, et pareil pour la navigation sur la photo (a 3 zones), je vois pas non plus le rapport ;-)

Tant pis merci
++

MAJ 00:24

J'ai même essayé çà -> <a class="navButton prev" href="{previous.U_IMG}" title="{L_PREV_IMG}{previous.TITLE_IMG}" swttips="<img src='{previous.IMG}' class='thumbLink' id='linkPrev'>" rel="prev"><img src="{pwg_root}{themeconf:icon_dir}/left.png" class="button" alt="ici-prev"></a>

Mais y'a rien à faire, je vois pas du tout où est fait le lien avec la balise swttips, je le la vois pas dans les .js

Dernière modification par Kervinou (2007-02-24 00:19:28)

gbo · 2007-02-24 08:56:28

Dans le .js il faut récupérer le contenu de l'attribut swttips, par défaut il ne récupère que l'attribut title.

addEvent(curelm,'mouseover',this.tipOver);
addEvent(curelm,'mouseout',this.tipOut);
var svalue = curelm.getAttribute('swttips');

J’ai mis les infos complémentaires dans swttips, pour ne pas altérer le contenu des attributs titles ou alt.
Comme cela c'est OK avec ou sans java script et les moteurs de recherche ne sont pas perturbés.

Dernière modification par EX-FTB (2007-02-24 09:02:07)

Kervinou · 2007-02-24 10:37:13

Merci
Mais j'aurai peut être du préciser que malgré que je connaissais pas trop mal ledeveloppement y'a quelques années, je suis un peu paumé dans le javascript... J'en suis resté au Delphi façon Turbo Pascal... ;-)

Donc que faire du svalue ensuite ?
Je pose la question, car j'ai ceci qui s'affiche lorsque je passe la souris que les flèches :

Je n'arrive pas à définir pourquoi j'ai ce texte rouge qui s'est mis dès l'installation des .js/.css sans autre modif

Voilà où j'ai positionné le svalue:

Code:

    for ( i=0; i<tipLen; i++ ) {
      var current = document.getElementsByTagName(this.tipElements[i]);
      var curLen = current.length;
      for ( j=0; j<curLen; j++ ) {
        addEvent(current[j],'mouseover',this.tipOver);
        addEvent(current[j],'mouseout',this.tipOut);
        var svalue = current[j].getAttribute('swttips');
        current[j].setAttribute('tip',current[j].title);
        current[j].removeAttribute('title');

gbo · 2007-02-24 14:31:22

STP,
Poste une copie du code HTLM qui génère ces informations.
Rassure toi, il y a deux mois, je n'avais jamais vu de java script ni de PHP ou de HTML avant d'en avoir besoin pour mon site.
je regarderai ce soir si je peux t'aider.

Kervinou · 2007-02-25 00:15:09

C'est sympa merci.
Mais plutot que poster, je t'ai mis un mail via ce forum y'a quelques jours, mais j'ai l'impression que tu ne l'as pas vu ?!

je peux te zipper les 3 pages en question si tu veux, dispo là -> http://galerie.kerv.org/pwgtips.zip

------------
2eme interrogation, je me demandais concernant la navigation par les maps, tu as mis des valeurs au hasard ?
ou calculé je ne sais pas comment une partie par rapport aux tailles d'images ?!

thanks ;-)

-------------
Modif 01:09
-------------

J'y comprend plus rien, je viens de remettre les fichiers d'origine de picture.tpl et .css et refaire les manips décrites dans le .txt, et je n'ai plus rien de différent, même le texte rouge que j'avais ne s'affiche plus...

Code:

1) Include the following JavaScript files in the head of your document as follows:
 <script type="text/javascript" src="/js/addEvent.js"></script>
 <script type="text/javascript" src="/js/sweetTitles.js"></script>

2) Include the following style sheet (or append to an existing one)
  @import "css/sweetTitles.css";

Si tu veux voir, la galerie de test est ici -> http://galerie.kerv.org.free.fr/identification.php
identifiant+mdp=invite

+tard

Dernière modification par Kervinou (2007-02-25 01:09:05)

gbo · 2007-02-25 14:57:40

Je regarde ton zip pour les infos bulle.
Dans ton exemple, je ne vois pas le chargement du fichier sweetTitles.css.

Par défaut le texte en marron ou rouge correspond au contenu de title ou de alt.
Vérifie si tu as le même résultat sous FF et IE, car IE affiche aussi le alt, il faut peut être le supprimer.

Pour la navigation j'ai calculé les parties droite et gauche en fraction de la largueur de l’image.
Heureusement car j’ai modifié plusieurs fois la taille d’affichage de l’image.

De 0 jusqu’ a 40% -> previous de 40%à 60% c’est UP, de 60% à 100% -> next

Kervinou · 2007-02-25 19:27:54

Salut et merci de t'attarder sur mon cas désespéré ;-)

Pour le CSS, il est chargé dans le .css de picture

Pour faire plus simple à la limite, te serait-il possible de me zipper ton picture.tpl +picture.css + les deux .js + le .css, à la limite je devrais pouvoir m'en dépatouiller.

gbo · 2007-02-26 20:34:14

Kervinou,
Je ne sais pas comment poster un zip sur le forum, pour que tout le monde puisse récupérer ce script avec l'exemple dans Picture.tpl.

J'ai répondu à ton mail l’exemple est en PJ.

mathiasm · 2007-02-26 21:42:50

EX-FTP: dans ce cas, c'est un MOD... Tu fais un petit readme pour dire ce qu'il faut faire et zou, dans le gestionnaire d'extensions (avant-dernier lien dans l'en-tête).

Kervinou · 2007-02-27 10:43:05

EX-FTB a écrit:
Kervinou,
Je ne sais pas comment poster un zip sur le forum, pour que tout le monde puisse récupérer ce script avec l'exemple dans Picture.tpl.

J'ai répondu à ton mail l’exemple est en PJ.

Merci beaucoup, je l'ai vu en diagonale, pas eu le tps hier soir de me jeter dessus.
En tout cas, je te remercie vivement pour ton aide.

Je te tiendrais au courant de mon avancé dès que j'aurai réussi ;-)

Encore merci

Piwigo.org

Annonce

#16 2006-11-19 22:44:01

Re: Présentation des Exif!!!!

acp a écrit:

EX-FTB a écrit:

#17 2006-11-22 21:45:30

Re: Présentation des Exif!!!!

#18 2006-11-30 21:21:32

Re: Présentation des Exif!!!!

#19 2007-02-23 20:00:47

Re: Présentation des Exif!!!!

#20 2007-02-23 21:39:13

Re: Présentation des Exif!!!!

#21 2007-02-23 23:32:39

Re: Présentation des Exif!!!!

#22 2007-02-24 08:56:28

Re: Présentation des Exif!!!!

#23 2007-02-24 10:37:13

Re: Présentation des Exif!!!!

Code:

#24 2007-02-24 14:31:22

Re: Présentation des Exif!!!!

#25 2007-02-25 00:15:09

Re: Présentation des Exif!!!!

Code:

#26 2007-02-25 14:57:40

Re: Présentation des Exif!!!!

#27 2007-02-25 19:27:54

Re: Présentation des Exif!!!!

#28 2007-02-26 20:34:14

Re: Présentation des Exif!!!!

#29 2007-02-26 21:42:50

Re: Présentation des Exif!!!!

#30 2007-02-27 10:43:05

Re: Présentation des Exif!!!!

EX-FTB a écrit:

Pied de page des forums