Astuces Forumactif
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Membres connectés récemment
Voir tous les membres

[PhpBB3] Miniature agrandie sur réponse rapide


3 participants

Page 1 sur 2 1, 2  Suivant

Voir le sujet précédent Voir le sujet suivant Aller en bas

photoclic
https://photoclic.forum-pro.fr/

Messagephotoclic Lun 18 Nov 2019 - 22:47

  • 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:
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
fascicularia
fascicularia
https://altitudetropicale.forums-actifs.com/

Messagefascicularia Mar 19 Nov 2019 - 3:52

Bonjour Serge,
une largeur de 540px ne risque pas de poser des soucis pour ceux qui ont un petit écran ou qui naviguent sur version mobile ?

Autrement, un simple hover sur img.M14_img_Minia devrait te permettre de faire un simple agrandissement de la miniature.



Dernière édition par fascicularia le Mar 19 Nov 2019 - 10:03, édité 1 fois
photoclic
https://photoclic.forum-pro.fr/

Messagephotoclic Mar 19 Nov 2019 - 10:01

Bonjour Stéphane,

Oui, tu as raison.
Ces valeurs seront peut-être à exprimer en %.

Sinon,j'ai des scripts qui sont inhibés pour les petits écrans. Je pense qu'il devrait y avoir ici également un if pour ne pas activer ce script sur petits écrans.

Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mar 19 Nov 2019 - 16:53

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 mdr ).

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.




Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mar 19 Nov 2019 - 17:47

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"
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;}


photoclic
https://photoclic.forum-pro.fr/

Messagephotoclic Mar 19 Nov 2019 - 18:47

Bonsoir Philippe,

Un grand merci pour ce travail.

Les codes sont intallés.
La miniature se trouve au dessus de la zone de saisie et il ne se passe rien quand je clique dessus.

Je vais essayer d'ajuster le css pour le posirionnement.
Tu es en mode admin, si tu veux voir.

fascicularia
fascicularia
https://altitudetropicale.forums-actifs.com/

Messagefascicularia Mar 19 Nov 2019 - 18:51

Je viens de tester et effectivement l'image passe sous l'éditeur.
Il suffit de modifier le margin-left de .M14_link_Minia à 75% au lieu de 53%;.



photoclic
https://photoclic.forum-pro.fr/

Messagephotoclic Mar 19 Nov 2019 - 18:56

Bonsoir Stéphane,

Oui, c'est ce que je venais de faire, mais il y a d'autres réglages à affiner.
L'image agrandie aussi est mal placée, et la position fixed serait à revoir.
Je fais des essais et je reviens.

Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mar 19 Nov 2019 - 18:59

Je viens d'ajouter un margin-top 80 px au conteneur:
Code:
        .M14_link_Minia {
        margin-left: 73%;
      border: 2px solid white;
        position: absolute;
          max-width:150px;
            max-height:150px;
  margin-top: 80px;

        } 


photoclic
https://photoclic.forum-pro.fr/

Messagephotoclic Mar 19 Nov 2019 - 19:05

Bonsoir Philippe,

Merci d'être là.

ça fonctionne, reste juste du css à affiner.
J'y retourne.

photoclic
https://photoclic.forum-pro.fr/

Messagephotoclic Mar 19 Nov 2019 - 19:11

Alors c'est tout bon Philippe.

Le seul truc qui m'ennuie eest que la photo agrandie ne se comporte pas comme la miniature.
Elle ne reste pas accrochée à la zone de saisie de texte mais rest en position fixe.

Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mar 19 Nov 2019 - 19:17

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!!!

[PhpBB3] Miniature agrandie sur réponse rapide 0144


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


photoclic
https://photoclic.forum-pro.fr/

Messagephotoclic Mar 19 Nov 2019 - 19:26

Oui, j'ai remis comme c'était.

En passant en position en absolute,et en supprimant le top l'image est au dessus de la miniature.

Edit: Désolé, J'avais mis relative pascontentGrrrrrr

Me reste à reprendre la déco et ça va coller....



Dernière édition par photoclic le Mar 19 Nov 2019 - 19:36, édité 1 fois
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mar 19 Nov 2019 - 19:34

Oui, j'ai remis comme c'était.

Je ne vois pas de différence Serge oups 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:

[PhpBB3] Miniature agrandie sur réponse rapide 0145


Je me sauve pour ce soir.






photoclic
https://photoclic.forum-pro.fr/

Messagephotoclic Mar 19 Nov 2019 - 19:38


J'avais edité pour dire que j'avais mis relative au lieu d'absolute.

Oui, je finis la déco Phil.

photoclic
https://photoclic.forum-pro.fr/

Messagephotoclic Mar 19 Nov 2019 - 19:47

Je dois m'absenter.
Je finirai dans la soirée.

Un grand merci pour tout Phil.
Bonne soirée.

photoclic
https://photoclic.forum-pro.fr/

Messagephotoclic Mar 19 Nov 2019 - 21:33

Me revoilou...

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 tape la


Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mer 20 Nov 2019 - 3:54

Coucou Serge,

En ajustant le css, c'est comme ce que j'avais en tête.

heuu , 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  tape la


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

photoclic
https://photoclic.forum-pro.fr/

Messagephotoclic Mer 20 Nov 2019 - 9:55

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.



fascicularia
fascicularia
https://altitudetropicale.forums-actifs.com/

Messagefascicularia Mer 20 Nov 2019 - 14:18

Pour la taille des images, tu peux fixer un width ou un max width en px ou en % et mettre un height ou un max height en auto. Cela évitera les déformations de la miniature ou de l'image agrandie.


Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mer 20 Nov 2019 - 17:41

Hello les amis,

les photos présentes sur ton fofo on au moins une taille supérieure a 400px,
on peut partir avec un width à 400px et hop le tour est joué non ?



photoclic
https://photoclic.forum-pro.fr/

Messagephotoclic Mer 20 Nov 2019 - 23:26

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.
Spoiler:
En fixant la largeur maxi, je suis certain que la photo ne sortira pas à droite.
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#



fascicularia
fascicularia
https://altitudetropicale.forums-actifs.com/

Messagefascicularia Jeu 21 Nov 2019 - 0:59

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 :
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 ?
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Jeu 21 Nov 2019 - 4:16

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:
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;}


photoclic
https://photoclic.forum-pro.fr/

Messagephotoclic Jeu 21 Nov 2019 - 15:02

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.

Page 1 sur 2 1, 2  Suivant

Voir le sujet précédent Voir le sujet suivant Revenir en haut

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum