Connexion

Récupérer mon mot de passe

Derniers sujets
» [Edge] Astuces sur le forum
par msfeettoes Aujourd'hui à 9:34

» [PhpBB2] Interdire citation dernier message
par Milouze14 Hier à 14:27

» Règlement de l'entraide Forumactif
par -Tony- Sam 14 Déc 2019 - 23:53

» *RESOLU*[Invision] Alerte message reçu dans messagerie
par Milouze14 Sam 14 Déc 2019 - 7:18

» *RESOLU*[PhpBB2] Date d'entrée au forum
par Milouze14 Sam 14 Déc 2019 - 4:49

» *RESOLU*[Invision] Membres - 'cartes de visite'
par Milouze14 Sam 14 Déc 2019 - 4:46

» [PhpBB2] Problème d'affichage FA messenger
par Milouze14 Ven 13 Déc 2019 - 3:54

» *RESOLU*[PhpBB2] Largeur cadre messagerie privé
par Milouze14 Jeu 12 Déc 2019 - 5:54

» *RESOLU*[PhpBB2] Supprimer zone commentaires des infos profil
par Milouze14 Mer 11 Déc 2019 - 17:06

» *RESOLU*[PhpBB3] Aide sur syntaxe JS
par Milouze14 Mar 10 Déc 2019 - 17:35

» *RESOLU*[ModernBB] Décoration !
par Milouze14 Mar 10 Déc 2019 - 16:55

» *RESOLU*[Invision] Vote négatif réservé aux modérateurs et administrateurs
par Milouze14 Mar 10 Déc 2019 - 16:12

» *RESOLU*[ModernBB] Cherche script participation et autres
par Milouze14 Lun 9 Déc 2019 - 17:59

» [Toutes versions]Ajouter un contenu visible que par les membres ayant répondu.
par oneandone Lun 9 Déc 2019 - 17:37

» *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

» *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*[Invision] Réduction image avec clic agrandissement

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

Quad Daniel
Quad Daniel
Animateur blagueur

MessageQuad Daniel le Mar 4 Juin 2019 - 8:23

  • Version du forum :
    Invision
  • Templates modifiés :
    oui
  • Navigateur :
    Chrome
Bonjour;

Lien forum: ICI https://www.quadsalvetain.com/
CSS ici:
Css *RESOLU*[Invision] Réduction image avec clic agrandissement Voirba11
CSS:






j'utilise Google
je suis en Invision


serai t'il possible d'avoir les les images limité en dimension limité Largeur a 600 et Hauteur a 450 qui s'ouvre en un clic pour un aperçu grandeur origine ou voir une grandeur limité. 
 "que je pourrais modifier ensuite pour l'adapter a mon forum"
Cordialement

en image *RESOLU*[Invision] Réduction image avec clic agrandissement Voirba11
en image:

je veux éviter ceci avec lien agrandissement au dessus image*RESOLU*[Invision] Réduction image avec clic agrandissement Voirba11
*RESOLU*[Invision] Réduction image avec clic agrandissement Agran110
je souhaite ceci si possible*RESOLU*[Invision] Réduction image avec clic agrandissement Voirba11
*RESOLU*[Invision] Réduction image avec clic agrandissement Ommtra10



Dernière édition par Quad Daniel le Sam 8 Juin 2019 - 19:06, édité 1 fois
Milouze14
Milouze14
Fondateur

MessageMilouze14 le Mar 4 Juin 2019 - 15:21

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

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

*RESOLU*[Invision] Réduction image avec clic agrandissement Agran110

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
Quad Daniel
Quad Daniel
Animateur blagueur

MessageQuad Daniel le Mar 4 Juin 2019 - 21:45

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

MessageMilouze14 le Mer 5 Juin 2019 - 4:04

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

Quad Daniel
Quad Daniel
Animateur blagueur

MessageQuad Daniel le Mer 5 Juin 2019 - 7:36

Bonjour Phil,
ok je regarde ça dans la soirée  clin oeil
Quad Daniel
Quad Daniel
Animateur blagueur

MessageQuad Daniel le Mer 5 Juin 2019 - 20:30

Bonsoir Philippe cela fait 2 h que je cherche ?
j'ai trouvé ceci dans (les Sujets) *RESOLU*[Invision] Réduction image avec clic agrandissement Voirba11
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
Milouze14
Milouze14
Fondateur

MessageMilouze14 le Jeu 6 Juin 2019 - 4:29

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...
Quad Daniel
Quad Daniel
Animateur blagueur

MessageQuad Daniel le Jeu 6 Juin 2019 - 14:05

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

MessageMilouze14 le Jeu 6 Juin 2019 - 16:47

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.
Quad Daniel
Quad Daniel
Animateur blagueur

MessageQuad Daniel le Jeu 6 Juin 2019 - 19:30

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

MessageMilouze14 le Jeu 6 Juin 2019 - 19:36

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.
Quad Daniel
Quad Daniel
Animateur blagueur

MessageQuad Daniel le Jeu 6 Juin 2019 - 19:38

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
Quad Daniel
Quad Daniel
Animateur blagueur

MessageQuad Daniel le Jeu 6 Juin 2019 - 19:42

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  clin oeil


Dernière édition par Quad Daniel le Jeu 6 Juin 2019 - 20:01, édité 3 fois
Milouze14
Milouze14
Fondateur

MessageMilouze14 le Jeu 6 Juin 2019 - 19:47

Ah ben c'est parfait alors clin oeil
Quad Daniel
Quad Daniel
Animateur blagueur

MessageQuad Daniel le Jeu 6 Juin 2019 - 19:55

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

MessageMilouze14 le Ven 7 Juin 2019 - 3:53

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  clin oeil

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

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é clin oeil .





Quad Daniel
Quad Daniel
Animateur blagueur

MessageQuad Daniel le Ven 7 Juin 2019 - 12:27

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

MessageMilouze14 le Ven 7 Juin 2019 - 18:32

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 .


Quad Daniel
Quad Daniel
Animateur blagueur

MessageQuad Daniel le Ven 7 Juin 2019 - 20:52

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

MessageMilouze14 le Sam 8 Juin 2019 - 3:58

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?
Quad Daniel
Quad Daniel
Animateur blagueur

MessageQuad Daniel le Sam 8 Juin 2019 - 9:23

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.
Milouze14
Milouze14
Fondateur

MessageMilouze14 le Sam 8 Juin 2019 - 19:01

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 oups1
Quad Daniel
Quad Daniel
Animateur blagueur

MessageQuad Daniel le Sam 8 Juin 2019 - 19:06

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

MessageMilouze14 le Sam 8 Juin 2019 - 19:07

De rien Dan,


Coucou

Sujet résolu et déplacé dans le forum adéquate

A bientôt pour une prochaine demande clin oeil

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