[PhpBB3] Miniature agrandie sur réponse rapide

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.

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.

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:

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"

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

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.

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%;.

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.

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;

        } 

Bonsoir Philippe,

Merci d'être là.

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

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.

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

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.

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

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

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.

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

Oui, je finis la déco Phil.

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

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

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

Coucou Serge,

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.

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.

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 ?

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#

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 ?

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

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.