tu veux afficher l'image en taille réelle dans une pop-up ?Citation:
Envoyé par pygoCENTRUS
Version imprimable
tu veux afficher l'image en taille réelle dans une pop-up ?Citation:
Envoyé par pygoCENTRUS
oui si c'est possible
oui c'est possible :D
ce que j'ai fait :
- dans mammiferes.htm j'ai ajouté un bouton :
J'ai placé ce bouton à côté des autres boutons (précédent, suivant, etc.)Code:
2<input class="boutonTR" id="btn5" value="taille réelle" onclick="tailleReelleImg()" type="button">
- 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).
c'est nikel merci beaucoup :king:
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
Je savais que tu allais demander ça :aie: :mrgreen: Bon je vais voir ça :DCitation:
Envoyé par pygoCENTRUS
Là par contre, je ne vois pas trop ce que tu veux dire :(Citation:
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
Mais ça ne me semble pas problématique si ?
tu commence a me cerner :lol::mouarf: merci en tout casCitation:
Envoyé par Auteur
c'est juste esthétique rien de gênant,ça m'intriguais :lol:Citation:
Envoyé par 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) :aie:
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)?
dis moi plutôt comment tu voyais ça ;)Citation:
Envoyé par pygoCENTRUS
ça il n'y a pas de souci, la pop-up fera toujours la taille de l'image.Citation:
Envoyé par pygoCENTRUS
alors moi je voyais ça comme ça (avec mes maigres connaissances :oops:)
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 ;)Citation:
Envoyé par pygoCENTRUS
Donc on peut faire cette arborescence :
images/vignettes :fleche: contient les vignettes (les petites images sous la zone d'affichage)
images/diaporama :fleche: image affichée dans la page web
images/popup :fleche: 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 :oops: (réduire les photos).
Voilà il te reste juste à patienter un peu... :)
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
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?
Donc ça c'est ta page d'accueil ;)Citation:
Envoyé par pygoCENTRUS
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 :
Oui, j'ai remarqué ça.... Il y a un (petit) souci au niveau de la CSS.Citation:
Envoyé par pygoCENTRUS
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 :oops:
[edit]:fleche: j'ai compris le problème... (c'est lié à la vitesse de chargement de l'image). Je vais voir comment le résoudre.[/edit]
encore une fois merci beaucoup :D
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
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 :oops:
Pour les vignettes, j'ai augmenté un peu leur taille, je suis passé en 60x60px.Citation:
Envoyé par pygoCENTRUS
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 ;)
Il faudrait voir ça avec PHP ou Ajax...Citation:
Envoyé par 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 :D) 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 :(
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:
2
3
4
5
- Pour les vignettes :
Code:
2
3
4
5
- Pour les images du diaporama
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 :oops:)Code:
2
3
4
5
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.
mille merci c'est tip top :king:
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 :yaisse2:
Là, tu parles de la page d'accueil ? :koi:Citation:
Envoyé par pygoCENTRUS
Sinon, le code que j'ai posté te convient ou pas :aie: ?
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
pygoCENTRUS : je m'occuperai de ta page d'accueil plus tard...
A toi de voir comment tu veux présenter tes images...Citation:
Envoyé par VFone
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 :aie:).
pygoCENTRUS a des photos qui font 800x600, 1024x922 pixels :aie: Là les vignettes peuvent présenter un intérêt (ses vignettes font presque 100x100 pixels en plus - 60x60 pour être plus précis).
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.
oui le code est parfait :king:Citation:
Envoyé par Auteur
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.
grosso-modo : il est inutile d'attribut une propriété CSS du genreCitation:
Envoyé par VFone
si tes images font en réalité 1280x1024 px :aie: (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.Code:
2
3
4
5
------------------------------------------------------------------
:fleche: c'est la CSS.... Et sous IE, c'est vrai le résultat est un peu décevant :?Citation:
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 :aie: C'est juste un problème de CSS. J'y jetterai un oeil, mais il te faut être patient ;)Citation:
Envoyé par pygoCENTRUS
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 :oops:). 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:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25function 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(); } } }
-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 :oops:
-le code fonctionne sous opéra j'ai pas encore testé sous IE6
En tous cas , bravo auteur et merci pour lui , beau boulot ( bon resterais quelques améliorations :aie: :aie: aie pas la tête on avait dit lol) mais ça rend plutôt pas mal ;)
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 ;)
:oops: :oops: :oops: :oops:Citation:
Envoyé par le_chomeur
quelles améliorations proposes-tu ?Citation:
Envoyé par le_chomeur
:oops: :oops: :oops: :oops: :oops: :oops: :oops: :oops: :oops:Citation:
Envoyé par pygoCENTRUS
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.
pas de soucis je patiente ;) merci encore :D
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 :aie:
Utilise uniquement les 26 lettres et les chiffres ;)
ok je vais corriger ca ;)
juste quelques améliorations :Citation:
Envoyé par Auteur
- 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 ? :yaisse2:
les fonctions sont déja codé et sont sur le forum ;) ;)
en tout cas bravo très propre :)
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).Citation:
Envoyé par le_chomeur
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 ;)).
euh, là oui mais non :aie: (en plus il faut faire un code pour chaque navigateur :pleure: )Citation:
Envoyé par le_chomeur
Merci.:oops: 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 :oops:Citation:
en tout cas bravo très propre :)
Mais étant une bille en PHP, je me suis abstenu de faire ça.:aie:
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*** :aie: à 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- ).
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 :aie:
auteur pour notre sujet sur le chat :
css
BALISE SPAN A REMPLACER PAR IMG ;)Code:
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
et coté html :
Code:
2
3
4
5
6
7
8
9
10
11
12