Discussion :

[Auteur]

je me demande encore un truc> est il possible d'inclure en tout petit a gauche en dessous de chaque photo un lien "taille réelle" vers la photo en grande taille?

tu veux afficher l'image en taille réelle dans une pop-up ?

[pygoCENTRUS]

oui si c'est possible

[Auteur]

oui c'est possible

ce que j'ai fait :

• dans mammiferes.htm j'ai ajouté un bouton :
  
  • 
    

    Code html :

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

    1
    2
     
    <input class="boutonTR" id="btn5" value="taille réelle" onclick="tailleReelleImg()" type="button">

    J'ai placé ce bouton à côté des autres boutons (précédent, suivant, etc.)
  • j'ai créé la classe CSS boutonTR (TR pour Taille Réelle). Il a les mêmes caractéristiques que les boutons avec flèches (sauf la longueur et le gras)
• dans le JS j'ai ajouté deux fonctions :
  
  • tailleReelleImg() qui permet d'afficher dans la pop-up l'image en taille réelle. La pop-up s'ajuste à la taille de l'image (je reviendrai sur le code ci-dessous) ;
  • FermePopUp() qui ferme la pop-up (si elle est ouverte) en même tant que la page principale (cela évite que l'utilisateur oublie de la fermer).

------------ Gestion de la pop-up (fonction tailleReelleImg()) :
En fait, la pop-up n'est pas créée de manière dynamique par la fonction, c'est une page HTML que j'ouvre et dans laquelle j'insère l'image que je dois afficher (cette page contient du code JS). Tu trouveras cette page HTML (popup.htm) dans le dossier /images du fichier zip que je joins. J'ai opté pour cette solution, c'est plus facile à gérer.

Attention : cette page (popup.htm) doit se trouver dans le même dossier que tes images (rappel : le nom du dossier des images est défini par la variable chemin qui se trouve au début du script de la page mammiferes.htm).


Donc comment ça marche ?
Deux cas :
1- La pop-up n'est pas ouverte :
Quand tu cliques sur le bouton "taille réelle", tu appelles tailleReelleImg() qui ouvre la pop-up et c'est tout.
Quand popup.htm est ouvert, j'appelle une fonction popupOuverte() (la fonction se trouve dans popup.htm ) qui se charge d'afficher l'image sélectionnée et de dimensionner la pop-up en fonction de la taille de l'image.

2- La pop-up est déjà ouverte :
Pour éviter une multiplication des pop-up, la fonction tailleReelleImg() "détecte" si la pop-up est ouverte ou non. Donc si la pop-up est déjà ouverte, l'image quelle contient est remplacée par la nouvelle image sélectionnée, puis la pop-up est redimensionnée. La pop-up prend le focus.
Si ensuite l'utilisateur ferme la pop-up ça ne pose pas de problème, on se retrouve dans le cas 1





Tout est dans le zip, j'ai même inclu des images pour que tu testes le script. Ouvre le fichier mammiferes.htm et les scripts s'occupent de tout.
J'ai testé sous IE 7 et FF (je n'ai fait aucun test sur IE 6 et Opera).

[pygoCENTRUS]

c'est nikel merci beaucoup

maintenant la traditionnelle question:le script fonctionne parfaitement mais il ouvre les photos du dossier "image" normal puisque "pop up.htm" est dedans,de ce fait il m'ouvre les images en meme taille que celle sur le site.

ce qui serait parfait c'est d'avoir mon image redimensionnée (exemple "600x800") sur le site et quand on ouvre la pop up que l'on ai une image genre (exemple:"1024x768") qui s'affiche

en fait il faut attribuer d'autres images a la fenêtre popup (les grandes) mais qu'elles concordent (exemple> clique sur zebre,l'image en 600x800 s'ouvre,clique sur "taille réelle" une image zebre en "1024x768" s'ouvre)

je sais pas si c'est très clair

est ce possible?comment faire cela?

j'ai un autre petit probleme,lorsque l'on navigue sur le site "exemple:quand je clique sur une zone "morte (sans lien)" de la page une barre verticale clignote comme sur une page de texte

[Auteur]

ce qui serait parfait c'est d'avoir mon image redimensionnée (exemple "600x800") sur le site et quand on ouvre la pop up que l'on ai une image genre (exemple:"1024x768") qui s'affiche

en fait il faut attribuer d'autres images a la fenêtre popup (les grandes) mais qu'elles concordent (exemple> clique sur zebre,l'image en 600x800 s'ouvre,clique sur "taille réelle" une image zebre en "1024x768" s'ouvre)

Je savais que tu allais demander ça Bon je vais voir ça

j'ai un autre petit probleme,lorsque l'on navigue sur le site "exemple:quand je clique sur une zone "morte (sans lien)" de la page une barre verticale clignote comme sur une page de texte

Là par contre, je ne vois pas trop ce que tu veux dire
Mais ça ne me semble pas problématique si ?

[pygoCENTRUS]

Je savais que tu allais demander ça Bon je vais voir ça

tu commence a me cerner merci en tout cas

Là par contre, je ne vois pas trop ce que tu veux dire Mais ça ne me semble pas problématique si ?

c'est juste esthétique rien de gênant,ça m'intriguais

[Auteur]

Une chose :
- Comment feras-tu pour distinguer une photo en 800x600 de sa soeur en 1024x768 ?
Seront-elles dans le même dossier ou dans des dossiers différents (par un exemple un dossier 800x600 et un dossier 1024x768) ?
En un mot quelles règles vas-tu appliquer pour différencier tes images en 800x600 de tes images en 1024x768 ? Histoire que j'adapte le script selon tes besoins.
De plus, combien de résolutions vas-tu utiliser pour ce diaporama (1 pour les vignettes, 1 pour l'affichage dans le diaporama, 1 pour la taille réelle) ?




Personnellement : je ferai un dossier 800x600 et un dossier 1024x768 (et un dossier pour les vignettes). Les images en 800x600 et en 1024x768 (ainsi que les vignettes) auront le même nom (mais seront dans leur dossier respectif). Je te suggère cette idée, car ça m'arrangerait aussi (peu de modification des scripts)

[pygoCENTRUS]

ok pour un dossier 800x600 et un dossier 1024x768,fais au plus simple pour toi.

peut faire en sorte que la pop up s'adapte a la taille de l'image (dans le cas ou l'on a plusieurs tailles d'image)?

[Auteur]

ok pour un dossier 800x600 et un dossier 1024x768,fais au plus simple pour toi.

dis moi plutôt comment tu voyais ça

peut faire en sorte que la pop up s'adapte a la taille de l'image (dans le cas ou l'on a plusieurs tailles d'image)?

ça il n'y a pas de souci, la pop-up fera toujours la taille de l'image.

[pygoCENTRUS]

alors moi je voyais ça comme ça (avec mes maigres connaissances )

un dossier image pour le diaporama donc ou la largeur est limitée a 600 de et un dossier image pour les pop up ou les images feront leur vraie taille

comme je recadre certaines photos les tailles changent des exemples au hasard,j'en ai en 800x600,1024x922 etc etc.pour les grandes images la taille n'est pas fixe

[Auteur]

alors moi je voyais ça comme ça (avec mes maigres connaissances )

un dossier image pour le diaporama donc ou la largeur est limitée a 600 de et un dossier image pour les pop up ou les images feront leur vraie taille

comme je recadre certaines photos les tailles changent des exemples au hasard,j'en ai en 800x600,1024x922 etc etc.pour les grandes images la taille n'est pas fixe

pas de problème
Donc on peut faire cette arborescence :
images/vignettes contient les vignettes (les petites images sous la zone d'affichage)
images/diaporama image affichée dans la page web
images/popup image affichée en pop-up (contiendra sans doute également le fichier popup.htm)

Je te propose également de faire des vignettes pour accélérer le chargement de ta page. Par contre, ça te fera sans doute du boulot en plus (réduire les photos).

Voilà il te reste juste à patienter un peu...

[pygoCENTRUS]

ok c'est nikel,pas de soucis pour les vignettes c'est pas long a faire,merci beaucoup

edit:sur cette page http://www.moai.dafun.com/galerieindex.htm je n'arrive pas a changer la couleur du texte sous les vignettes j'ai bidouiller le css pendant des heures sans résultat,je le voulais en noir quand il n'est pas actif

[pygoCENTRUS]

je viens de tester mon site sur internet explorer,dans les index des galeries les images ne sont pas alignées et la bordure du corps de page a disparu

comment y remédier?

[Auteur]

edit:sur cette page http://www.moai.dafun.com/galerieindex.htm je n'arrive pas a changer la couleur du texte sous les vignettes j'ai bidouiller le css pendant des heures sans résultat,je le voulais en noir quand il n'est pas actif

Donc ça c'est ta page d'accueil
Je verrai ça. Sans doute un problème de CSS. J'ai remarqué également que les photos débordent du cadre (sous IE avec FF pas de souci).


Pour ce qui est des diaporamas :

je viens de tester mon site sur internet explorer,dans les index des galeries les images ne sont pas alignées et la bordure du corps de page a disparu

comment y remédier?

Oui, j'ai remarqué ça.... Il y a un (petit) souci au niveau de la CSS.
Laisse moi du temps que je regarde ça en détail


Curieusement j'ai remarqué également que la pop-up sous IE ne prenait pas les dimensions de l'image (pourtant en local ça marche bien...). Donc sur ce point un truc m'échappe
[edit] j'ai compris le problème... (c'est lié à la vitesse de chargement de l'image). Je vais voir comment le résoudre.[/edit]

[pygoCENTRUS]

encore une fois merci beaucoup

dans le nouveau script (celui ou les images des pop up seront différentes (taille) des photos du diapo) pour lequel je dois faire des vignettes,de quelle taille me conseilles tu de les faire? je vais commencer a les faire

[pygoCENTRUS]

je me pose une question:

est t'il possible d'intégrer une barre indiquant notre position sur le site,exemple sur le forum> Forum des développeurs > Webmasters - Développement Web > Javascript > galerie photo

ce serait parfait d'intégrer ce type de barre sur mon site mais si c'est trop chiant a faire ou si j'abuse un peu trop a demander 50 000 trucs n'hésite pas a me le dire

[Auteur]

encore une fois merci beaucoup

dans le nouveau script (celui ou les images des pop up seront différentes (taille) des photos du diapo) pour lequel je dois faire des vignettes,de quelle taille me conseilles tu de les faire? je vais commencer a les faire

Pour les vignettes, j'ai augmenté un peu leur taille, je suis passé en 60x60px.

Par contre une remarque : ta signature sur les photos (Alexandre Letertre photographie) ne supporte pas le redimensionnement CSS (regarde le diaporama)
Il faudra sans doute refaire le texte des images et redimensionner les images. Donc pour les images affichées dans le diaporama, ne fais pas des images de plus de 600px de large.

Pour les images dans le pop-up, tu n'as pas de limites dans la taille

je me pose une question:
est t'il possible d'intégrer une barre indiquant notre position sur le site,exemple sur le forum> Forum des développeurs > Webmasters - Développement Web > Javascript > galerie photo

Il faudrait voir ça avec PHP ou Ajax...

[pygoCENTRUS]

pas de soucis je referai le texte,bon je vais faire les vignettes

quand le nouveau script sera prêt il faudra que tu m'explique son fonctionnement (comme tu le fais toujours ) comme ça j'apprends en même temps

pour la barre je vais chercher de mon coté le soucis c'est que je ne connais pas le nom de ce type de barre

[Auteur]

Ce que j'ai fait :

Arborescence (elle a été conservée mais les dossiers contiennent de nouveaux fichiers) :
/mammiferes_fichiers/ : mammiferes.css ; rss.gif. Fichiers ajoutés : diaporama.css ; diaporama.js ;
/mammiferes_fichiers/graphic/ : fond.jpg ;
/mammiferes_fichiers/insecte/ : banniere.jpg

Comme convenu :
/images/diaporama/ : contient les images affichées dans le diaporama ;
/images/popup/ : contient les images affichées en pop-up, contient également le fichier popup.htm (il doit être dans ce dossier !!) ;
/images/vignettes/ : contient tes vignettes.

Dans mammiferes.htm, j'ai remplacé les balises ul et li de ton menu par un tableau (balise table).
=> cela m'a permis d'inclure le menu au div #corps ;
=> j'ai donc supprimé de la CSS mammiferes.css tout ce qui concernait les balises ul et li du menu ;
=> j'ai modifié la CSS en incluant les propriétés du tableau (#menu);
=> pour le menu j'ai supprimé le gras du texte lors du survol du texte par la souris (ça avait tendance à bousculer les autres éléments du menu), je l'ai remplacé par un souligné (classe #menu).
=> j'ai corrigé quelques fautes de frappe ;
=> j'ai commenté la CSS.


J'ai créé diaporama.js et diaporama.css
diaporama.js => script du diaporama . J'ai modifié quelques lignes de codes et modifié le nom d'une variable...
diaporama.css => feuille de style du diaporama; J'ai modifié quelques propriétés :

• les couleurs des bordures des conteneurs ;
• Les vignettes (classe vignettes) :
  
  • j'ai modifié la taille des vignettes : 60x60px (j'ai imposé la largeur et la hauteur à cause de IE)
  • j'ai modifié la bordure des vignettes (elle était trop épaisse)
• les boutons (classes bouton, boutonTR, boutonDesactive, boutonActive)
  
  • j'ai créé les classes boutonDesactive et boutonActive dans le but de modifier (un peu) l'allure des boutons de navigation en fonction de leur état (activés ou non).
    Le résultat est plus flagrant sur FF que sur IE.
• les images affichées (classe .images). Elles ont une largeur de 700px. Tu peux monter à 800px (largeur maximale de #corps), voir le commentaire dans la CSS.

mammiferes.htm
Ce fichier contient une partie du script du diaporama ; tu trouveras 3 tableaux et 3 variables (c'est commenté ):

• Pour les images de la Pop-up :
  

  Code :

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

  1
  2
  3
  4
  5
   
  //--- chemin des images contenues dans la pop-up
  var cheminPopup = "images/popup/";
  //--- liste des images de la pop-up
  var tabImgPopup = new Array("chat.jpg", "chevreuil.jpg", "zebre.jpg", "vache.jpg", "herisson.jpg");

• Pour les vignettes :
  

  Code :

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

  1
  2
  3
  4
  5
   
  //--- chemin des vignettes
  var cheminVignettes = "images/vignettes/";
  //--- liste des vignettes
  var tabVignettes = new Array("chat.jpg", "chevreuil.jpg", "zebre.jpg", "vache.jpg", "herisson.jpg");

• Pour les images du diaporama
  

  Code :

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

  1
  2
  3
  4
  5
   
  //--- chemin des images du diaporama
  var cheminDiapo = "images/diaporama/"; 
  //--- liste des images du diaporama
  var tabImgDiapo = new Array("chat.jpg", "chevreuil.jpg", "zebre.jpg", "vache.jpg", "herisson.jpg");

  Ce qui importe c'est l'index des images dans les 3 catégories (vignettes, diaporama, pop-up) pas le nom. Si tu affiches l'image dont l'index est 0 (ici le chat), le script prendra tabImgPopup[0], tabVignettes[0], tabImgDiapo[0], même chose pour les index 1,2,3,4 etc.. Donc si les photos d'un même animal n'ont pas le même nom dans les 3 catégories ce n'est pas grave. (je ne sais pas si je me suis bien fait comprendre )
  

Tout est dans le zip sauf les images du diaporama (elles prennent trop de place, je ne peux pas les poster).

J'ai testé sous IE7 et Firefox. Je n'ai fait aucun test sous IE 6, Opera ou Safari.

Je ne me suis pas occupé de ta page d'accueil.

[pygoCENTRUS]

mille merci c'est tip top

maintenant je n'ai plus qu'a régler quelques petits soucis >

-affichage de l'index des galerie,index animaux,index oiseaux en vrac sous ie7 -affichage des liens des galeries en noir quand ils sont survolés
-disparition de la bordure du corps sous ie7
-mise en place d'une barre indiquant la position sur le site ou d'un bouton de retour (exemples> retour animaux,retour index galeries etc) que je ne sais pas ou positionner

on y est presque