Popup et jquery

Le Fou :

Bonjour,

J'utilise ce script (mis à jour 2013) pour afficher une photo dans une popup
:
<http://sohtanaka.developpez.com/tutoriels/javascript/creez-fenetre-modale-avec-css-et-jquery/>

J'aimerais que la photo s'adapte aux dimensions de la fenêtre du navigateur,
que dois-je rajouter (modifier) au script ?

Merci.

Bricoler le CSS devrait le faire. Voyez du coté de:

.popup_block {
...
max-height: 95%;
max-width: 95%;
}
En virant ce qui actuellement détermine height et width.

--
Pierre Maurette

Le 12/04/2017 à 17:27, Pierre Maurette a écrit :

Le Fou :

J'utilise ce script (mis à jour 2013) pour afficher une photo dans une
popup :

<http://sohtanaka.developpez.com/tutoriels/javascript/creez-fenetre-modale-avec-css-et-jquery/>

J'aimerais que la photo s'adapte aux dimensions de la fenêtre du
navigateur, que dois-je rajouter (modifier) au script ?

Bricoler le CSS devrait le faire. Voyez du coté de:

.popup_block {
...
max-height: 95%;
max-width: 95%;
}
En virant ce qui actuellement détermine height et width.

Non, ça ne fonctionne pas, l'image et entièrement décalée, moitié hors
écran et on ne peut plus la fermer

La largeur est actuellement définie dans le code html par :
<a href="#" data-width="1204" data-rel="popimage_01" class="poplight">
et récupérée dans le script par :
var popWidth = $(this).data('width'); //Récupérer la largeur

J'aimerais remplacer tout ça par les dimensions de la fenêtre du
navigateur mais je ne connais pas jquery et comment peut faire ce script
(js_popup) pour les récupérer...

--
A' tchao

Le Fou
http://shippylelivre.free.fr/
http://www.ffessm-cd84.com/

Le Fou :

Le 12/04/2017 à 17:27, Pierre Maurette a écrit :
> Le Fou :
>> J'utilise ce script (mis à jour 2013) pour afficher une photo dans une
>> popup :
>>
<http://sohtanaka.developpez.com/tutoriels/javascript/creez-fenetre-modale-avec-css-et-jquery/>
>> J'aimerais que la photo s'adapte aux dimensions de la fenêtre du
>> navigateur, que dois-je rajouter (modifier) au script ?


> Bricoler le CSS devrait le faire. Voyez du coté de:
>
> .popup_block {
> ...
> max-height: 95%;
> max-width: 95%;
> }
> En virant ce qui actuellement détermine height et width.


Non, ça ne fonctionne pas, l'image et entièrement décalée, moitié hors écran
et on ne peut plus la fermer

La largeur est actuellement définie dans le code html par :
<a href="#" data-width="1204" data-rel="popimage_01" class="poplight">
et récupérée dans le script par :
var popWidth = $(this).data('width'); //Récupérer la largeur

J'aimerais remplacer tout ça par les dimensions de la fenêtre du navigateur
mais je ne connais pas jquery et comment peut faire ce script (js_popup) pour
les récupérer...

Ça doit pourtant marcher.
Je ne connais pas votre code, je suis obligé de faire l'hypothèse que
vous avez une image en pop-up modal. Dans ces conditions, le code
jquery gère l'apparition, le masque presque opaque, la disparition,
c'est tout. Vous pouvez virer tout ce qui concerne les dimensions et le
positionnement de l'image. Sauf [voir plus bas].
L'image est supposée avoir la classe popup_block. Elle est positionnée
par:
.popup_block {
position: fixed;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
max-height: 100%;
max-width: 100%;
}
La référence pour calculer les pourcentages est:
Le conteneur (écran pour 'fixed', page entière pour 'absolute') pour
top, left, max-height, max-width.
L'objet (l'image), après l'application de max-height et max-width pour
transform.
On peut donc voir que l'image sera centrée.
En remplaçant 100% par 94% par exemple, on préservera une marge de 3%
de l'écran.
max-height et max-width se comportent intelligemment, l'image ne sera
pas modifiée si elle est plus petite, sinon elle le sera en préservant
son ratio largeur/hauteur.

Via jquery, on peut animer top ou margin-top, ou alors left ou
margin-left pour faire apparaitre l'image "en volet". On peut même
compliquer, diagonale, etc.

Si vraiment vous ne souhaitez pas utiliser transform..., et passer par
les margin, il faudra bricoler votre jquery. Je pense qu'il suffira de
faire:
let votreimage = $('#....');
let mt = votreimage.height() / 2;
votreimage.css('margin-top', '-' + mt + 'px')
let ml = votreimage.width() / 2;
votreimage.css('margin-left', '-' + ml + 'px')

--
Pierre Maurette

Le 13/04/2017 à 14:19, Pierre Maurette a écrit :

L'image est supposée avoir la classe popup_block.

Je commence à comprendre comment fonctionne mon code ^^
Ce n'est pas l'image qui a la classe popup_block mais le DIV qui
contient l'image.
C'est pour ça qu'en modifiant les dimensions du DIV ça ne change rien à
celles de l'image.

Je vais donc essayer de modifier le code pour agir directement sur
l'image. J'ai déjà quelques pistes ;-)

Merci pour votre patience.

--
A' tchao

Le Fou
http://shippylelivre.free.fr/
http://www.ffessm-cd84.com/

Le Fou :

Le 13/04/2017 à 14:19, Pierre Maurette a écrit :

L'image est supposée avoir la classe popup_block.

Je commence à comprendre comment fonctionne mon code ^^
Ce n'est pas l'image qui a la classe popup_block mais le DIV qui contient
l'image.
C'est pour ça qu'en modifiant les dimensions du DIV ça ne change rien à
celles de l'image.

Je vais donc essayer de modifier le code pour agir directement sur l'image.
J'ai déjà quelques pistes ;-)

Sous réserves d'essais:
C'est le div qui sera en fixed, et sur lequel on appliquera top, left
et transform. En revanche c'est directement l'image qui recevra
max-height et max-width. Vous stylez les images soit en leur donnant
une classe, une id, ou par .popup_block img { ... }

--
Pierre Maurette