11484 sujets

JavaScript, DOM et API Web HTML5

Bonjour
Je me bats depuis un certain temps avec le problème de dimensionner une fenêtre popup "au mieux" en fonction de son contenu.
Le mécanisme de génération comprend
1) un script js PopupImage qui appelle lune page PHP en lui fournissant l'adresse de l'image et les dimensions de l'écran depuis lequel ce script est appelé, ces dimensions n'étant pas connues du serveur
2) le programme PHP retrouve les dimensions de l'image et génère le code HTML et le JavaScript nécessaire à l'affichage de l'image, avec éventuellement quelques lignes de textes en fonction du contexte
3) une fois la page affichée, un script js redimentionne la fenêtre pour contenir "au mieux" l'image et le texte associé.
Cela marche "presque", mais tout est dans le "presque": comme toujours j'ai des problème avec la hauteur des éléments: je n'arrive pas à calculer une hauteur correcte pour ue la fenêtre contienne le texte, l'image, une marge raisonnable autour.
Vous pouvez voir des exemples de ces fenêtres popup en cliquant sur les liens suivants:
une image en largeur
une image en hauteur
une image où la marge au dessous de l'image est manifestement trop grande
Tout le code js et css se trouve inclus dans les pages en question

Merci de votre aide
Edit: pour voir les images en popup, il faut plutôt regarder depuis la page sui les appelle:http://tests.osirisnet.net/mastabas/nikauisesi/e_nikauisesi_03.htm
On les voit en cliquant soit sur les petites images, soit sur les liens en rouge de la forme "vue xxx"

Modifié par PapyJP (18 Feb 2017 - 13:02)
Salut,
est ce que tu pourrai faire une page 09 qui contient les images qui bugent car j'ai un peu de mal à voir le problème :s.
A priori il n'y a pas d'image+texte.
Sur les images que j'ai regardé, j'ai l'impression que la marge basse est toujours un peu trop grande et que c'est particulièrement flagrant quand l'image est "verticale" (ou plus "haute" que "large", je ne sais pas trop quels mots utiliser pour bien décrire ^^)

Si on peut avoir quelques bouts de code cela serait pas mal aussi Smiley smile
Merci de ta réponse
Le code est dans la page générée par PHP, il est très court, car la page ne contient pas grand chose.
Le code génère 2 types de pages:
1) les page ne contenant qu'une image, et éventuellement une mention de l'auteur de la photo sous la forme de 2 ou 3 caractères, par exemple http://tests.osirisnet.net/popupImage.php?img=/tombes/pharaons/amenhotep3/photo/amenhotep3_ch_055.jpg&sw=1280&sh=1024&wo=12&so=115
2) les pages contenant 2 images superposées, que l'on voit alternativement au passage de la souris, et dans ce cas il y un petit texte "mode d'emploi": http://tests.osirisnet.net/popupImage.php?img=/tombes/amarna/ahmes3/photo/ahmes3_cb_3010.jpg&sw=1280&sh=1024&wo=12&so=115
Le but est de dimensionner la fenêtre et l'image pour que
1) la fenêtre tienne dans l'écran
2) l'image soit aussi grande que possible en gardant une marge "raisonnable"
3) que ça fonctionne quel que soit le navigateur.
Pour ce faire, le script JS qui lance l'opération fait ceci:
var parlist = 'img=' + encodeURI(imgPath);
    parlist += '&sw=' + screen.width;
    parlist += '&sh=' + screen.height;
    parlist += '&wo=' + (window.outerWidth - window.innerWidth);
    parlist += '&so=' + (window.outerHeight - window.innerHeight);
    var popupWindow = open('/popupImage.php?' + parlist,
    'image', 'left=20,top=20,screenX=20,screenY=20,width=400,height=400,toolbar=no,location=0,scrollbars=yes,resizable=yes');
    popupWindow.focus();

C'est à dire qu'il ouvre la nouvelle fenêtre en passant en paramètre le chemin de l'image, la largeur de l'écran, la hauteur de l'écran et l'overhead du navigateur en largeur et en hauteur (d'accord, j'aurais dû l'appeler "ho" et non "so"...)
Le programme PHP retrouve les dimensions du fichier image et la page générée contient du JS qui est sensé gérer tout ce bouzin. Ça marche "à peu près", mais je n'arrive pas à ce que ça marche bien... Smiley sweatdrop
Jackdu68 a écrit :
Bonjour,
Pourquoi ne pas utiliser du "prémaché" avec Jquery fancybox ?

Merci de ta réponse.
Nous n'utilisons pas JQuery dans ce site, et du reste, après l'avoir utilisé ailleurs j'ai laissé tomber: tout ce fait JQuery, qui est un module écrit en JS, peut être fait en JS, et au moins on comprend ce qu'on fait.
Par ailleurs je ne vois pas en quoi JQuery pourrait m'aider dans cette situation: c'est manifestement un problème d'algorithme que je n'arrive pas à voir de moi même.

L'inconvénient d'être retraité, c'est qu'on n'a pas de collègue à qui faire relire son code, c'est pourquoi ce site m'est tellement utile, grâce à la coopération entre ses membres.