galerie photo

**Auteur** · 27/05/2008, 11h53

Envoyé par 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

Là, tu parles de la page d'accueil ?

Sinon, le code que j'ai posté te convient ou pas

?

**VFone** · 27/05/2008, 12h12

J'aurais besoin d'un petit conseil.

J'ai fait un système d'upload d'images sur mon site.

Je vais afficher 10 images pas page d'une résolution de 100px par 100px

Que me conseillez vous?
D'afficher ces images avec une fonction
ou de créer des miniatures de ces images sur mon serveur (dans un dossier)

Merci

**Auteur** · 27/05/2008, 14h03

pygoCENTRUS : je m'occuperai de ta page d'accueil plus tard...

Envoyé par VFone

J'aurais besoin d'un petit conseil.

J'ai fait un système d'upload d'images sur mon site.

Je vais afficher 10 images pas page d'une résolution de 100px par 100px

Que me conseillez vous?
D'afficher ces images avec une fonction
ou de créer des miniatures de ces images sur mon serveur (dans un dossier)

A toi de voir comment tu veux présenter tes images...
Tes images font 100x100px. Une vignette est généralement un aperçu ou une réduction importante de l'image d'origine. Tes images font au maximum 100x100 (c'est une petite taille) je ne crois pas que des vignettes soient utiles (des vignettes de 30x30 pixels

).

pygoCENTRUS a des photos qui font 800x600, 1024x922 pixels

Là les vignettes peuvent présenter un intérêt (ses vignettes font presque 100x100 pixels en plus - 60x60 pour être plus précis).

**VFone** · 27/05/2008, 15h15

Merci Auteur pour ta réponse.

Si je résume ce que tu me dit:

Je vais utiliser une fonction de redimensionnement pour des images qui font en taille réelle 400 x 400 px pour les afficher sur mon site en vignette de 100 x 100 px

Et j'ai une section wallpaper ou les images d'origines font 1024 x 768 px, donc là je vais utiliser la galerie GD pour créer des miniatures de ces images dans un dossier différent.

**pygoCENTRUS** · 27/05/2008, 15h17

Envoyé par Auteur

Là, tu parles de la page d'accueil ?

Sinon, le code que j'ai posté te convient ou pas

?

oui le code est parfait

je parle des pages "index" ou sont présentées les différentes catégories

-http://www.moai.dafun.com/galerieindex.htm
-http://www.moai.dafun.com/animaux.htm
-http://www.moai.dafun.com/oiseaux.htm

ces pages la s'affichent en vrac avec IE et la bordure du corps disparait.

**Auteur** · 27/05/2008, 17h01

Envoyé par VFone

Merci Auteur pour ta réponse.

Si je résume ce que tu me dit:

Je vais utiliser une fonction de redimensionnement pour des images qui font en taille réelle 400 x 400 px pour les afficher sur mon site en vignette de 100 x 100 px

Et j'ai une section wallpaper ou les images d'origines font 1024 x 768 px, donc là je vais utiliser la galerie GD pour créer des miniatures de ces images dans un dossier différent.

grosso-modo : il est inutile d'attribut une propriété CSS du genre

Code CSS :

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

1
2
3
4
5
 
.tesImages{
  width: 100px;
  height: 100px;
}

si tes images font en réalité 1280x1024 px

(en plus le résultat risque de ne pas être à la hauteur de tes espérances). De plus, des images de 100x100 pixels sont plus rapides à charger que des images en 1280x1024.

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

Envoyé par pygoCENTRUS

oui le code est parfait

je parle des pages "index" ou sont présentées les différentes catégories

-http://www.moai.dafun.com/galerieindex.htm
-http://www.moai.dafun.com/animaux.htm
-http://www.moai.dafun.com/oiseaux.htm

ces pages la s'affichent en vrac avec IE et la bordure du corps disparait.

c'est la CSS.... Et sous IE, c'est vrai le résultat est un peu décevant

**pygoCENTRUS** · 27/05/2008, 19h57

a l'accueil je mettrai une phrase expliquant que le site est optimisé pour firefox

**Auteur** · 28/05/2008, 10h20

Envoyé par pygoCENTRUS

a l'accueil je mettrai une phrase expliquant que le site est optimisé pour firefox

Vas-y fais fuir ceux qui utilisent IE

C'est juste un problème de CSS. J'y jetterai un oeil, mais il te faut être patient

A ce propos, est-ce que le code que j'ai posté fonctionne avec IE6 et Opera ? (Avec IE7, pas de souci).

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

Bon j'ai remarqué que les photos grand format (celles qui sont chargées en pop-up) sont plus longues à charger que ce que je croyais (j'ai un débit de 1Mo

). Donc la pop-up ne prend pas toujours la taille de l'image (et dans ce cas c'est à l'utilisateur de redimensionner la pop-up).

Si tu connais un peu JS, modifie un peu le script de popup.htm. Ouvre popup.htm et regarde la fonction attenteChargeImage(). Cette fonction attend que l'image soit chargée avant de redimensionner la popup.

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
function attenteChargeImage()
{    
  if (imageACharger.complete) // si l'image est chargée...
  {
    // on redimensionne la pop-up en fonction de la taille de l'image  
    self.resizeTo(imageACharger.clientWidth+35, imageACharger.clientHeight+80);
    // la pop-up a le focus
    self.focus(); 
  }
  else // sinon on réexécute la fonction...
  { 
    tentatives++;
    // on fait 5 tentatives (5 secondes), sinon on donne à la fenêtre des dimensions par défaut (200x200)
    if (tentatives<=5)
    {
      setTimeout("attenteChargeImage()","1000");
    }
    else
    {
      self.resizeTo(200, 200); 
      self.focus(); 
    }
  }
}

Cette fonction est appelée une première fois par popupOuverte(). Voici comment ça marche : si l'image est chargée (if (image.complete)) alors la pop-up est redimensionnée en fonction de la taille de la photo (méthode self.resizeTo()). Sinon, j'incrémente un compteur (tentatives) et la fonction est ré-exécutée après un laps de temps de 1 seconde (méthode setTimeout()). Dans le code actuel, je fixe un maximum de 5 tentatives (if (tentatives<=5)). Au delà, de ces 5 tentatives, je donne à la pop-up des dimensions par défaut (200x200 pixels).

Or je me suis aperçu que 5 tentatives n'était pas toujours suffisant, donc voici la petite correction que tu peux faire : augmente le nombre de tentatives. Passe le de 5 à 10 (cf. le code en bleu ci-dessous - tu as juste à modifier la valeur du test if (tentatives<=5), changer le 5 en 10) :

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function attenteChargeImage()
{    
  if (imageACharger.complete) // si l'image est chargée...
  {
    // on redimensionne la pop-up en fonction de la taille de l'image  
    self.resizeTo(imageACharger.clientWidth+35, imageACharger.clientHeight+80);
    // la pop-up a le focus
    self.focus(); 
  }
  else // sinon on réexécute la fonction...
  { 
    tentatives++;
    // on fait 10 tentatives (10 secondes), sinon on donne à la fenêtre des dimensions par défaut (200x200)
    if (tentatives<=10)
    {
      setTimeout("attenteChargeImage()","1000");
    }
    else
    {
      self.resizeTo(200, 200); 
      self.focus(); 
    }
  }
}

**pygoCENTRUS** · 28/05/2008, 11h51

-ok je patiente

,sous opéra les liens des miniatures de l'index des galeries sont inactifs et l'affichage en vrac comme avec IE

-pour ce qui est du JS c'est le langage que je maitrise le moins donc je ne trifouille pas trop

-le code fonctionne sous opéra j'ai pas encore testé sous IE6

**le_chomeur** · 28/05/2008, 14h27

En tous cas , bravo auteur et merci pour lui , beau boulot ( bon resterais quelques améliorations

aie pas la tête on avait dit lol) mais ça rend plutôt pas mal

**pygoCENTRUS** · 28/05/2008, 14h49

en effet un grand bravo et un grand merci a auteur,je t'ai fais une petite dédicace(vraiment méritée) sur ma page d'accueil

**Auteur** · 28/05/2008, 15h16

Envoyé par le_chomeur

En tous cas , bravo auteur et merci pour lui , beau boulot

Envoyé par le_chomeur

( bon resterais quelques améliorations

aie pas la tête on avait dit lol) mais ça rend plutôt pas mal

quelles améliorations proposes-tu ?

Envoyé par pygoCENTRUS

en effet un grand bravo et un grand merci a auteur,je t'ai fais une petite dédicace(vraiment méritée) sur ma page d'accueil

**Auteur** · 29/05/2008, 09h50

pygoCENTRUS :
Je te demanderai de patienter encore quelques jours, j'ai en ce moment pas mal de choses à faire

Je pense que le code de ces 3 pages ne sera pas trop difficile à corriger.

**pygoCENTRUS** · 29/05/2008, 15h15

pas de soucis je patiente

merci encore

**Auteur** · 29/05/2008, 23h05

pendant que j'y pense :
supprime les espaces, les caractères accentués, les caractères spéciaux (@ par exemple) des noms des fichiers cela pose quelques soucis

Utilise uniquement les 26 lettres et les chiffres

**pygoCENTRUS** · 30/05/2008, 00h23

ok je vais corriger ca

**le_chomeur** · 30/05/2008, 08h33

Envoyé par Auteur

quelles améliorations proposes-tu ?

juste quelques améliorations :
- Fonction gérant le chargement des grosses images ( sur certaine lors du click il y a un délai d'une a 2 seconde avant de voir apparaitre le téléchargement ) donc une vérification avec un Image.complète

- Effet de transition entre 2 images ?

les fonctions sont déja codé et sont sur le forum

en tout cas bravo très propre

**Auteur** · 30/05/2008, 10h38

Envoyé par le_chomeur

juste quelques améliorations :
- Fonction gérant le chargement des grosses images ( sur certaine lors du click il y a un délai d'une a 2 seconde avant de voir apparaitre le téléchargement ) donc une vérification avec un Image.complète

Regarde le code de popup.htm, je fais bien un Image.complete. S'il n'a pas lieu, je fais "une relance" toutes les secondes avec un maximum de 5 tentatives (pas la peine de faire tourner en boucle s'il n'y a pas d'image à charger, ça ferait planter le navigateur).
Je proposais à pygoCENTRUS d'augmenter le nombre de tentatives car avec certains débits le chargement est plus long et la pop-up ne se redimensionne pas.

J'ai fixé le délai de "relance" à 1 seconde, car en dessous, c'est inutile et ça bouffe des ressources. Peut-être que j'aurai dû le monter à 1500ms ou 2000ms (2 secondes ça passe vite

).

Envoyé par le_chomeur

- Effet de transition entre 2 images ?

les fonctions sont déja codé et sont sur le forum

euh, là oui mais non

(en plus il faut faire un code pour chaque navigateur

)

en tout cas bravo très propre

Merci.

Le top aurait été d'utiliser des templates et du PHP. En effet, sur ses pages, il y a le même menu. Et pour la partie diaporama, ça aurait sans doute éviter la redondance du code

Mais étant une bille en PHP, je me suis abstenu de faire ça.

le_chomeur :
Au fait, pour la mise en page de ces pages, en particulier la partie centrale avec les photos :
- http://www.moai.dafun.com/galerieindex.htm
- http://www.moai.dafun.com/animaux.htm
- http://www.moai.dafun.com/oiseaux.htm
que me conseilles-tu ? les tableaux (facile à faire) ou des div et des listes en float (plus ch***

à centrer) ?

pygoCENTRUS :
Au fait tu t'en sors pour la mise en place des autres diaporamas ? J'ai vu que seul le diaporama des mammifères était en place (avec la photo du hérisson qui manquait).
Sinon je te ferais le code pour chaque diaporama (tu me donneras juste le nom des images, car il n'y a que ça à changer dans les codes sources - et le nom de la page- ).

**pygoCENTRUS** · 30/05/2008, 11h45

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

**le_chomeur** · 30/05/2008, 11h47

auteur pour notre sujet sur le chat :

css

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
#corp{
	width:516px;
	border:1px solid #666;
	margin-left:auto;
	margin-right:auto;
	background-color:#FF0000;
}
#corp ul{
	list-style:none;
	margin:0px;
	padding:0px;
	background-color:#FFFF00;
}
.classLi{
	width:150px;
	height:150px;
	margin:00px;
	padding:10px;
	float:left;
	text-align:center;
}
.classLi span{
	width:150px;
	height:150px;
	display:block;
	background-color:#666666;
	border:1px solid #000000;
}

BALISE SPAN A REMPLACER PAR IMG

et coté html :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<div id="corp">
<ul>
<li class="classLi"><span>image ici</span></li>
<li class="classLi"><span>image ici</span></li>
<li class="classLi"><span>image ici</span></li>
<li class="classLi"><span>image ici</span></li>
<li class="classLi"><span>image ici</span></li>
<li class="classLi"><span>image ici</span></li>
<li class="classLi"><span>image ici</span></li>
</ul>
<br clear="all" />
<div>

galerie photo

JavaScript

Discussions similaires

Partager

Partager