Membres connectés récemment
[PhpBB3] Miniature agrandie sur réponse rapide
3 participants
Page 1 sur 2
Page 1 sur 2 • 1, 2
- 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.
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.
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;}
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!!!
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!!!
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
Oui, j'ai remis comme c'était.
Je ne vois pas de différence Serge sauf pour la position fixed modifiée en absolute.
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:
Je me sauve pour ce soir.
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.
, bon si tu le dis, c'est ton fofo Serge.
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
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.
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#
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 ?
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;}
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.
Page 1 sur 2 • 1, 2
Sujets similaires
Créer un compte ou se connecter pour répondre
Vous devez être membre pour répondre.
Page 1 sur 2
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum