Connexion
Derniers sujets
» *RESOLU*[PhpBB3] Aide sur syntaxe JS
par Milouze14 Aujourd'hui à 17:35
» *RESOLU*[ModernBB] Décoration !
par Milouze14 Aujourd'hui à 16:55
» *RESOLU*[Invision] Vote négatif réservé aux modérateurs et administrateurs
par Milouze14 Aujourd'hui à 16:12
» *RESOLU*[ModernBB] Cherche script participation et autres
par Milouze14 Hier à 17:59
» [Toutes versions]Ajouter un contenu visible que par les membres ayant répondu.
par oneandone Hier à 17:37
» [PhpBB2] Supprimer zone commentaires des infos profil
par Milouze14 Hier à 6:02
» *RESOLU*[PhpBB2] Supprimer champ de contact dans les infos de profil,
par Milouze14 Dim 8 Déc 2019 - 20:29
» *RESOLU*[Invision] Déplacement du bouton résolu (suite et fin?)
par Milouze14 Dim 8 Déc 2019 - 9:01
» Règlement de l'entraide Forumactif
par oneandone Sam 7 Déc 2019 - 13:58
» *RESOLU*[PhpBB3] Outil modération
par Milouze14 Jeu 5 Déc 2019 - 19:30
» *CORBEILLE*[Edge] Pub intrusive
par Milouze14 Mer 4 Déc 2019 - 3:55
» *RESOLU*[PhpBB3] Compte à rebours hebdomadaire permanent
par Milouze14 Mar 3 Déc 2019 - 19:02
» *RESOLU*[PhpBB2] Selecteur de style | placement
par Milouze14 Mar 3 Déc 2019 - 16:32
» *RESOLU*[PhpBB3] Retirer lien Signaler un abus
par Milouze14 Lun 2 Déc 2019 - 15:10
» *RESOLU*[PhpBB2] Largeur du forum
par Milouze14 Lun 2 Déc 2019 - 3:55
» [PhpBB2] Du relief sur mon annonce
par Milouze14 Dim 1 Déc 2019 - 15:24
» [Edge] Ajouter un bouton j'aime
par Milouze14 Sam 30 Nov 2019 - 16:04
» Histoire de Blondes Sans Fin
par Quad Daniel Ven 29 Nov 2019 - 8:46
» [PhpBB2] Mettre une ancre sur chaque sujet contenu dans la liste des sujets
par Milouze14 Jeu 28 Nov 2019 - 15:26
» histoire du Jour sans fin
par Quad Daniel Jeu 28 Nov 2019 - 7:29
par Milouze14 Aujourd'hui à 17:35
» *RESOLU*[ModernBB] Décoration !
par Milouze14 Aujourd'hui à 16:55
» *RESOLU*[Invision] Vote négatif réservé aux modérateurs et administrateurs
par Milouze14 Aujourd'hui à 16:12
» *RESOLU*[ModernBB] Cherche script participation et autres
par Milouze14 Hier à 17:59
» [Toutes versions]Ajouter un contenu visible que par les membres ayant répondu.
par oneandone Hier à 17:37
» [PhpBB2] Supprimer zone commentaires des infos profil
par Milouze14 Hier à 6:02
» *RESOLU*[PhpBB2] Supprimer champ de contact dans les infos de profil,
par Milouze14 Dim 8 Déc 2019 - 20:29
» *RESOLU*[Invision] Déplacement du bouton résolu (suite et fin?)
par Milouze14 Dim 8 Déc 2019 - 9:01
» Règlement de l'entraide Forumactif
par oneandone Sam 7 Déc 2019 - 13:58
» *RESOLU*[PhpBB3] Outil modération
par Milouze14 Jeu 5 Déc 2019 - 19:30
» *CORBEILLE*[Edge] Pub intrusive
par Milouze14 Mer 4 Déc 2019 - 3:55
» *RESOLU*[PhpBB3] Compte à rebours hebdomadaire permanent
par Milouze14 Mar 3 Déc 2019 - 19:02
» *RESOLU*[PhpBB2] Selecteur de style | placement
par Milouze14 Mar 3 Déc 2019 - 16:32
» *RESOLU*[PhpBB3] Retirer lien Signaler un abus
par Milouze14 Lun 2 Déc 2019 - 15:10
» *RESOLU*[PhpBB2] Largeur du forum
par Milouze14 Lun 2 Déc 2019 - 3:55
» [PhpBB2] Du relief sur mon annonce
par Milouze14 Dim 1 Déc 2019 - 15:24
» [Edge] Ajouter un bouton j'aime
par Milouze14 Sam 30 Nov 2019 - 16:04
» Histoire de Blondes Sans Fin
par Quad Daniel Ven 29 Nov 2019 - 8:46
» [PhpBB2] Mettre une ancre sur chaque sujet contenu dans la liste des sujets
par Milouze14 Jeu 28 Nov 2019 - 15:26
» histoire du Jour sans fin
par Quad Daniel Jeu 28 Nov 2019 - 7:29
*RESOLU*[PhpBB3] Miniature agrandie sur réponse rapide
Page 1 sur 1 • Partagez
- photoclicMilouzien
- Version du forum :PhpBB3
- Templates modifiés :oui
- Navigateur :Firefox
Bonjour,
Philippe m'a écrit ce script qui permet d'avoir dans la réponse rapide à droite de la zone de saisie une miniature de l'image postée.
Je ne sais pas s'il faut ou non mettre en hide les codes écrits par Philippe.
Serait-il possible d'avoir en plus de l'existant:
. au clic sur la miniature, la photo qui s'affiche en plus grand à droite de la zone de saisie (et recouvrirait alors la miniature. Largeur maxi: 540px - Hauteur maxi; 440px.
. Un X par exemple pour fermer cette photo agrandie.
. Un texte en dessous de la miniature existante indiquant "Cliquer sur la photo pour une vue agrandie".
Réponse rapide actuelle:
Réponse rapide avec l'image agrandie:
Un grand merci pour votre aide.
Philippe m'a écrit ce script qui permet d'avoir dans la réponse rapide à droite de la zone de saisie une miniature de l'image postée.
Je ne sais pas s'il faut ou non mettre en hide les codes écrits par Philippe.
Serait-il possible d'avoir en plus de l'existant:
. au clic sur la miniature, la photo qui s'affiche en plus grand à droite de la zone de saisie (et recouvrirait alors la miniature. Largeur maxi: 540px - Hauteur maxi; 440px.
. Un X par exemple pour fermer cette photo agrandie.
. Un texte en dessous de la miniature existante indiquant "Cliquer sur la photo pour une vue agrandie".
Réponse rapide actuelle:
- Spoiler:
Réponse rapide avec l'image agrandie:
- Spoiler:
Un grand merci pour votre aide.
Dernière édition par photoclic le Jeu 21 Nov 2019 - 15:04, édité 1 fois
- fasciculariaMilouzien
Dernière édition par fascicularia le Mar 19 Nov 2019 - 10:03, édité 1 fois
- Milouze14Fondateur
Hello Serge et Stéphane,
alors effectivement, cela risque d'être compliqué Serge.
Je viens de concocter un script et revu le code html de la miniature car il possède une position relative , ce qui n'est pas l'idéal pour de bon placement ( pas financier
).
En faite, il vaut mieux placer l'image agrandie au centre du bas de page avec
une légère transition.
J'ai fait deux trois essais avec des images plus ou moins importante, i faut bien prendre en compte Serge, que mettre des max-width et max-height va occasionner des différences..
Le script qui doit fonctionner pour les résolutions supérieures à 600 px:
La css associée (donc mettre de côté le style mentionné plus haut)
Pour le texte ajouté en dessous de la miniature, ce dernier est trop long pour la petite largeur
de la miniature donc:
"Cliquer sur la photo pour une vue agrandie"
J'ai volontairement déposé une infobulle avec ce texte mais j'ai juste déposé:
"Cliquer sur la photo..."
Je te laisse découvrir le script qui va au clic sur le texte afficher la photo avec les dimensions désirées, et une bordure rouge et un border radius viendront impacter la miniature tant que l'image est aggrandie.
Lors de la fermeture (la croix volontairement placée à gauche pour les petites images ), la miniature retrouvera son apparence.
Je me suis basé sur le style de ton fofo background et couleur.
La c.s.s est commentée Serge.
Bon courage mon ami.
alors effectivement, cela risque d'être compliqué Serge.
Je viens de concocter un script et revu le code html de la miniature car il possède une position relative , ce qui n'est pas l'idéal pour de bon placement ( pas financier

En faite, il vaut mieux placer l'image agrandie au centre du bas de page avec
une légère transition.
J'ai fait deux trois essais avec des images plus ou moins importante, i faut bien prendre en compte Serge, que mettre des max-width et max-height va occasionner des différences..
Le script qui doit fonctionner pour les résolutions supérieures à 600 px:
- Code:
//Miniature sur réponse rapide
$(function(){
if ($(window).width() > 600)
{
if (_userdata["user_id"] >= (0)){
if($('a.nav[href^="/f4-"],a.nav[href^="/f1-"],a.nav[href^="/f5-"],a.nav[href^="/f6-"],a.nav[href^="/f19-"]').length)
{
var a=$('div[class*="post--"]:first').find('.postbody .content img:not([longdesc]):eq(0)').attr('src');
if(a)
{
var c=$('div[class*="post--"]:first').find('h2.topic-title a[href^="/t"]').text();
var d=$('.post:eq(0) .inner .postbody p.author a[href^="/u"]').text();
$('form[id="quick_reply"]').before('<div class="M14_link_Minia"title=" '+c+' posté par '+d+' "><img class="M14_img_Minia"src="'+a+'"/><br /><div class="M14_quick_texte"title="Cliquer sur la photo pour une vue agrandie">Cliquer sur la photo...</div></div><br /><div id="M14_quick_img_Minia"><div class="M14_quick_img_close"title="Fermer"><img src="https://i.servimg.com/u/f20/20/11/87/27/delete10.png"/></div><div id="M14_quick_Minia_big"><img src="'+a+'"/></div></div>');
$('.M14_quick_texte').click(function(){
$('#M14_quick_img_Minia').fadeIn(800);
$('img.M14_img_Minia').css('borderColor','red');
$('img.M14_img_Minia').css('borderRadius','8px');
});
$('.M14_quick_img_close').click(function(){
$('#M14_quick_img_Minia').fadeOut(800);
$('img.M14_img_Minia').css('borderColor','white');
$('img.M14_img_Minia').css('borderRadius','6px');
});}};}}});
La css associée (donc mettre de côté le style mentionné plus haut)
- Code:
/*Miniature réponse rapide*/
.M14_link_Minia {
margin-left: 53%;
border: 2px solid white;
position: absolute;
max-width:150px;
max-height:150px;
}
img.M14_img_Minia{
max-width:150px;
max-height:150px;
border: 3px white;
border-style: ridge;
border-radius:4px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
/*Le contenur principal*/
div#M14_quick_img_Minia
{
display:none;
max-width:600px;
max-height:500px;
background-color:#3bd9eb;
position:fixed;
padding:5px;
left:25%;
bottom:15%;
z-index: 999;
border-radius: 10px;
}
/*Le connteneur de la miniature augmentee*/
div#M14_quick_Minia_big
{
padding: 10px;
margin:auto;
border-radius: 10px;
background-color:#454444;
}
/*La miniature augmentee*/
div#M14_quick_Minia_big img
{
margin:auto;
max-width:540px;
max-height:440px;
border-radius: 10px;
}
/*On ponsitionne le bouton de fermeture*/
div.M14_quick_img_close img{cursor:pointer;position:absolute;margin-left:5%;margin-top:24px;}
/*La div recevant le texte*/
.M14_quick_texte{cursor:pointer;color:#3bd9eb;}
Pour le texte ajouté en dessous de la miniature, ce dernier est trop long pour la petite largeur
de la miniature donc:
"Cliquer sur la photo pour une vue agrandie"
J'ai volontairement déposé une infobulle avec ce texte mais j'ai juste déposé:
"Cliquer sur la photo..."
Je te laisse découvrir le script qui va au clic sur le texte afficher la photo avec les dimensions désirées, et une bordure rouge et un border radius viendront impacter la miniature tant que l'image est aggrandie.
Lors de la fermeture (la croix volontairement placée à gauche pour les petites images ), la miniature retrouvera son apparence.
Je me suis basé sur le style de ton fofo background et couleur.
La c.s.s est commentée Serge.
Bon courage mon ami.
- Milouze14Fondateur
Tu as ce script identique (sauf l'image de fermeture transparente avec un fond marron) mais en ajoutant le texte du sujet plus l'auteur au survol de l'image agrandie:
Tu peux changer l'image de fermeture en modifiant le lien sur la variable "u"
Puis la c.s.s en renseignant les dimensions en pixels et non en pourcentage:
Tu peux changer l'image de fermeture en modifiant le lien sur la variable "u"
- Code:
//Miniature sur réponse rapide
$(function(){
if ($(window).width() > 600)
{
if (_userdata["user_id"] >= (0)){
if($('a.nav[href^="/f4-"],a.nav[href^="/f1-"],a.nav[href^="/f5-"],a.nav[href^="/f6-"],a.nav[href^="/f19-"]').length)
{
var a=$('div[class*="post--"]:first').find('.postbody .content img:not([longdesc]):eq(0)').attr('src');
if(a)
{
//image de fermeture
var u='https://i.servimg.com/u/f20/20/11/87/27/icon_d10.png';
var c=$('div[class*="post--"]:first').find('h2.topic-title a[href^="/t"]').text();
var d=$('.post:eq(0) .inner .postbody p.author a[href^="/u"]').text();
$('form[id="quick_reply"]').before('<div class="M14_link_Minia"title=" '+c+' posté par '+d+' "><img class="M14_img_Minia"src="'+a+'"/><br /><div class="M14_quick_texte"title="Cliquer sur la photo pour une vue agrandie">Cliquer sur la photo...</div></div><br /><div id="M14_quick_img_Minia"><div class="M14_quick_img_close"title="Fermer"><img src="'+u+'"/></div><div id="M14_quick_Minia_big"><img src="'+a+'"title=" '+c+' posté par '+d+' "/></div></div>');
$('.M14_quick_texte').click(function(){
$('#M14_quick_img_Minia').fadeIn(800);
$('img.M14_img_Minia').css('borderColor','red');
$('img.M14_img_Minia').css('borderRadius','8px');
});
$('.M14_quick_img_close').click(function(){
$('#M14_quick_img_Minia').fadeOut(800);
$('img.M14_img_Minia').css('borderColor','white');
$('img.M14_img_Minia').css('borderRadius','6px');
});}};}}});
Puis la c.s.s en renseignant les dimensions en pixels et non en pourcentage:
- Code:
/*Miniature réponse rapide*/
.M14_link_Minia {
margin-left: 53%;
border: 2px solid white;
position: absolute;
max-width:150px;
max-height:150px;
}
img.M14_img_Minia{
max-width:150px;
max-height:150px;
border: 3px white;
border-style: ridge;
border-radius:4px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
/*Le contenur principal*/
div#M14_quick_img_Minia
{
display:none;
width:400px;
height:400px;
background-color:#3bd9eb;
position:fixed;
padding:5px;
left:35%;
top:15%;
z-index: 999;
border-radius: 10px;
}
/*Le connteneur de la miniature augmentee*/
div#M14_quick_Minia_big
{
padding: 10px;
margin:auto;;
border-radius: 10px;
background-color:#454444;
}
/*La miniature augmentee*/
div#M14_quick_Minia_big img
{
margin:auto;
width:100%;
max-height:400px;
border-radius: 10px;
}
/*On ponsitionne le bouton de fermeture*/
div.M14_quick_img_close{cursor:pointer;position:absolute;margin-left:400px;margin-top:-28px;background-color:#454444;border-radius: 30px;}
/*La div recevant le texte*/
.M14_quick_texte{cursor:pointer;color:#3bd9eb;}
- Milouze14Fondateur
Hum, tout bon, je veux bien mais ici:
https://photoclic.forum-pro.fr/t21279-portraits-il-balayait-je-passais-par-la#274733
Ce n'est vraiment pas très esthétique Serge:
Tu as modifié la css donnée plus haut, çà ne ressemble plus à rien désormais!!!!
On ne peut plus fermer la fenêtre!!!
![*RESOLU*[PhpBB3] Miniature agrandie sur réponse rapide 0144](https://i.servimg.com/u/f20/20/11/87/27/0144.png)
Il faut modifier la position fixed par absolute, supprimer le top dans cette div ayant l'id:
https://photoclic.forum-pro.fr/t21279-portraits-il-balayait-je-passais-par-la#274733
Ce n'est vraiment pas très esthétique Serge:
Tu as modifié la css donnée plus haut, çà ne ressemble plus à rien désormais!!!!
On ne peut plus fermer la fenêtre!!!
![*RESOLU*[PhpBB3] Miniature agrandie sur réponse rapide 0144](https://i.servimg.com/u/f20/20/11/87/27/0144.png)
Elle ne reste pas accrochée à la zone de saisie de texte mais rest en position fixe.
Il faut modifier la position fixed par absolute, supprimer le top dans cette div ayant l'id:
- Code:
div#M14_quick_img_Minia
- photoclicMilouzien
- Milouze14Fondateur
Oui, j'ai remis comme c'était.
Je ne vois pas de différence Serge

En suite , joues avec des margin-left, margin-right,margin-top, margin-bottom, mais surtout pas mette une position relative Serge......
Puis cette miniature est vraiment vilaine:
![*RESOLU*[PhpBB3] Miniature agrandie sur réponse rapide 0145](https://i.servimg.com/u/f20/20/11/87/27/0145.png)
Je me sauve pour ce soir.
- Milouze14Fondateur
Coucou Serge,
, bon si tu le dis, c'est ton fofo Serge.
En partant de la même idée et en imposant une taille fixe sur l'image agrandie à 300px, on arrive à un truc pas trop vilain
essayes ce script et le style associé Serge:
Il faudra surement jouer avec un margin-top sur cette div:
En ajustant le css, c'est comme ce que j'avais en tête.

T'est vraiment extra Phil.
Encore un grand merci pour ce développement et pour tout le reste qui fait que nos forums sont aussi beaucoup les tiens.
Je passe en résolu l'ami![]()
En partant de la même idée et en imposant une taille fixe sur l'image agrandie à 300px, on arrive à un truc pas trop vilain
essayes ce script et le style associé Serge:
- Code:
//Miniature sur réponse rapide
$(function(){
if ($(window).width() > 600)
{
if (_userdata["user_id"] >= (0)){
if($('a.nav[href^="/f4-"],a.nav[href^="/f1-"],a.nav[href^="/f5-"],a.nav[href^="/f6-"],a.nav[href^="/f19-"]').length)
{
var a=$('div[class*="post--"]:first').find('.postbody .content img:not([longdesc]):eq(0)').attr('src');
if(a)
{
//image de fermeture
var u='https://i.servimg.com/u/f20/20/11/87/27/icon_d10.png';
var c=$('div[class*="post--"]:first').find('h2.topic-title a[href^="/t"]').text();
var d=$('.post:eq(0) .inner .postbody p.author a[href^="/u"]').text();
$('form[id="quick_reply"]').before('<div class="M14_link_Minia"title=" '+c+' posté par '+d+' "><img class="M14_img_Minia"src="'+a+'"/><br /><div class="M14_quick_texte"title="Cliquer sur la photo pour une vue agrandie">Cliquer sur la photo...</div></div><br /><div id="M14_quick_img_Minia"><div class="M14_quick_img_close"title="Fermer"><img src="'+u+'"/></div><div id="M14_quick_Minia_big"><img src="'+a+'"title=" '+c+' posté par '+d+' "/></div></div>');
$('.M14_quick_texte').click(function(){$('#M14_quick_img_Minia').fadeIn(800);});
$('.M14_quick_img_close').click(function(){$('#M14_quick_img_Minia').fadeOut(800);});}};}}
});
- Code:
/*Miniature réponse rapide*/
.M14_link_Minia {
margin-left: 53%;
border: 2px solid white;
position: absolute;
max-width:150px;
max-height:150px;
}
img.M14_img_Minia{
max-width:150px;
max-height:150px;
border: 3px white;
border-style: ridge;
border-radius:4px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
/*Le contenur principal*/
div#M14_quick_img_Minia
{
display:none;
width:300px;
height:300px;
position:absolute;
margin-left: 53%;
right: 200px;
margin-top:-75px;
z-index: 999;
}
/*La miniature augmentee*/
div#M14_quick_Minia_big img
{
height: 300px;
width: 300px;
border: 3px white;
border-style: ridge;
border-radius:4px;
}
/*On positionne le bouton de fermeture*/
div.M14_quick_img_close{cursor:pointer;position:absolute;margin-left:300px;margin-top:-28px;background-color:#454444;border-radius: 30px;}
/*La div recevant le texte*/
.M14_quick_texte{cursor:pointer;color:#3bd9eb;}
Il faudra surement jouer avec un margin-top sur cette div:
- Code:
div#M14_quick_img_Minia
- photoclicMilouzien
Bonjour Philippe,
Merci d'y revenir.
J'ai essayé ton dernier script.
Les animations sont très sympas et je les mets dans ma besace pour idées.
Faut savoir que les membres photographes n'apprécient pas les bordures et autres sur leur photos. A chaque fois que j'en ai mis, j'ai eu des retours pour les retirer.
Sur les photos, en imposant une taille, elles apparaissent déformées. Il est impératif de respecter systématiquement le rapport largeur X hauteur. c'est pour cela que je mets max-with et max-height.
Mais c'est vrai qu'en faisant ainsi, je ne peux pas centrer systématiquement la photo sur la partie droite et me cale donc sur le bord gauche et le sur le haut. Ainsi, une phot en format paysage occupe toute la largeur disponioblenet une photo en format portrait occupe toute la hauteur disponible.
Merci d'y revenir.
J'ai essayé ton dernier script.
Les animations sont très sympas et je les mets dans ma besace pour idées.
Faut savoir que les membres photographes n'apprécient pas les bordures et autres sur leur photos. A chaque fois que j'en ai mis, j'ai eu des retours pour les retirer.
Sur les photos, en imposant une taille, elles apparaissent déformées. Il est impératif de respecter systématiquement le rapport largeur X hauteur. c'est pour cela que je mets max-with et max-height.
Mais c'est vrai qu'en faisant ainsi, je ne peux pas centrer systématiquement la photo sur la partie droite et me cale donc sur le bord gauche et le sur le haut. Ainsi, une phot en format paysage occupe toute la largeur disponioblenet une photo en format portrait occupe toute la hauteur disponible.
- photoclicMilouzien
Bonsoir Philippe et Stéphane.
Merci pour votre aide.
Malheureusement, ce que vous me proposez ne colle malheureusement pas.
Les photos agrandies quelque soit leur format, ne doivent pas dépasser le cadre rouge ci-dessous et ne doivent pas être déformées.
Mais je suis obligé aussi de fixer le height car s'il y a une photo au format portrait, elle dépassera en bas.
Le seul truc que je n'ai pas réussi à faire, c'est de centrer horizontalement la photo quelque soit son format, en ayant toujours le X de la fermeture en haut à droite de la photo.
Le lien d'une photo au format paysage:
https://photoclic.forum-pro.fr/t21310-portraits-charpentier-de-marine-i#
Le lien d'une photo au format portrait:
https://photoclic.forum-pro.fr/t21279-portraits-il-balayait-je-passais-par-la#
Merci pour votre aide.
Malheureusement, ce que vous me proposez ne colle malheureusement pas.
Les photos agrandies quelque soit leur format, ne doivent pas dépasser le cadre rouge ci-dessous et ne doivent pas être déformées.
- Spoiler:
Mais je suis obligé aussi de fixer le height car s'il y a une photo au format portrait, elle dépassera en bas.
Le seul truc que je n'ai pas réussi à faire, c'est de centrer horizontalement la photo quelque soit son format, en ayant toujours le X de la fermeture en haut à droite de la photo.
Le lien d'une photo au format paysage:
https://photoclic.forum-pro.fr/t21310-portraits-charpentier-de-marine-i#
Le lien d'une photo au format portrait:
https://photoclic.forum-pro.fr/t21279-portraits-il-balayait-je-passais-par-la#
- fasciculariaMilouzien
question : quelle taille maxi font les plus grandes photos ?
A partir de cette info, il suffira de faire un ratio.
sans compter que tu peux faire varier la hauteur du textarea pour cadrer un peu mieux avec la hauteur.
Il faudrait savoir également le nombre de px restants en fonction des écrans qui répondent à cette condition :
Techniquement, le plus petit écran répondant à la condition fait 1024px (d’après ce site ).
L'éditeur fait 645 px tout en étant placé en plein milieu
En bref il reste de chaque côté :
(1024-645)/2=189.5
si cette valeur doit être la largeur de l'image agrandit est ce que la hauteur dépasse le cadre ?
A partir de cette info, il suffira de faire un ratio.
sans compter que tu peux faire varier la hauteur du textarea pour cadrer un peu mieux avec la hauteur.
Il faudrait savoir également le nombre de px restants en fonction des écrans qui répondent à cette condition :
- Code:
if ($(window).width() > 600)
Techniquement, le plus petit écran répondant à la condition fait 1024px (d’après ce site ).
L'éditeur fait 645 px tout en étant placé en plein milieu
En bref il reste de chaque côté :
(1024-645)/2=189.5
si cette valeur doit être la largeur de l'image agrandit est ce que la hauteur dépasse le cadre ?
- Milouze14Fondateur
Hello Serge,
on ne peut pas faire de miracle mon ami, portrait, paysage, petites, moyenne,
ou grandes images..
Cela devient du domaine de l'impossible, ce que tu souhaites, c'est d'avoir des images agrandies qui ne dépassent ps le cadre rouge, en gros 300px voir même moins..
Ce style devrait fonctionner Serge, pour le positionnement de croix ,
il faut le mentionner en pourcentage et non en px:
on ne peut pas faire de miracle mon ami, portrait, paysage, petites, moyenne,
ou grandes images..
Cela devient du domaine de l'impossible, ce que tu souhaites, c'est d'avoir des images agrandies qui ne dépassent ps le cadre rouge, en gros 300px voir même moins..
Ce style devrait fonctionner Serge, pour le positionnement de croix ,
il faut le mentionner en pourcentage et non en px:
- Code:
/*Miniature réponse rapide*/
.M14_link_Minia {
margin-left: 53%;
border: 2px solid white;
position: absolute;
max-width:150px;
max-height:150px;
}
img.M14_img_Minia{
max-width:150px;
max-height:150px;
border: 3px white;
border-style: ridge;
}
/*Le contenur principal*/
div#M14_quick_img_Minia
{
display:none;
max-width:300px;
height:300px;
position:absolute;
margin-left: 53%;
right:200px;
margin-top:-75px;
z-index: 999;
}
/*La miniature augmentee*/
div#M14_quick_Minia_big img
{
max-width:300px;
max-height:300px;
}
/*On ponsitionne le bouton de fermeture*/
div.M14_quick_img_close{cursor:pointer;position:absolute;margin-left:100%;margin-top:-28px;background-color:#454444;border-radius: 30px;}
/*La div recevant le texte*/
.M14_quick_texte{cursor:pointer;color:#3bd9eb;}
- photoclicMilouzien
Bonjour Philippe, et Stéphane,
Merci pour vos propositions.
Stéphane, le script est inhibé pour les écrans de petite taille pour éviter toute prise de tête :-)
Comme le dit Philippe pas de miracle avec ces tailles de photos variables.
Après des tas d'essais, j'ai fait un compromis qui semble satisfaisant et qui convient aux membres.
J'ai mis la fermeture à droite finalement.
Merci encore à vous 2 pour l'aide apportée.
Je passe en résolu.
Merci pour vos propositions.
Stéphane, le script est inhibé pour les écrans de petite taille pour éviter toute prise de tête :-)
Comme le dit Philippe pas de miracle avec ces tailles de photos variables.
Après des tas d'essais, j'ai fait un compromis qui semble satisfaisant et qui convient aux membres.
J'ai mis la fermeture à droite finalement.
Merci encore à vous 2 pour l'aide apportée.
Je passe en résolu.
Créer un compte ou se connecter pour répondre
Vous devez être membre pour répondre.
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum