Discussion :

[pygoCENTRUS]

le chomeur est ce que toi aussi tu ne vois qu'un seul diapo?

pour que les pop up chargent plus vite je vais réduire le poids des grandes photos

[le_chomeur]

non je vois toute les galeries ...

[Auteur]

oui oui je m'en sors très bien merci ce qui m'inquiète c'est que tout les diapos sont installés mais que tu n'en vois qu'un

ok, je vois toutes les galeries (sans doute un problème de cache de mon navigateur)
Seule la galerie http://www.moai.dafun.com/animal%20autres.htm n'est pas encore finie

Je constate que tu as très bien su intégré le code et modifier les feuilles de styles à ta guise

il reste donc les 3 pages de présentation des diaporama à corriger


Seul souci mineur : certaines photos sont longues à charger. Tu faisais sans doute allusion à ce problème, le_chomeur, dans un de tes messages précédents ; j'ai cru que tu parlais des images affichées en pop-up. Il est vrai que j'aurai dû faire une barre de chargement (on a ça dans les scripts, je crois).
Mais bon hormis ce détail, la navigation dans le site me semble aisée.

le_chomeur :
Je regarderai ton code, merci

[le_chomeur]

yop ^^
il s'agit effectivement des images qui s'affiche en grand

[Auteur]

J'ai trouvé un exemple de barre de progression animée.

Il y a encore quelques bugs dans les scripts . Rien de bien méchant a priori (Qu'en pensez-vous tous les deux ).
Ayant tout fait en local, je n'ai pas toujours pensé aux temps de chargement des photos (en local tout va plus vite)

[le_chomeur]

c'est juste une barre d'attente et non de chargement
mais pourquoi pas, pendant la méthode qui vérifit le complete

[Auteur]

Oui, je ne peux faire qu'une barre d'attente. En JS je ne peux pas connaître le taux de chargement d'une image. Mais bon pour l'instant j'ai 3 pages d'accueil à revoir .
On verra plus tard pour cette barre d'attente

[pygoCENTRUS]

ok, je vois toutes les galeries (sans doute un problème de cache de mon navigateur)

Je constate que tu as très bien su intégré le code et modifier les feuilles de styles à ta guise

merci mais j'avoue avoir un peu galeré

pour la barre d'attente l'idée est bonne mais rien d'urgent,je vais déjà alléger les photos qui sont un peu lourdes

en tout cas merci a tout les 2 de vous pencher sur mon site

[SpaceFrog]

juste histoire de faire monter le compteur de posts ^^


pour la galerie qui scrolle en bas ...
J'aurais mis un scroll automatique en fonction de la position de la souris plutôt que de devoir déplacer l'ascenseur , éventuellement avec un effet d'accélération ralentissement
Mais sinon l'ensemble est graphiquement très cohérent et la navigation ergonomique

[Auteur]

auteur pour notre sujet sur le chat :

(...........)

Bon avec ton code j'arrive à obtenir le même résultat que sur ces pages (3 images sur 2 lignes) :
- http://www.moai.dafun.com/galerieindex.htm
- http://www.moai.dafun.com/animaux.htm

Par contre ici (2 images sur deux lignes)
- http://www.moai.dafun.com/oiseaux.htm
Je ne vois pas comment faire les choses simplement (il faut que le cadre qui contient les photos soit de la même largeur que le cadre sur les deux autres pages).

[pygoCENTRUS]

juste histoire de faire monter le compteur de posts ^^

pour la galerie qui scrolle en bas ...
J'aurais mis un scroll automatique en fonction de la position de la souris plutôt que de devoir déplacer l'ascenseur , éventuellement avec un effet d'accélération ralentissement

+1 il est vrai que se serait un petit plus non négligeable pour la navigation (et un gros plus pour les feignants )

merci de ton passage

[Auteur]

pygoCENTRUS :
voici donc en pièce jointe un premier jet des 3 pages d'index :
- http://www.moai.dafun.com/galerieindex.htm
- http://www.moai.dafun.com/animaux.htm
- http://www.moai.dafun.com/oiseaux.htm

tu as donc 3 fichiers html :

• galerie.htm (Pas galerieindex.htm, sans le vouloir, je n'ai pas gardé le nom d'origine , mais tu peux renommer le fichier sans problème )
• animaux.htm
• oiseaux.htm

4 dossiers :

• galerie qui contient les images de galerie.htm ;
• animaux qui contient les images de animaux.htm ;
• oiseaux qui contient les images de oiseaux.htm ;
• communs qui contient les fichiers suivants :
  
  • banniere.jpg (ta bannière) ;
  • fond.jpg (le fond) ;
  • rss.jpg, le logo RSS, que j'ai remplacé par rss2.gif (qui est dans le dossier aussi) ;
  • style.css qui est la feuille de style des 3 fichiers html.

Dans la mesure du possible, j'ai essayé de respecter les couleurs et la mise en page que tu avais faites.
Vérifie quand même les liens, j'ai pu faire une erreur

Le seul problème de mise en page est pour oiseaux.htm : en effet, j'ai gardé pour les 4 photos la dispositions 3 photos par lignes (disposition adoptée dans galerie.htm et animaux.htm), ce qui fait que tu as 3 photos sur la première ligne et la 4ème se retrouve sur la seconde ligne.
Je vais essayer de corriger ça pour que tu aies 2 photos par lignes ou si tu veux je le laisse tel quel.


J'ai testé le code sous FF et IE7. A vérifier avec IE6 et Opera.


J'attends ton avis

[pygoCENTRUS]

encore une fois merci pour le travail effectué,affichage ok avec IE7

un petit soucis avec la couleur des séparateurs sous opéra mais c'est pas grave du tout vu que l'affichage est nikel

pour oiseaux.htm ce serait vraiment top d'avoir 2 images par lignes,mais si c'est trop chiant a faire laisse tomber

edit:pour oiseaux.htm sous FF les liens des vignettes restent noirs lorsqu'ils sont survolés

[Auteur]

encore une fois merci pour le travail effectué,affichage ok avec IE7

J'ai testé avec IE7 pas avec IE6
Pour la mise en page le_chomeur m'a retiré une épine du pied en me proposant son code

------------------------------------------------

un petit soucis avec la couleur des séparateurs sous opéra mais c'est pas grave du tout vu que l'affichage est nikel

Justement en regardant le code, je me suis demandé s'il ne valait pas mieux écrire :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<hr style="background-color: #FFFFFF">

plutôt que

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<hr color="#ffffff" noshade="noshade">

qui n'est pas valide HTML4.01 Strict

------------------------------------------------

pour oiseaux.htm ce serait vraiment top d'avoir 2 images par lignes,mais si c'est trop chiant a faire laisse tomber

Remplace styles.css dans le dossier "communs" par le fichier en pièce jointe. Dis moi ce que tu en penses.

Pour résumer :
dans les pages galerie.htm et animaux.htm c'est la classe blocPhotos qui est appliquée (3 photos par ligne). Dans la page oiseaux.htm c'est la classe blocPhotosOiseaux qui est appliquée (2 photos par ligne).

------------------------------------------------

edit:pour oiseaux.htm sous FF les liens des vignettes restent noirs lorsqu'ils sont survolés

Oui, c'est normal, j'ai repris les couleurs qu'il y avait sur ton site : les liens restent noirs lors du survol. Si tu veux changer la couleur lors du survol, ouvre le fichier styles.css et regarde la classe "blocPhotosOiseaux span a:hover" (spécifique à cette page) :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
 /* l'aspect des liens pour la page des oiseaux est légèrement différente */
.blocPhotosOiseaux  span a:hover{
  color: #000000;
  text-decoration: underline;
  font-weight: bold;
}

modifie la propriété color.

------------------------------------------------

je vais déjà alléger les photos qui sont un peu lourdes

N'allège pas trop tes photos, la qualité de ces prises de vues pourrait être altérée (pixelisation de l'image) et ça serait bien dommage.
Tes photos sont superbes

[le_chomeur]

bon moi je vais venir mettre mon grain de sable ...
nous somme dans la section javascript la non ???

bon hé bien pourquoi ne pas créer un objet galerie ???

celui ci reprendrait les bases =>

- nom de la galerie , collection d'image , gestion de l'affichage

- puis une classe gérant une collection de galerie

avantage ?
=> a partir d'un seul script on pourra
- construire X galerie
- ajout X image
- NAVIGUER SANS CHANGER DE PAGE

inconvénient ?
- référencement de la galerie d'image

j'avais un truc en préparation qui trainais depuis longtemps , alors si ça vous intéresse

[Auteur]

Il est clair qu'en utilisant des objets, on va limiter la redondance du code. J'ai hésité à prendre cette voie, parce que je ne maîtrise pas trop les objets en JS . Je pense que tu vas utiliser de l'Ajax ?

Il est vrai qu'en l'état l'ajout d'une galerie et d'images pourrait ne pas être évident

Il faut voir avec pygoCENTRUS

[le_chomeur]

non pas besoins d'ajax , un simple script , gérant les objets , et un second permettant de les initialiser / afficher

un exemple de ce que j'avais commencé :

http://easynews.free.fr/diaporama2/ tout est géré en javascript ...
( testé sous FF )

[pygoCENTRUS]

AUTEUR> c'est parfait avec la nouvelle css ,merci pour le compliment sur mes photos

LE CHOMEUR>l'ouverture de l'image en grande taille de ton test est vraiment parfaite,est il possible d'intégrer ce genre de script en gardant ma mise en page actuelle?

je suis ouvert a toute proposition permettant d'améliorer mon site (je vais pas refuser vu que je suis loin de m'y connaitre autant que vous )

encore merci les gars (ca devient une tradition )

edit:LE CHOMEUR> sur ton test l'idéal serait d'avoir des fleches "suivante et précédente" quand l'image est ouverte cela éviterait d'avoir a la fermer pour en voir une autre.je sais pas si tu vois ce que je veux dire

edit2>dans oiseaux.htm pour changer la couleur du fond ou les galeries sont affichées je ne trouve pas la ligne a modifier (j'ai l'habitude de mon ancienne css) la je n'arrive pas a trouver le "background-color" correspondant

j'aimerais avoir la meme couleur que dans galerie.htm et animaux.htm

[Auteur]

edit2>dans oiseaux.htm pour changer la couleur du fond ou les galeries sont affichées je ne trouve pas la ligne a modifier (j'ai l'habitude de mon ancienne css) la je n'arrive pas a trouver le "background-color" correspondant

j'aimerais avoir la meme couleur que dans galerie.htm et animaux.htm

C'est normal que tu ne le trouves pas, ce n'est pas dans la feuille de style. En effet, la pseudo-clase :hover ne fonctionne que pour les balises <a> sous IE. J'ai donc fait un script.

Ouvre oiseaux.htm et cherche cette ligne :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<div class="conteneurPhotos" onmouseover="this.style.backgroundColor='#987649'" onmouseout="this.style.backgroundColor=''">

onmouseover = événement déclenché lorsque tu entres dans le cadre. Tu donnes au fond un backgroundColor = '#987649'
onmouseout = événement déclenché lorsque tu sors du cadre. Tu donnes aucune valeur au fond : backgroundColor = ''. (le fond reprend une valeur par défaut qui est le transparent).
this désigne l'objet qui appelle l'événement, ici le div.

remplace cette ligne par (ou simplement le code couleur que j'ai mis en évidence, en rouge) :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<div class="conteneurPhotos" onmouseover="this.style.backgroundColor='#B7BA56'" onmouseout="this.style.backgroundColor=''">

Seule la couleur sur l'événement over change (#B7BA56). N'oublie pas le # devant le code couleur et de mettre la valeur entre simples quotes ( ' )


Le_chomeur >> impressionnant ton exemple de diaporama

[le_chomeur]

^^ merci a vous deux pour les commentaires

je m'étais amusé un moment , mais pourquoi pas si quelqu'un trouve le temps pour partir dans cette voie , si spaffy passe par ici pour commenter ^^

il reste pas mal d'amélioration , c'était juste a titre informatif