[AwesomeBB] Script pour redimensionner une image

3 participants

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

Résolu [AwesomeBB] Script pour redimensionner une image

Message par Invité Mar 28 Fév 2023 - 10:56

Détails techniques


Version du forum : AwesomeBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://gemurama.com/

Description du problème

Bonjour,

Je voudrais installer un script pour redimensionner une image dans un message. Je sais qu'on peut déjà le faire avec les options de base mais celui-ci semble mieux et surtout plus complet : https://fmdesign.forumotion.com/t544-image-resizer

Il s'agit d'un très vieux script, j'aimerais si possible qu'on le rende compatible avec AwesomeBB Smile

Merci d'avance pour votre aide


Dernière édition par Zlork le Sam 4 Mar 2023 - 12:10, édité 1 fois
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [AwesomeBB] Script pour redimensionner une image

Message par creange Mar 28 Fév 2023 - 19:48

Bonjour Zlork

tu peux  essayer ce code que j'ai placé dans mes modules sur l'index et tous les sujets

Code:
//Recherche des image dans le contenu
$(function(){
$('.postbody .content').find('img').addClass('M14_Resize').attr
("onclick","window.open(this.src);return false").attr("title","Cliquez pour voir l'image dans sa totalité");
//Suppression de la class sur les smileys
$('img[longdesc]').removeClass().removeAttr('onclick');
});
//On entoure l image pour donner une apparence optionnel
$(function(){
$('img.M14_Resize').wrap('<span id="M14_Resize"></span>');
});

et tu peux rajouter ce code dans ton css

Code:

      /***DEBUT du code faire AGRANDIR L'IMAGE***/
        .postbody .content img {
        -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -ms-transition: all 1s ease;
        -o-transition: all 1s ease;
        transition: all 1s ease;
        }
        .postbody .content img:hover {
        -webkit-transform:scale(1.6);
        -moz-transform:scale(1.6);
          -ms-transform:scale(1.6);
        -o-transform:scale(1.6);
        transform:scale(1.6);
        }
        /***FIN du code faire AGRANDIR L'IMAGE***/

ce code permets de redimentionner les images et de pouvoir les  zoomer et d'avoir en même temps une image cliquable
creange

creange
*****

Féminin
Messages : 759
Inscrit(e) le : 31/03/2011

https://dangela.forumgratuit.org/
creange a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [AwesomeBB] Script pour redimensionner une image

Message par chattigre Mar 28 Fév 2023 - 19:55

Bonjour,

Pour rendre compatible le script demandé, il suffit de suivre le tutoriel ^^

Remplacez :
Code:
            selector : '.postbody > div:not(.user):not(.postprofile) img, .mod_news img, .message-text img', // where images should be resized
Par
Code:
selector : 'div.post-content, div.block-blogrow-content, div.block.block-comment .content, div.block-pm .content, div.mod-news .content'

Bonne journée
Cordialement
chattigre

chattigre
Aidactif
Aidactif

Masculin
Messages : 3584
Inscrit(e) le : 17/04/2019

https://test1-chattigre.forumactif.fr
chattigre a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [AwesomeBB] Script pour redimensionner une image

Message par Invité Mar 28 Fév 2023 - 20:24

chattigre a écrit:Bonjour,

Pour rendre compatible le script demandé, il suffit de suivre le tutoriel ^^

Remplacez :
Code:
            selector : '.postbody > div:not(.user):not(.postprofile) img, .mod_news img, .message-text img', // where images should be resized
Par
Code:
selector : 'div.post-content, div.block-blogrow-content, div.block.block-comment .content, div.block-pm .content, div.mod-news .content'

Bonne journée
Cordialement

Ca ne fonctionne pas, ça fout en l'air tout le truc Laughing

[AwesomeBB] Script pour redimensionner une image Captu168
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [AwesomeBB] Script pour redimensionner une image

Message par Invité Mer 1 Mar 2023 - 16:53

Creange, je n'ai pas vu ton message.

Merci mais ton script ne marche pas avec AwesomeBB....
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [AwesomeBB] Script pour redimensionner une image

Message par Milouze14 Mer 1 Mar 2023 - 19:38

Hello Zlork,
ce script devrait fonctionner:

Code:
(function() {
  window.fa_img_resizer = {
    max_width : 400, // maximum image width (400px)
    max_height : 250, // maximum image height (250px)
 
    selector : '.post-content img', // where images should be resized
 
    options : {
            bar : true, // resized image options bar
        toggler : true, // Enlarge / Reduce Image
      full_size : true, // Show full size
      download : true, // Download image link
      lightbox : true // lightbox effect
    },
 
    // texts
    lang : {
      full_size : '<i class="fa fa-external-link"></i> Show full size',
        enlarge : '<i class="fa fa-search-plus"></i> Enlarge image',
        reduce : '<i class="fa fa-search-minus"></i> Reduce image',
      download : '<i class="fa fa-download"></i> Download image',
      tooltip : 'Click to view full image'
    },
 
    // resize all images inside the "resizeIn" elements
    resize : function() {
      for (var a = $(fa_img_resizer.selector).not('.mention-ava'), i = 0, j = a.length; i < j; i++) {
        if (!a[i].longdesc && (a[i].naturalWidth > fa_img_resizer.max_width || a[i].naturalHeight > fa_img_resizer.max_height)) {
          a[i].className += ' fa_img_reduced';
 
          // make the image a "link" if it's not wrapper with one
          if (fa_img_resizer.options.lightbox && a[i].parentNode.tagName != 'A') {
            a[i].style.cursor = 'pointer';
            a[i].title = fa_img_resizer.lang.tooltip;
 
            a[i].onclick = function() {
              fa_img_resizer.lightbox(this);
            };
          }
 
          // create the resize bar
          if (fa_img_resizer.options.bar) {
            (a[i].parentNode.tagName == 'A' ? a[i].parentNode : a[i]).insertAdjacentHTML('beforebegin',
              '<div class="fa_img_resizer" style="width:' + (a[i].width - 8) + 'px;">'+
                (fa_img_resizer.options.toggler ? '<a class="fa_img_enlarge" href="#" onclick="fa_img_resizer.toggle(this); return false;">' + fa_img_resizer.lang.enlarge + '</a>' : '')+
                (fa_img_resizer.options.full_size ? '<a class="fa_img_full" href="/viewimage.forum?u=' + a[i].src + '" target="_blank">' + fa_img_resizer.lang.full_size + '</a>' : '')+
                (fa_img_resizer.options.download && !/Firefox/.test(navigator.userAgent) && 'download' in document.createElement('A') ? '<a class="fa_img_download" href="' + a[i].src + '" target="_blank" download>' + fa_img_resizer.lang.download + '</a>' : '' )+
              '</div>'
            );
          }
        }
      }
    },
 
    // toggle between enlarged and reduced image sizes
    toggle : function(that) {
      var img = that.parentNode.nextSibling;
 
      if (img.tagName == 'A') {
        img = img.getElementsByTagName('IMG')[0];
      }
 
      if (/fa_img_reduced/.test(img.className)) {
        that.innerHTML = fa_img_resizer.lang.reduce;
        that.className = 'fa_img_reduce';
        img.className = img.className.replace(/fa_img_reduced/, 'fa_img_enlarged');
      } else {
        that.innerHTML = fa_img_resizer.lang.enlarge;
        that.className = 'fa_img_enlarge';
        img.className = img.className.replace(/fa_img_enlarged/, 'fa_img_reduced');
      }
 
      that.parentNode.style.width = img.width - 8 + 'px';
    },
 
    // lightbox effect
    lightbox : function(that) {
      var frag = document.createDocumentFragment(),
          overlay = $('<div id="fa_img_lb_overlay" />')[0],
          img = $('<img id="fa_img_lb_image" src="' + that.src + '" />')[0];
 
      overlay.onclick = fa_img_resizer.kill_lightbox;
      img.onclick = fa_img_resizer.kill_lightbox;
 
      frag.appendChild(overlay);
      frag.appendChild(img);
      document.body.appendChild(frag);
      document.body.style.overflow = 'hidden';
 
      img.style.marginTop = '-' + (img.height / 2) + 'px';
      img.style.marginLeft = '-' + (img.width / 2) + 'px';
    },
 
    // kill the lightbox
    kill_lightbox : function() {
      var overlay = document.getElementById('fa_img_lb_overlay'),
          img = document.getElementById('fa_img_lb_image');
 
      overlay && document.body.removeChild(overlay);
      img && document.body.removeChild(img);
      document.body.style.overflow = '';
    }
  };
 
  // write styles into the document head
  document.write(
    '<style type="text/css">'+
      fa_img_resizer.selector + ', .fa_img_reduced { max-width:' + fa_img_resizer.max_width + 'px; max-height:' + fa_img_resizer.max_height + 'px; }'+
      '.fa_img_enlarged { max-width:100% !important; max-height:100% !important; }'+
      '.fa_img_resizer { font-size:12px; text-align:left; padding:3px; margin:3px 0; background:#FFF; border:1px solid #CCC; }'+
      '.fa_img_resizer a { margin:0 3px; }'+
      '.fa_img_resizer i { font-size:14px; vertical-align:middle; }'+
      '#fa_img_lb_overlay { background:rgba(0, 0, 0, 0.7); position:fixed; top:0; right:0; bottom:0; left:0; z-index:999999; cursor:pointer; }'+
      '#fa_img_lb_image { max-height:100%; max-width:100%; position:fixed; left:50%; top:50%; z-index:9999999; cursor:pointer; }'+
    '</style>'+
    (!$('link[href$="font-awesome.min.css"]')[0] ? '<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" />' : '') // require font awesome
  );
 
  // begin modifying images when the page is loaded
  $(window).load(fa_img_resizer.resize);
 
  // kill forumactif's image resizer
  if (window.resize_images) {
    window.resize_images = function() {
      return false;
    };
  }
}());

a++
Milouze14

Milouze14
***

Masculin
Messages : 147
Inscrit(e) le : 03/12/2021

https://le-site-milouze14.bbactif.com
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [AwesomeBB] Script pour redimensionner une image

Message par Invité Mer 1 Mar 2023 - 20:21

Merci Milouze, ça fonctionne Smile

Par contre, j'ai un petit problème esthétique, la barre du menu ne suit pas l'image quand j'agrandis ou je rétrécis (j'espère que vous voyez bien) :

[AwesomeBB] Script pour redimensionner une image SnWbOlI
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [AwesomeBB] Script pour redimensionner une image

Message par chattigre Mer 1 Mar 2023 - 20:34

Coucou,
ah oui pardon, j'avais oublié de préciser "img" dans lesdits sélecteurs et je n'avais pas eu le temps de regarder ce script aujourd'hui ... Smile

Merci pour la correction Milouze ^^
Bonne journée
chattigre

chattigre
Aidactif
Aidactif

Masculin
Messages : 3584
Inscrit(e) le : 17/04/2019

https://test1-chattigre.forumactif.fr
chattigre a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [AwesomeBB] Script pour redimensionner une image

Message par Milouze14 Jeu 2 Mar 2023 - 5:21

Hello Zlork,
de rien chattigre Wink .

Zlork a écrit:
Par contre, j'ai un petit problème esthétique, la barre du menu ne suit pas l'image quand j'agrandis ou je rétrécis (j'espère que vous voyez bien) :

Ce n'est pas un problème mais bel et bien le fonctionnement du plugin (script) , on joue avec l'image Wink .

J'ai traduit les textes dans la partie "lang" si tu le souhaites:

Remplaces ceci:
Code:
  lang : {
      full_size : '<i class="fa fa-external-link"></i> Show full size',
        enlarge : '<i class="fa fa-search-plus"></i> Enlarge image',
        reduce : '<i class="fa fa-search-minus"></i> Reduce image',
      download : '<i class="fa fa-download"></i> Download image',
      tooltip : 'Click to view full image'
    },

Par ceci:

Code:
  
lang : {
      full_size : '<i class="fa fa-external-link"></I>Afficher en taille réelle',
        enlarge : '<i class="fa fa-search-plus"></i> Agrandir l\'image',
        reduce : '<i class="fa fa-search-minus"></i> Reduire l\'image',
      download : '<i class="fa fa-download"></i> Télécharger l\'image',
      tooltip : 'Click to view full image'
    },





Si tu as peur de faire des bêtises remplaces le script actuel par celui-ci:


Code:


(function() {
  window.fa_img_resizer = {
    max_width : 400, // maximum image width (400px)
    max_height : 250, // maximum image height (250px)
 
    selector : '.post-content img', // where images should be resized
 
    options : {
            bar : true, // resized image options bar
        toggler : true, // Enlarge / Reduce Image
      full_size : true, // Show full size
      download : true, // Download image link
      lightbox : true // lightbox effect
    },
 
    // texts
    lang : {
      full_size : '<i class="fa fa-external-link"></I>Afficher en taille réelle',
        enlarge : '<i class="fa fa-search-plus"></i> Agrandir l\'image',
        reduce : '<i class="fa fa-search-minus"></i> Reduire l\'image',
      download : '<i class="fa fa-download"></i> Télécharger l\'image',
      tooltip : 'Click to view full image'
    },
 
    // resize all images inside the "resizeIn" elements
    resize : function() {
      for (var a = $(fa_img_resizer.selector).not('.mention-ava'), i = 0, j = a.length; i < j; i++) {
        if (!a[i].longdesc && (a[i].naturalWidth > fa_img_resizer.max_width || a[i].naturalHeight > fa_img_resizer.max_height)) {
          a[i].className += ' fa_img_reduced';
 
          // make the image a "link" if it's not wrapper with one
          if (fa_img_resizer.options.lightbox && a[i].parentNode.tagName != 'A') {
            a[i].style.cursor = 'pointer';
            a[i].title = fa_img_resizer.lang.tooltip;
 
            a[i].onclick = function() {
              fa_img_resizer.lightbox(this);
            };
          }
 
          // create the resize bar
          if (fa_img_resizer.options.bar) {
            (a[i].parentNode.tagName == 'A' ? a[i].parentNode : a[i]).insertAdjacentHTML('beforebegin',
              '<div class="fa_img_resizer" style="width:' + (a[i].width -  + 'px;">'+
                (fa_img_resizer.options.toggler ? '<a class="fa_img_enlarge" href="#" onclick="fa_img_resizer.toggle(this); return false;">' + fa_img_resizer.lang.enlarge + '</a>' : '')+
                (fa_img_resizer.options.full_size ? '<a class="fa_img_full" href="/viewimage.forum?u=' + a[i].src + '" target="_blank">' + fa_img_resizer.lang.full_size + '</a>' : '')+
                (fa_img_resizer.options.download && !/Firefox/.test(navigator.userAgent) && 'download' in document.createElement('A') ? '<a class="fa_img_download" href="' + a[i].src + '" target="_blank" download>' + fa_img_resizer.lang.download + '</a>' : '' )+
              '</div>'
            );
          }
        }
      }
    },
 
    // toggle between enlarged and reduced image sizes
    toggle : function(that) {
      var img = that.parentNode.nextSibling;
 
      if (img.tagName == 'A') {
        img = img.getElementsByTagName('IMG')[0];
      }
 
      if (/fa_img_reduced/.test(img.className)) {
        that.innerHTML = fa_img_resizer.lang.reduce;
        that.className = 'fa_img_reduce';
        img.className = img.className.replace(/fa_img_reduced/, 'fa_img_enlarged');
      } else {
        that.innerHTML = fa_img_resizer.lang.enlarge;
        that.className = 'fa_img_enlarge';
        img.className = img.className.replace(/fa_img_enlarged/, 'fa_img_reduced');
      }
 
      that.parentNode.style.width = img.width - 8 + 'px';
    },
 
    // lightbox effect
    lightbox : function(that) {
      var frag = document.createDocumentFragment(),
          overlay = $('<div id="fa_img_lb_overlay" />')[0],
          img = $('<img id="fa_img_lb_image" src="' + that.src + '" />')[0];
 
      overlay.onclick = fa_img_resizer.kill_lightbox;
      img.onclick = fa_img_resizer.kill_lightbox;
 
      frag.appendChild(overlay);
      frag.appendChild(img);
      document.body.appendChild(frag);
      document.body.style.overflow = 'hidden';
 
      img.style.marginTop = '-' + (img.height / 2) + 'px';
      img.style.marginLeft = '-' + (img.width / 2) + 'px';
    },
 
    // kill the lightbox
    kill_lightbox : function() {
      var overlay = document.getElementById('fa_img_lb_overlay'),
          img = document.getElementById('fa_img_lb_image');
 
      overlay && document.body.removeChild(overlay);
      img && document.body.removeChild(img);
      document.body.style.overflow = '';
    }
  };
 
  // write styles into the document head
  document.write(
    '<style type="text/css">'+
      fa_img_resizer.selector + ', .fa_img_reduced { max-width:' + fa_img_resizer.max_width + 'px; max-height:' + fa_img_resizer.max_height + 'px; }'+
      '.fa_img_enlarged { max-width:100% !important; max-height:100% !important; }'+
      '.fa_img_resizer { font-size:12px; text-align:left; padding:3px; margin:3px 0; background:#FFF; border:1px solid #CCC; }'+
      '.fa_img_resizer a { margin:0 3px; }'+
      '.fa_img_resizer i { font-size:14px; vertical-align:middle; }'+
      '#fa_img_lb_overlay { background:rgba(0, 0, 0, 0.7); position:fixed; top:0; right:0; bottom:0; left:0; z-index:999999; cursor:pointer; }'+
      '#fa_img_lb_image { max-height:100%; max-width:100%; position:fixed; left:50%; top:50%; z-index:9999999; cursor:pointer; }'+
    '</style>'+
    (!$('link[href$="font-awesome.min.css"]')[0] ? '<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" />' : '') // require font awesome
  );
 
  // begin modifying images when the page is loaded
  $(window).load(fa_img_resizer.resize);
 
  // kill forumactif's image resizer
  if (window.resize_images) {
    window.resize_images = function() {
      return false;
    };
  }
}());


a++
Milouze14

Milouze14
***

Masculin
Messages : 147
Inscrit(e) le : 03/12/2021

https://le-site-milouze14.bbactif.com
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [AwesomeBB] Script pour redimensionner une image

Message par Invité Jeu 2 Mar 2023 - 8:13

Milouze14 a écrit:Hello Zlork,
de rien chattigre Wink .

Ce n'est pas un problème mais bel et bien le fonctionnement du plugin (script) , on joue avec l'image Wink .

---

a++

J'ai bien compris, ce que je voulais dire (mais on ne voit pas bien sur le gif que j'ai posté), c'est que la barre du menu s'agrandit quand l'image se rétrécit et que la barre de menu se rétrécit quand l'image s'agrandit.... Alors que ça doit avoir l'effet inverse.... (les liens marchent très bien par contre) Smile

Et merci beaucoup pour la traduction Smile

EDIT : Est-il possible de désactiver le script en affichage mobile (il ne sert à rien vu que les images sont déjà petites) ?
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [AwesomeBB] Script pour redimensionner une image

Message par Milouze14 Jeu 2 Mar 2023 - 19:12

Re,
alors pour palier à ton soucis et si je saisis bien ta demande, déposes ceci dans dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Ajoutes ceci:

Code:


.fa_img_resizer{width:100%!important;}


Penses a cliquer sur le bouton [AwesomeBB] Script pour redimensionner une image Sans_t10


Pour désactiver le script de la version mobile (sans grande prétention) ,
remplaces le script par celui-ci:

Code:
(function() {
if ($(window).width() < 992)return;

  window.fa_img_resizer = {
    max_width : 400, // maximum image width (400px)
    max_height : 250, // maximum image height (250px)
 
    selector : '.post-content img', // where images should be resized
 
    options : {
            bar : true, // resized image options bar
        toggler : true, // Enlarge / Reduce Image
      full_size : true, // Show full size
      download : true, // Download image link
      lightbox : true // lightbox effect
    },
 
    // texts
    lang : {
      full_size : '<i class="fa fa-external-link"></I>Afficher en taille réelle',
        enlarge : '<i class="fa fa-search-plus"></i> Agrandir l\'image',
        reduce : '<i class="fa fa-search-minus"></i> Reduire l\'image',
      download : '<i class="fa fa-download"></i> Télécharger l\'image',
      tooltip : 'Click to view full image'
    },
 
    // resize all images inside the "resizeIn" elements
    resize : function() {
      for (var a = $(fa_img_resizer.selector).not('.mention-ava'), i = 0, j = a.length; i < j; i++) {
        if (!a[i].longdesc && (a[i].naturalWidth > fa_img_resizer.max_width || a[i].naturalHeight > fa_img_resizer.max_height)) {
          a[i].className += ' fa_img_reduced';
 
          // make the image a "link" if it's not wrapper with one
          if (fa_img_resizer.options.lightbox && a[i].parentNode.tagName != 'A') {
            a[i].style.cursor = 'pointer';
            a[i].title = fa_img_resizer.lang.tooltip;
 
            a[i].onclick = function() {
              fa_img_resizer.lightbox(this);
            };
          }
 
          // create the resize bar
          if (fa_img_resizer.options.bar) {
            (a[i].parentNode.tagName == 'A' ? a[i].parentNode : a[i]).insertAdjacentHTML('beforebegin',
              '<div class="fa_img_resizer" style="width:' + (a[i].width - 8) + 'px;">'+
                (fa_img_resizer.options.toggler ? '<a class="fa_img_enlarge" href="#" onclick="fa_img_resizer.toggle(this); return false;">' + fa_img_resizer.lang.enlarge + '</a>' : '')+
                (fa_img_resizer.options.full_size ? '<a class="fa_img_full" href="/viewimage.forum?u=' + a[i].src + '" target="_blank">' + fa_img_resizer.lang.full_size + '</a>' : '')+
                (fa_img_resizer.options.download && !/Firefox/.test(navigator.userAgent) && 'download' in document.createElement('A') ? '<a class="fa_img_download" href="' + a[i].src + '" target="_blank" download>' + fa_img_resizer.lang.download + '</a>' : '' )+
              '</div>'
            );
          }
        }
      }
    },
 
    // toggle between enlarged and reduced image sizes
    toggle : function(that) {
      var img = that.parentNode.nextSibling;
 
      if (img.tagName == 'A') {
        img = img.getElementsByTagName('IMG')[0];
      }
 
      if (/fa_img_reduced/.test(img.className)) {
        that.innerHTML = fa_img_resizer.lang.reduce;
        that.className = 'fa_img_reduce';
        img.className = img.className.replace(/fa_img_reduced/, 'fa_img_enlarged');
      } else {
        that.innerHTML = fa_img_resizer.lang.enlarge;
        that.className = 'fa_img_enlarge';
        img.className = img.className.replace(/fa_img_enlarged/, 'fa_img_reduced');
      }
 
      that.parentNode.style.width = img.width - 8 + 'px';
    },
 
    // lightbox effect
    lightbox : function(that) {
      var frag = document.createDocumentFragment(),
          overlay = $('<div id="fa_img_lb_overlay" />')[0],
          img = $('<img id="fa_img_lb_image" src="' + that.src + '" />')[0];
 
      overlay.onclick = fa_img_resizer.kill_lightbox;
      img.onclick = fa_img_resizer.kill_lightbox;
 
      frag.appendChild(overlay);
      frag.appendChild(img);
      document.body.appendChild(frag);
      document.body.style.overflow = 'hidden';
 
      img.style.marginTop = '-' + (img.height / 2) + 'px';
      img.style.marginLeft = '-' + (img.width / 2) + 'px';
    },
 
    // kill the lightbox
    kill_lightbox : function() {
      var overlay = document.getElementById('fa_img_lb_overlay'),
          img = document.getElementById('fa_img_lb_image');
 
      overlay && document.body.removeChild(overlay);
      img && document.body.removeChild(img);
      document.body.style.overflow = '';
    }
  };
 
  // write styles into the document head
  document.write(
    '<style type="text/css">'+
      fa_img_resizer.selector + ', .fa_img_reduced { max-width:' + fa_img_resizer.max_width + 'px; max-height:' + fa_img_resizer.max_height + 'px; }'+
      '.fa_img_enlarged { max-width:100% !important; max-height:100% !important; }'+
      '.fa_img_resizer { font-size:12px; text-align:left; padding:3px; margin:3px 0; background:#FFF; border:1px solid #CCC; }'+
      '.fa_img_resizer a { margin:0 3px; }'+
      '.fa_img_resizer i { font-size:14px; vertical-align:middle; }'+
      '#fa_img_lb_overlay { background:rgba(0, 0, 0, 0.7); position:fixed; top:0; right:0; bottom:0; left:0; z-index:999999; cursor:pointer; }'+
      '#fa_img_lb_image { max-height:100%; max-width:100%; position:fixed; left:50%; top:50%; z-index:9999999; cursor:pointer; }'+
    '</style>'+
    (!$('link[href$="font-awesome.min.css"]')[0] ? '<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" />' : '') // require font awesome
  );
 
  // begin modifying images when the page is loaded
  $(window).load(fa_img_resizer.resize);
 
  // kill forumactif's image resizer
  if (window.resize_images) {
    window.resize_images = function() {
      return false;
    };
  }
}());


a++
Milouze14

Milouze14
***

Masculin
Messages : 147
Inscrit(e) le : 03/12/2021

https://le-site-milouze14.bbactif.com
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [AwesomeBB] Script pour redimensionner une image

Message par Invité Jeu 2 Mar 2023 - 19:53

Milouze14 a écrit:Re,
alors pour palier à ton soucis et si je saisis bien ta demande, déposes ceci dans dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Ajoutes ceci:

Code:


.fa_img_resizer{width:100%!important;}


J'ai fais un autre gif avc une image centrée pour mieux voir le souci :

[AwesomeBB] Script pour redimensionner une image YZUWSaU

Si j'ajoute votre code CSS, ça fixe le menu mais sur une image centrée, ça fait bizarre.

Désolé d'embêter Embarassed

Pour désactiver le script de la version mobile (sans grande prétention) ,
remplaces le script par celui-ci:
Ca fonctionne, merci.

Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [AwesomeBB] Script pour redimensionner une image

Message par creange Jeu 2 Mar 2023 - 20:06

Bonsoir Zlork 

désolée que ça n'est pas fonctionné 
bonne soirée
creange

creange
*****

Féminin
Messages : 759
Inscrit(e) le : 31/03/2011

https://dangela.forumgratuit.org/
creange a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [AwesomeBB] Script pour redimensionner une image

Message par Milouze14 Ven 3 Mar 2023 - 6:26

Hello Zlork,
je n'ai pas du tout cet effet de mon côté ,
tu peux me donner le lien du message concerné sur ton forum s'il te plait .
As tu modifié quelque chose dans le script ?

Edit:
Peux tu tester ce script en remplacement de l'autre stp car j'ai remarqué que l'hébergeur Servimg génère des liens.
Ce qui empêche au clic sur l'image de l'afficher normalement Wink .
Code:
$(function(){
$('.post-content').find('img[src*="servimg.com"]').each(function(){
var test=$(this).length;if(test){$(this).unwrap();}});});
(function() {
if ($(window).width() < 992)return;

  window.fa_img_resizer = {
    max_width : 400, // maximum image width (400px)
    max_height : 250, // maximum image height (250px)
 
    selector : '.post-content img', // where images should be resized
 
    options : {
            bar : true, // resized image options bar
        toggler : true, // Enlarge / Reduce Image
      full_size : true, // Show full size
      download : true, // Download image link
      lightbox : true // lightbox effect
    },
 
    // texts
    lang : {
      full_size : '<i class="fa fa-external-link"></I>Afficher en taille réelle',
        enlarge : '<i class="fa fa-search-plus"></i> Agrandir l\'image',
        reduce : '<i class="fa fa-search-minus"></i> Reduire l\'image',
      download : '<i class="fa fa-download"></i> Télécharger l\'image',
      tooltip : 'Click to view full image'
    },
 
    // resize all images inside the "resizeIn" elements
    resize : function() {
      for (var a = $(fa_img_resizer.selector).not('.mention-ava'), i = 0, j = a.length; i < j; i++) {
        if (!a[i].longdesc && (a[i].naturalWidth > fa_img_resizer.max_width || a[i].naturalHeight > fa_img_resizer.max_height)) {
          a[i].className += ' fa_img_reduced';
 
          // make the image a "link" if it's not wrapper with one
          if (fa_img_resizer.options.lightbox && a[i].parentNode.tagName != 'A') {
            a[i].style.cursor = 'pointer';
            a[i].title = fa_img_resizer.lang.tooltip;
 
            a[i].onclick = function() {
              fa_img_resizer.lightbox(this);
            };
          }
 
          // create the resize bar
          if (fa_img_resizer.options.bar) {
            (a[i].parentNode.tagName == 'A' ? a[i].parentNode : a[i]).insertAdjacentHTML('beforebegin',
              '<div class="fa_img_resizer" style="width:' + (a[i].width - 8) + 'px;">'+
                (fa_img_resizer.options.toggler ? '<a class="fa_img_enlarge" href="#" onclick="fa_img_resizer.toggle(this); return false;">' + fa_img_resizer.lang.enlarge + '</a>' : '')+
                (fa_img_resizer.options.full_size ? '<a class="fa_img_full" href="/viewimage.forum?u=' + a[i].src + '" target="_blank">' + fa_img_resizer.lang.full_size + '</a>' : '')+
                (fa_img_resizer.options.download && !/Firefox/.test(navigator.userAgent) && 'download' in document.createElement('A') ? '<a class="fa_img_download" href="' + a[i].src + '" target="_blank" download>' + fa_img_resizer.lang.download + '</a>' : '' )+
              '</div>'
            );
          }
        }
      }
    },
 
    // toggle between enlarged and reduced image sizes
    toggle : function(that) {
      var img = that.parentNode.nextSibling;
 
      if (img.tagName == 'A') {
        img = img.getElementsByTagName('IMG')[0];
      }
 
      if (/fa_img_reduced/.test(img.className)) {
        that.innerHTML = fa_img_resizer.lang.reduce;
        that.className = 'fa_img_reduce';
        img.className = img.className.replace(/fa_img_reduced/, 'fa_img_enlarged');
      } else {
        that.innerHTML = fa_img_resizer.lang.enlarge;
        that.className = 'fa_img_enlarge';
        img.className = img.className.replace(/fa_img_enlarged/, 'fa_img_reduced');
      }
 
      that.parentNode.style.width = img.width - 8 + 'px';
    },
 
    // lightbox effect
    lightbox : function(that) {
      var frag = document.createDocumentFragment(),
          overlay = $('<div id="fa_img_lb_overlay" />')[0],
          img = $('<img id="fa_img_lb_image" src="' + that.src + '" />')[0];
 
      overlay.onclick = fa_img_resizer.kill_lightbox;
      img.onclick = fa_img_resizer.kill_lightbox;
 
      frag.appendChild(overlay);
      frag.appendChild(img);
      document.body.appendChild(frag);
      document.body.style.overflow = 'hidden';
 
      img.style.marginTop = '-' + (img.height / 2) + 'px';
      img.style.marginLeft = '-' + (img.width / 2) + 'px';
    },
 
    // kill the lightbox
    kill_lightbox : function() {
      var overlay = document.getElementById('fa_img_lb_overlay'),
          img = document.getElementById('fa_img_lb_image');
 
      overlay && document.body.removeChild(overlay);
      img && document.body.removeChild(img);
      document.body.style.overflow = '';
    }
  };
 
  // write styles into the document head
  document.write(
    '<style type="text/css">'+
      fa_img_resizer.selector + ', .fa_img_reduced { max-width:' + fa_img_resizer.max_width + 'px; max-height:' + fa_img_resizer.max_height + 'px; }'+
      '.fa_img_enlarged { max-width:100% !important; max-height:100% !important; }'+
      '.fa_img_resizer { font-size:12px; text-align:left; padding:3px; margin:3px 0; background:#FFF; border:1px solid #CCC; }'+
      '.fa_img_resizer a { margin:0 3px; }'+
      '.fa_img_resizer i { font-size:14px; vertical-align:middle; }'+
      '#fa_img_lb_overlay { background:rgba(0, 0, 0, 0.7); position:fixed; top:0; right:0; bottom:0; left:0; z-index:999999; cursor:pointer; }'+
      '#fa_img_lb_image { max-height:100%; max-width:100%; position:fixed; left:50%; top:50%; z-index:9999999; cursor:pointer; }'+
    '</style>'+
    (!$('link[href$="font-awesome.min.css"]')[0] ? '<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" />' : '') // require font awesome
  );
 
  // begin modifying images when the page is loaded
  $(window).load(fa_img_resizer.resize);
 
  // kill forumactif's image resizer
  if (window.resize_images) {
    window.resize_images = function() {
      return false;
    };
  }
}());



a++
Milouze14

Milouze14
***

Masculin
Messages : 147
Inscrit(e) le : 03/12/2021

https://le-site-milouze14.bbactif.com
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [AwesomeBB] Script pour redimensionner une image

Message par Invité Ven 3 Mar 2023 - 8:13

Malheureusement, ça ne fonctionne pas.

Voici le lien pour que tu puisses voir : https://www.gemurama.com/t330-unique-les-photographes-in-game

Au début, ça s'affiche bien mais quand on clique pour la première fois sur "agrandir", la barre du menu ne suit pas l'image. Après oui mais du coup, ce n'est plus synchronisé comme le GIF montre..... Je pense que le problème vient de là, ça ne réagit pas dès le premier clic. Et ça le fait pour toutes les images, pas seulement pour SERVIMG.

Merci pour ta patience Smile
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [AwesomeBB] Script pour redimensionner une image

Message par Milouze14 Ven 3 Mar 2023 - 9:16

Re,
je ne vois vraiment ce qui peut engendrer ce dysfonctionnement sur ton forum en tant que membre
car en tant qu'invité je n'ai pas de soucis avec mon navigateur .
Le plugin fonctionne comme il se doit.
Désolé Wink .

En espérant qu'une personne trouve la solution Wink .

a++
Milouze14

Milouze14
***

Masculin
Messages : 147
Inscrit(e) le : 03/12/2021

https://le-site-milouze14.bbactif.com
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [AwesomeBB] Script pour redimensionner une image

Message par Invité Ven 3 Mar 2023 - 10:25

Je cloture Smile
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

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

- Sujets similaires

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