[Invision] Réduction image avec clic agrandissement

Coucou Dan,
ta demande reflète un peu le plugin FancyBox, comme ici en fait.

Cliques sur l'image et tu verras l'effet.



E.A a développé ce script :
https://forum.forumactif.com/t397762-diaporama-pour-visualiser-les-images-dans-les-messages-fancybox-ou-lightbox#3326082



Si c'est son souhait, il suffit de déposer ce script:


Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript
Mettre un titre explicite.

Cocher  Sur les sujets
Déposer ceci:

Code:


$(function () {
 
var getFancy = function () {
  $('head').append('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.2/jquery.fancybox.min.css"/><style>.fancybox-content{transition:none}</style>');
  $.ajax({url:'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.2/jquery.fancybox.min.js',cache:true,dataType:"script"}).then(function(){
    $.fancybox.defaults.hideScrollbar = false;
  });
  getFancy = function () {};
};
var contents = $('.post-entry,.post-content,.content,.postbody');
contents.find('img').css({maxWidth:'100%'}).not(contents.find('a img')).load(function () {
  if (100 < this.naturalWidth || 100 < this.naturalHeight) {
    $(this).wrap($('<a data-fancybox="gallery"/>').prop('href', $(this).prop('src'))).unbind('load');
    getFancy();
  }
}).load();
 
});


Penser a cliquer sur le bouton VALIDER




Les dimensions peuvent être modifiées dans le script ici:

Code:

if (100 < this.naturalWidth || 100 < this.naturalHeight) {

Code:

100 < this.naturalWidth

Signifie:plus grande que 100px de largeur

Code:

100 < this.naturalHeight)

Signifie:plus grande que 100px de hauteur

Bonsoir,
merci pour ta réponse phil ,
par-contre cela ne fonctionne pas l'ami

Hello Dan,
il faudrait désactiver la fonction agrandir les messages(zoom) car elle rentre en conflit mon ami.

Bonjour Phil,
ok je regarde ça dans la soirée 

Bonsoir Philippe cela fait 2 h que je cherche ?
j'ai trouvé ceci dans (les Sujets) 

Code:

// SCRIPT CONCERNANT Effet loupe sur chaque message


$(function(){
    // L IMAGE D OUVERTURE
    $('<span class="M14_open_Body"title="Agrandir le message"><img src="https://i.servimg.com/u/f68/16/47/45/04/zoom_i10.png"/></span>').insertBefore('.postbody .post-entry');
    //L IMAGE DE FERMETURE
    $('<span class="M14_close_Body"title="Réduire le message"style=display:none;"><img src="https://i.servimg.com/u/f68/16/47/45/04/zoom_o10.png"/></span>').appendTo('.postbody .post-entry');

    });
    //AU CLIC SUR L IMAGE OUVERTURE ON ATTRIBUE UN IDENTIFIANT AU POSTBODY
    $(function(){
    $('.M14_open_Body').click(function(){
    //ON CACHE L IMAGE D OUVERTURE
    $(this).hide();
    //ON ATTRIBUE UN IDENTIFIANT AU POSTBODY
    $(this).next('div').attr('id','M14_Effet_body');
    //ON AFFICHE L IMAGE DE FERMETURE AVEC TEMPORISATION
    $('.M14_close_Body').delay(800).fadeIn();
    });
    });

    $(function(){
    //AU CLIC SUR L IMAGE DE FERMETURE
    $('.M14_close_Body').click(function(){
    //ON CACHE L IMAGE DE FERMETURE
    $(this).hide();
    //ON SUPPRIME L IDENTIFIANT
    $('.post-entry').removeAttr('id');
    //ON AFFICHE L IMAGE D OUVERTURE AVEC TEMPORISATION
    $('.M14_open_Body').delay(500).fadeIn();
    });
    });

après suppression pareil, pour ne pas faire de bêtise je les remis ! dans les sujet

Hello Dan,
je vais regarder cela cette après midi directement sur ton fofo car j'ai déplacé le script via la gestion afin d voir si il ne rentré pas en conflit.
Je n'ai pas d'erreur à priori...

merci l'ami j'attend,
ce n'est pas une urgence, je suis pas en panne quand même; prend ton temps 
bonne journée a plus phil 

Re Dan,

alors, j'ai placé le script dans la gestion du même nom:
Je l'ai nommé:
"Zoom sur image [sur les sujets]"

Il est fonctionnel désormais.

bonjour Philippe, il fonctionne sauf que l'image s'ouvre a l'identique !
exemple lien ici 
si tu agrandie sur l'ancien lien agrandir cette image là tu la vois a grandeur réel.
amicalement

Ah effectivement, ensuite je ne connais pas beaucoup de personne qui demande d'avoir une image qui s'affiche dans son format initial.

On peut le faire mais tout cela cela s'affichera dans une nouvelle fenêtre Dan.
Est-ce réellement ton souhait?

Tu peux supprimer le script en attendant mon ami.

Je verrais tout cela demain.

je te fais toujours confiance je suis ton idée 
je peut réduire les images générale ?
si c'est trop de taf je laisse comme ça tu vois

grand merci phil pour ton aide, j'ai réduit les images de mon forum dans PA/Général/Configuration à 600 sur 450
je souhaite si possible quelle s'ouvre naturellement, mais en me laissant la possibilité de régler un maxi/ Mini
qui s'ouvre en un maxi de Largeur : 900 sur Hauteur : 750 si il est possible de limiter la hauteur largeur
encore mille excuse
Amicalement 

Ah ben c'est parfait alors

oups j'ai fais une modif au dessus je te pansé partie   désolé ici
car j'ai constater quelle s'ouvre a l'identique d'avant

Hello Dan,

Quad Daniel a écrit:grand merci phil pour ton aide, j'ai réduit les images de mon forum dans PA/Général/Configuration à 600 sur 450
je souhaite si possible quelle s'ouvre naturellement, mais en me laissant la possibilité de régler un maxi/ Mini
qui s'ouvre en un maxi de Largeur : 900 sur Hauteur : 750 si il est possible de limiter la hauteur largeur
encore mille excuse
Amicalement 

Pour le style, tout est hébergé dans le script mon ami, cela risque d'être compliqué

je souhaite si possible quelle s'ouvre naturellement,

Tu veux que les images s'ouvrent automatiquement sans rien faire?
Hou la, il vaut mieux éviter ce genre de comportement mon ami si réellement c'est ton souhait.

Ensuite, ce que tu demandes est pratiquement impossible a réaliser Dan,
le script actuel est de loin celui qui correspondrait le mieux à ta demande.
Il faut aussi prendre en compte, que des membres peuvent poster des images faisant admettons:
2500px par 2500px et que pour un membre ayant une petite résolution d'écran,il sera pénalisé .

bonjour phil, effectivement je ne pansé plus au petit écran voir tablette, donc 2500 oké;
pour le reste pardon je me suis mal exprimé je ne souhaite pas quelle s'ouvre seul quant je disais naturellement, je voulais dire au format origine d'enregistrement (grandeur image original)
je souhaite que les images s'ouvre en un clic comme sur ton forum. encore mille excuse mon cerveau me fais toujours défaut.
je viens de remarqué, est t'il possible de faire avec les flèches défilement images, uniquement sur les page sujets approprié quant il y a plusieurs images poster exemple https://www.quadsalvetain.com/t4391-scrambler-xp-1000cc-2019#82101
amicalement

Re Dan,

tu peux tester ce script (en supprimant l'autre) stp:

Code:

$(function () {
$('.post-entry').each(function(){
  //METTRE LE NOMBRE D IMAGES POUR DECLANCHER LA FANCYBOX
  var nombre=3;
var a=$(this).find('img').css({maxWidth:'100%'}).length;
if(a>=nombre){$(this).addClass('M14_fancy');}
  });  });

$(function () {
 
var getFancy = function () {
  $('head').append('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.2/jquery.fancybox.min.css"/><style>.fancybox-content{transition:none}</style>');
  $.ajax({url:'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.2/jquery.fancybox.min.js',cache:true,dataType:"script"}).then(function(){
    $.fancybox.defaults.hideScrollbar = false;
  });
  getFancy = function () {};
};
var contents = $('.post-entry.M14_fancy');
contents.find('img').css({maxWidth:'100%'}).load(function () {
  if (100 < this.naturalWidth || 100 < this.naturalHeight) {
    $(this).wrap($('<a data-fancybox="gallery"/>').prop('href', $(this).prop('src'))).unbind('load');
    getFancy();
  }
}).load();
 
});

Ici on dépose le nombre d'images désirées pour déclencher la FancyBox:

Code:

 
 //METTRE LE NOMBRE D IMAGES POUR DECLENCHER LA FANCYBOX
  var nombre=3;


Le script va rechercher le nombre d'images dans un message (3) pour le test.

Si tu désires que la Fancybox se déclenche si un message contient 2 images,
il faudra modifier le chiffre 3 par 2 .

bonsoir phil, cela ne fonctionne pas, ça m'ouvre serving, 
amicalement

Hello Dan,
Le script est fonctionnel Dan.

ça m'ouvre serving,

C'est tout ce que tu me donnes comme information?

Et cela veut dire quoi exactement?

bonjour phil ça fonctionne tu a modifier surement quelque chose 
là c'est bon il me manque juste que l'image s'ouvre a peine plus grand, peut tu me dire ou le modifier ?
car j'ai essayer ou il y a les pourcentages (100%) ça modifie rien.

Re Dan,
hum non, je n'ai rien modifié mon ami,
ensuite il faut laisser le script ainsi mon ami et on ne pourra pas faire mieux pour ce que tu demandes, techniquement il faut laisser ainsi,sinon il faut s'abstenir,
désolé de ne pas pouvoir faire mieux Dan

Merci phil pour ton aide, je vais le laisser comme ça
grand merci 

De rien Dan,