Forum gratuit : Le forum des forums actifs
Bienvenue sur le forum de support de ForumActif.

Afin de profiter pleinement de tout ce que vous offre notre forum, merci de vous identifier si vous êtes déjà membre ou de rejoindre notre communauté si vous ne l'êtes pas encore.

Créer un forum gratuit semblable à ce forum !
Créer un forum gratuit

Rechercher
Magic FDFRechercher parmi les tutoriels...
Pensez à effectuer une recherche parmi les tutoriels existants avant d'ouvrir un sujet dans l'Entraide !



Afficher sous forme de :


Derniers Tutoriels
Les posteurs les plus actifs de la semaine
Vivi
 
Chacha
 
AenigmA
 
gaspar
 
Aki-chan02
 
R-max
 
tupac
 
stefou
 
Tlr
 
nca000
 

Thèmes du mois
ThèmeSAMPThème Final FantasyThème Harry PotterThème HaloThème MangaThème forum MinecraftThème Aux couleurs provençalesThème ChevauxThème RPGThème Pouddlard HabboThème Été 2015Thème Les mignons
Derniers sujets
» Retrouver le mot de passe admin
Aujourd'hui à 15:10 par Chacha

» Ajouter sa propre publicité en bas de page
Aujourd'hui à 14:30 par wollastoni2

» [EDIT TITRE] Créer un magasin pour son forum
Aujourd'hui à 14:06 par Selendo

» Supprimer une colonne
Aujourd'hui à 14:00 par nca000

» Comment faire passer la couleur des groupes par dessus celle des lien ? (QEEL)
Aujourd'hui à 13:37 par Chacha

» Interface du forum
Aujourd'hui à 13:21 par Chacha

» Thème
Aujourd'hui à 13:20 par Chacha

» Catégorie sur la même ligne
Aujourd'hui à 13:19 par Chacha

» enlever le choix de la police pour les membres
Aujourd'hui à 13:18 par Chacha

Qui est en ligne ?
Il y a en tout 266 utilisateurs en ligne :: 21 Enregistrés, 2 Invisibles et 243 Invités :: 3 Moteurs de recherche

@Louis C.222004, admincinq, Albert (67), FairyAiiro, Imari, Irreph, julienlegrand15, Laki Crowley, Leiden, Mina27500, Mizar, Morane, Neptune-, Peggy06, Seconds, Selendo, SeLfde4Th7, Seth J. Trevelyan, Source Code, Vivi, Zadig

Le record du nombre d'utilisateurs en ligne est de 1877 le Jeu 19 Mai 2011 - 15:00

Redimensionnement automatique des images

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

Tutoriel Redimensionnement automatique des images

Message par Vivi le Mar 27 Oct 2009 - 15:19

Redimensionnement automatique des images


Beaucoup d'admins se plaignent que le forum est déformé par les grandes images. A présent, vous avez désormais une solution pratique pour résoudre ce genre de problème.

Votre forum sera toujours aussi beau même si quelqu'un a posté une image avec la taille "monstrueuse" Wink .

L'admin a dorénavant la possibilité de définir via son panneau d'admin, la largeur et hauteur maximales des images qu'il autorise dans les sujets de son forum. Tout membre postant une image d'une dimension supérieure à celle fixée par l'admin, verra cette dernière automatiquement redimensionnée à la taille fixée avec possibilité de la voir en taille réelle si besoin.

Merci de mettre à jour vos templates pour les forums ayant les templates personnalisés en consultant ici si votre forum est en PHPbb2.0 et ici si votre forum est en PunBB.


Comment ça marche?


    Rendez vous dans votre PA > Général > Messages et Emails > Configuration

    Définir la largeur et la hauteur maximums.


    Si un membre post une image de taille supérieure a celle fixée par l'admin, elle est automatiquement redimensionnée à la taille voulue. Un message apparait alors au dessus de l'image indiquant son redimensionnement et invitant le membre à cliquer s'il souhaite la voir en taille réelle.



A vous de jouer maintenant! cheers


Dernière édition par Zen le Mar 27 Oct 2009 - 15:32, édité 1 fois

Vivi
Adminactive
Adminactive

Féminin
Messages: 22124
Réputation: 2825
Inscrit(e) le: 30/03/2007

http://forum.forumactif.com

Revenir en haut Aller en bas

Tutoriel Re: Redimensionnement automatique des images

Message par Vivi le Mar 27 Oct 2009 - 15:28

Changements templates persos:

  • phpBB2

      --> privmsgs_preview.tpl et posting_preview.tpl et privmsgs_read_body.tpl
      Spoiler:

      ¤ Remplacer :
      Code:
      <span class="postbody">{MESSAGE}</span>
      par :
      Code:

      <div class="postbody">{MESSAGE}</div>

      --> viewtopic_body.tpl et viewcomments_body.tpl
      Spoiler:

      ¤ Remplacer :
      Code:
                              <span class="postbody">
                                  <!-- google_ad_section_start -->
                                  {postrow.displayed.MESSAGE}
                                  <!-- google_ad_section_end -->
                                  {postrow.displayed.SIGNATURE}
                              </span>
      par :
      Code:
                              <div class="postbody">
                                  <!-- google_ad_section_start -->
                                  {postrow.displayed.MESSAGE}
                                  <!-- google_ad_section_end -->
                                  <div class="signature_div">
                                      {postrow.displayed.SIGNATURE}
                                  </div>
                              </div>

      --> privmsgs_topic_review.tpl
      Spoiler:

      ¤ Remplacer :
      Code:
      <span class="postbody">{postrow.MESSAGE}</span>
      par :
      Code:
      <div class="postbody">{postrow.MESSAGE}</div>

      --> posting_topic_review.tpl
      Spoiler:

      ¤ Remplacer :
      Code:
      <span class="postbody">{postrow.displayed.MESSAGE}</span>
      par :
      Code:
      <div class="postbody">{postrow.displayed.MESSAGE}</div>

      --> mod_news.tpl
      Spoiler:

      ¤ Remplacer tout par :
      Code:
      <!-- BEGIN post_row --><!-- BEGIN saut -->
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
              <td height="2px"></td>
          </tr>
      </table><!-- END saut -->
      <table class="forumline mod_news" width="100%" border="0" cellspacing="1" cellpadding="0">
          <tr>
              <td class="catLeft" height="25">
                  <a name="news_{post_row.ID}"></a><span class="genmed">{post_row.TITLE}</span>
              </td>
          </tr>
          <tr>
              <td class="row2" height="24"><span class="gensmall"><img src="{ICON_TIME}" alt="" />{post_row.TIME} {BY} <b>{post_row.POSTER}</b></span></td>
          </tr>
          <tr>
              <td class="row1">
                  <span class="gensmall content" style="line-height:150%">
                      {post_row.TEXT}<br /><br />
                      {post_row.OPEN}
                      <a href="{post_row.U_READ_FULL}">{post_row.L_READ_FULL}</a>
                      {post_row.CLOSE}
                  </span>
              </td>
          </tr>
          <tr>
              <td class="row3" height="24"><span class="gensmall"><a href="{post_row.U_VIEW_COMMENTS}">{L_COMMENTS}</a>: {post_row.REPLIES}</span></td>
          </tr>
      </table><!-- END post_row -->

      <!-- BEGIN switch_image_resize -->
      <script type="text/javascript">
      //<![CDATA[
      $(function(){
          $('.mod_news .content img').not('.signature_div img').css('display','none');
      });
      $(window).load(function(){
          $('.mod_news .content img')
              .each(function(){
                  if ( ( $(this).width() > {switch_image_resize.IMG_RESIZE_WIDTH} && {switch_image_resize.IMG_RESIZE_WIDTH} != 0 ) || ( $(this).height() > {switch_image_resize.IMG_RESIZE_HEIGHT} && {switch_image_resize.IMG_RESIZE_HEIGHT} != 0 ) ) {
                      $(this)
                          .before(document.createElement('div'))
                          .prev()
                          .click(function(){
                              return false;
                          })
                          .addClass('resizebox gensmall clearfix')
                          .append(document.createElement('div'))
                          .children()
                          .addClass('resize_border clearfix')
                          .append(document.createElement('div'))
                          .children()
                          .addClass('resize_content clearfix')
                          .append(document.createElement('a'))
                          .children()
                          .addClass('enlarge')
                          .attr('href', '#')
                          .text('{switch_image_resize.L_IMAGE_ENLARGE}')
                          .focus(function(){
                              $(this).blur();
                          })
                          .click(function(){
                              $(this).parent().parent().parent().next().css('display','none').attr('resizeWidth', $(this).parent().parent().parent().next().width()).width('');
                              $(this).parent().parent().parent().next().width($(this).parent().parent().parent().next().width() > ($('html').attr('dir') != 'rtl' ? $(this).closest('td').width() - $(this).parent().parent().parent().offset().left + $(this).closest('td').offset().left : $(this).parent().parent().parent().width() + $(this).parent().parent().parent().offset().left - $(this).closest('td').offset().left) ? $('html').attr('dir') != 'rtl' ? $(this).closest('td').width() - $(this).parent().parent().parent().offset().left + $(this).closest('td').offset().left : $(this).parent().parent().parent().width() + $(this).parent().parent().parent().offset().left - $(this).closest('td').offset().left : '').css('display','inline');
                              $(this).css('display','none').next('a.resize').css('display','inline-block');
                              $(this).parent().parent().parent().width('').width($(this).parent().parent().parent().next().width());
                              return false;
                          })
                          .parent()
                          .append(document.createElement('a'))
                          .children()
                          .next()
                          .addClass('resize')
                          .attr('href','#')
                          .text('{switch_image_resize.L_CLICK_TO_RESIZE}')
                          .click(function(){
                              $(this).parent().parent().parent().next().width(parseInt($(this).parent().parent().parent().next().attr('resizeWidth'))).removeAttr('resizeWidth');
                              $(this).css('display','none').prev('a.enlarge').css('display','inline-block');
                              $(this).parent().parent().parent().width('').width($(this).parent().parent().parent().next().width());
                              return false;
                          })
                          .parent()
                          .append(document.createElement('div'))
                          .children('a.resize')
                          .next()
                          .addClass('resize_filler')
                          .text(' ')
                          .parent()
                          .append(document.createElement('a'))
                          .children('div.resize_filler')
                          .next()
                          .addClass('fullsize')
                          .attr('href','#')
                          .click(function(){
                              window.open('/viewimage.forum?u=' + encodeURIComponent($(this).parent().parent().parent().next().attr('src')));
                              return false;
                          })
                          .attr('target', '_blank')
                          .text('{switch_image_resize.L_CLICK_TO_SEE_FULLSIZE}');
                      if ($(this).width() > ($('html').attr('dir') != 'rtl' ? $(this).closest('td').width() - $(this).prev().offset().left + $(this).closest('td').offset().left : $(this).prev().width() + $(this).prev().offset().left - $(this).closest('td').offset().left)){
                          $(this).prev().find('a.fullsize').attr('href','/viewimage.forum?u=' + encodeURIComponent($(this).attr('src'))).css('display', 'inline-block');
                      }
                      $(this).width($(this).width() * ( ( {switch_image_resize.IMG_RESIZE_WIDTH} != 0 && ( {switch_image_resize.IMG_RESIZE_HEIGHT} == 0 || $(this).width() / $(this).height() > {switch_image_resize.IMG_RESIZE_WIDTH} / {switch_image_resize.IMG_RESIZE_HEIGHT} ) )
                              ? {switch_image_resize.IMG_RESIZE_WIDTH} / $(this).width()
                              : {switch_image_resize.IMG_RESIZE_HEIGHT} / $(this).height() ) )
                          .css('display','inline')
                          .prev().width($(this).width());
                  }
              })
              .css('display','inline');
      });
      //]]>
      </script>
      <!-- END switch_image_resize -->

      --> viewtopic_body.tpl et posting_body.tpl et privmsgs_read_body.tpl et viewcomments_body.tpl
      Spoiler:

      ¤ Ajouter à la fin du fichier :
      Code:
      <!-- BEGIN switch_image_resize -->
      <script type="text/javascript">
      //<![CDATA[
      $(function(){
          $('.postbody img').not('.signature_div img').css('display','none');
      });
      $(window).load(function(){
          $('.postbody img')
              .not('div.signature_div img')
              .each(function(){
                  if ( ( $(this).width() > {switch_image_resize.IMG_RESIZE_WIDTH} && {switch_image_resize.IMG_RESIZE_WIDTH} != 0 ) || ( $(this).height() > {switch_image_resize.IMG_RESIZE_HEIGHT} && {switch_image_resize.IMG_RESIZE_HEIGHT} != 0 ) ) {
                      $(this)
                          .before(document.createElement('div'))
                          .prev()
                          .click(function(){
                              return false;
                          })
                          .addClass('resizebox gensmall clearfix')
                          .append(document.createElement('div'))
                          .children()
                          .addClass('resize_border clearfix')
                          .append(document.createElement('div'))
                          .children()
                          .addClass('resize_content clearfix')
                          .append(document.createElement('a'))
                          .children()
                          .addClass('enlarge')
                          .attr('href', '#')
                          .text('{switch_image_resize.L_IMAGE_ENLARGE}')
                          .focus(function(){
                              $(this).blur();
                          })
                          .click(function(){
                              $(this).parent().parent().parent().next().css('display','none').attr('resizeWidth', $(this).parent().parent().parent().next().width()).width('');
                              $(this).parent().parent().parent().next().width($(this).parent().parent().parent().next().width() > ($('html').attr('dir') != 'rtl' ? $(this).closest('td').width() - $(this).parent().parent().parent().offset().left + $(this).closest('td').offset().left : $(this).parent().parent().parent().width() + $(this).parent().parent().parent().offset().left - $(this).closest('td').offset().left) ? $('html').attr('dir') != 'rtl' ? $(this).closest('td').width() - $(this).parent().parent().parent().offset().left + $(this).closest('td').offset().left : $(this).parent().parent().parent().width() + $(this).parent().parent().parent().offset().left - $(this).closest('td').offset().left : '').css('display','inline');

                              $(this).css('display','none').next('a.resize').css('display','inline-block');
                              $(this).parent().parent().parent().width('').width($(this).parent().parent().parent().next().width());
                              return false;
                          })
                          .parent()
                          .append(document.createElement('a'))
                          .children()
                          .next()
                          .addClass('resize')
                          .attr('href','#')
                          .text('{switch_image_resize.L_CLICK_TO_RESIZE}')
                          .click(function(){
                              $(this).parent().parent().parent().next().width(parseInt($(this).parent().parent().parent().next().attr('resizeWidth'))).removeAttr('resizeWidth');
                              $(this).css('display','none').prev('a.enlarge').css('display','inline-block');
                              $(this).parent().parent().parent().width('').width($(this).parent().parent().parent().next().width());
                              return false;
                          })
                          .parent()
                          .append(document.createElement('div'))
                          .children('a.resize')
                          .next()
                          .addClass('resize_filler')
                          .text(' ')
                          .parent()
                          .append(document.createElement('a'))
                          .children('div.resize_filler')
                          .next()
                          .addClass('fullsize')
                          .attr('href','#')
                          .click(function(){
                              window.open('/viewimage.forum?u=' + encodeURIComponent($(this).parent().parent().parent().next().attr('src')));
                              return false;
                          })
                          .attr('target', '_blank')
                          .text('{switch_image_resize.L_CLICK_TO_SEE_FULLSIZE}');
                      if ($(this).width() > ($('html').attr('dir') != 'rtl' ? $(this).closest('td').width() - $(this).prev().offset().left + $(this).closest('td').offset().left : $(this).prev().width() + $(this).prev().offset().left - $(this).closest('td').offset().left)){
                          $(this).prev().find('a.fullsize').attr('href','/viewimage.forum?u=' + encodeURIComponent($(this).attr('src'))).css('display', 'inline-block');
                      }
                      $(this).width($(this).width() * ( ( {switch_image_resize.IMG_RESIZE_WIDTH} != 0 && ( {switch_image_resize.IMG_RESIZE_HEIGHT} == 0 || $(this).width() / $(this).height() > {switch_image_resize.IMG_RESIZE_WIDTH} / {switch_image_resize.IMG_RESIZE_HEIGHT} ) )
                              ? {switch_image_resize.IMG_RESIZE_WIDTH} / $(this).width()
                              : {switch_image_resize.IMG_RESIZE_HEIGHT} / $(this).height() ) )
                          .css('display','inline')
                          .prev().width($(this).width());
                  }
              })
              .css('display','inline');
      });
      //]]>
      </script>
      <!-- END switch_image_resize -->

      --> profile_advanced_body.tpl
      Spoiler:

      ¤ Ajouter à la fin du fichier :
      Code:
      <!-- BEGIN switch_image_resize -->
      <script type="text/javascript">
      //<![CDATA[
      $(function(){
          $('.message-text img').not('.signature_div img').css('display','none');
      });
      $(window).load(function(){
          $('.message-text img')
              .not('div.signature_div img')
              .each(function(){
                  if ( ( $(this).width() > {switch_image_resize.IMG_RESIZE_WIDTH} && {switch_image_resize.IMG_RESIZE_WIDTH} != 0 ) || ( $(this).height() > {switch_image_resize.IMG_RESIZE_HEIGHT} && {switch_image_resize.IMG_RESIZE_HEIGHT} != 0 ) ) {
                      $(this)
                          .before(document.createElement('div'))
                          .prev()
                          .click(function(){
                              return false;
                          })
                          .addClass('resizebox gensmall clearfix')
                          .append(document.createElement('div'))
                          .children()
                          .addClass('resize_border clearfix')
                          .append(document.createElement('div'))
                          .children()
                          .addClass('resize_content clearfix')
                          .append(document.createElement('a'))
                          .children()
                          .addClass('enlarge')
                          .attr('href', '#')
                          .text('{switch_image_resize.L_IMAGE_ENLARGE}')
                          .focus(function(){
                              $(this).blur();
                          })
                          .click(function(){
                              $(this).parent().parent().parent().next().css('display','none').attr('resizeWidth', $(this).parent().parent().parent().next().width()).width('');
                              $(this).parent().parent().parent().next().width($(this).parent().parent().parent().next().width() > ($('html').attr('dir') != 'rtl' ? $(this).closest('.message-text').width() - $(this).parent().parent().parent().offset().left + $(this).closest('.message-text').offset().left : $(this).parent().parent().parent().width() + $(this).parent().parent().parent().offset().left - $(this).closest('.message-text').offset().left) ? $('html').attr('dir') != 'rtl' ? $(this).closest('.message-text').width() - $(this).parent().parent().parent().offset().left + $(this).closest('.message-text').offset().left : $(this).parent().parent().parent().width() + $(this).parent().parent().parent().offset().left - $(this).closest('.message-text').offset().left : '').css('display','inline');
                              $(this).css('display','none').next('a.resize').css('display','inline-block');
                              $(this).parent().parent().parent().width('').width($(this).parent().parent().parent().next().width());
                              return false;
                          })
                          .parent()
                          .append(document.createElement('a'))
                          .children()
                          .next()
                          .addClass('resize')
                          .attr('href','#')
                          .text('{switch_image_resize.L_CLICK_TO_RESIZE}')
                          .click(function(){
                              $(this).parent().parent().parent().next().width(parseInt($(this).parent().parent().parent().next().attr('resizeWidth'))).removeAttr('resizeWidth');
                              $(this).css('display','none').prev('a.enlarge').css('display','inline-block');
                              $(this).parent().parent().parent().width('').width($(this).parent().parent().parent().next().width());
                              return false;
                          })
                          .parent()
                          .append(document.createElement('div'))
                          .children('a.resize')
                          .next()
                          .addClass('resize_filler')
                          .text(' ')
                          .parent()
                          .append(document.createElement('a'))
                          .children('div.resize_filler')
                          .next()
                          .addClass('fullsize')
                          .attr('href','#')
                          .click(function(){
                              window.open('/viewimage.forum?u=' + encodeURIComponent($(this).parent().parent().parent().next().attr('src')));
                              return false;
                          })
                          .attr('target', '_blank')
                          .text('{switch_image_resize.L_CLICK_TO_SEE_FULLSIZE}');
                      if ($(this).width() > ($('html').attr('dir') != 'rtl' ? $(this).closest('.message-text').width() - $(this).prev().offset().left + $(this).closest('.message-text').offset().left : $(this).prev().width() + $(this).prev().offset().left - $(this).closest('.message-text').offset().left)){
                          $(this).prev().find('a.fullsize').attr('href','/viewimage.forum?u=' + encodeURIComponent($(this).attr('src'))).css('display', 'inline-block');
                      }
                      $(this).width($(this).width() * ( ( {switch_image_resize.IMG_RESIZE_WIDTH} != 0 && ( {switch_image_resize.IMG_RESIZE_HEIGHT} == 0 || $(this).width() / $(this).height() > {switch_image_resize.IMG_RESIZE_WIDTH} / {switch_image_resize.IMG_RESIZE_HEIGHT} ) )
                              ? {switch_image_resize.IMG_RESIZE_WIDTH} / $(this).width()
                              : {switch_image_resize.IMG_RESIZE_HEIGHT} / $(this).height() ) )
                          .css('display','inline')
                          .prev().width($(this).width());
                  }
              })
              .css('display','inline');
      });
      //]]>
      </script>
      <!-- END switch_image_resize -->

      --> topics_blog_box.tpl
      Spoiler:

      ¤ Ajouter à la fin du fichier
      Code:
      <!-- BEGIN switch_image_resize -->
      <script type="text/javascript">
      //<![CDATA[
      $(function(){
          $('.blog_message img').not('.signature_div img').css('display','none');
      });
      $(window).load(function(){
          $('.blog_message img')
              .each(function(){
                  if ( ( $(this).width() > {switch_image_resize.IMG_RESIZE_WIDTH} && {switch_image_resize.IMG_RESIZE_WIDTH} != 0 ) || ( $(this).height() > {switch_image_resize.IMG_RESIZE_HEIGHT} && {switch_image_resize.IMG_RESIZE_HEIGHT} != 0 ) ) {
                      $(this)
                          .before(document.createElement('div'))
                          .prev()
                          .click(function(){
                              return false;
                          })
                          .addClass('resizebox gensmall clearfix')
                          .append(document.createElement('div'))
                          .children()
                          .addClass('resize_border clearfix')
                          .append(document.createElement('div'))
                          .children()
                          .addClass('resize_content clearfix')
                          .append(document.createElement('a'))
                          .children()
                          .addClass('enlarge')
                          .attr('href', '#')
                          .text('{switch_image_resize.L_IMAGE_ENLARGE}')
                          .focus(function(){
                              $(this).blur();
                          })
                          .click(function(){
                              $(this).parent().parent().parent().next().css('display','none').attr('resizeWidth', $(this).parent().parent().parent().next().width()).width('');
                              $(this).parent().parent().parent().next().width($(this).parent().parent().parent().next().width() > ($('html').attr('dir') != 'rtl' ? $(this).closest('td').width() - $(this).parent().parent().parent().offset().left + $(this).closest('td').offset().left : $(this).parent().parent().parent().width() + $(this).parent().parent().parent().offset().left - $(this).closest('td').offset().left) ? ($('html').attr('dir') != 'rtl' ? $(this).closest('td').width() - $(this).parent().parent().parent().offset().left + $(this).closest('td').offset().left : $(this).parent().parent().parent().width() + $(this).parent().parent().parent().offset().left - $(this).closest('td').offset().left) : '').css('display','inline');
                             
                              $(this).css('display','none').next('a.resize').css('display','inline-block');
                              $(this).parent().parent().parent().width('').width($(this).parent().parent().parent().next().width());
                              return false;
                          })
                          .parent()
                          .append(document.createElement('a'))
                          .children()
                          .next()
                          .addClass('resize')
                          .attr('href','#')
                          .text('{switch_image_resize.L_CLICK_TO_RESIZE}')
                          .click(function(){
                              $(this).parent().parent().parent().next().width(parseInt($(this).parent().parent().parent().next().attr('resizeWidth'))).removeAttr('resizeWidth');
                              $(this).css('display','none').prev('a.enlarge').css('display','inline-block');
                              $(this).parent().parent().parent().width('').width($(this).parent().parent().parent().next().width());
                              return false;
                          })
                          .parent()
                          .append(document.createElement('div'))
                          .children('a.resize')
                          .next()
                          .addClass('resize_filler')
                          .text(' ')
                          .parent()
                          .append(document.createElement('a'))
                          .children('div.resize_filler')
                          .next()
                          .addClass('fullsize')
                          .attr('href','#')
                          .click(function(){
                              window.open('/viewimage.forum?u=' + encodeURIComponent($(this).parent().parent().parent().next().attr('src')));
                              return false;
                          })
                          .attr('target', '_blank')
                          .text('{switch_image_resize.L_CLICK_TO_SEE_FULLSIZE}');
                      if ($(this).width() > ($('html').attr('dir') != 'rtl' ? $(this).closest('td').width() - $(this).prev().offset().left + $(this).closest('td').offset().left : $(this).prev().width() + $(this).prev().offset().left - $(this).closest('td').offset().left)){
                          $(this).prev().find('a.fullsize').attr('href','/viewimage.forum?u=' + encodeURIComponent($(this).attr('src'))).css('display', 'inline-block');
                      }
                      $(this).width($(this).width() * ( ( {switch_image_resize.IMG_RESIZE_WIDTH} != 0 && ( {switch_image_resize.IMG_RESIZE_HEIGHT} == 0 || $(this).width() / $(this).height() > {switch_image_resize.IMG_RESIZE_WIDTH} / {switch_image_resize.IMG_RESIZE_HEIGHT} ) )
                              ? {switch_image_resize.IMG_RESIZE_WIDTH} / $(this).width()
                              : {switch_image_resize.IMG_RESIZE_HEIGHT} / $(this).height() ) )
                          .css('display','inline')
                          .prev().width($(this).width());
                  }
              })
              .css('display','inline');
      });
      //]]>
      </script>
      <!-- END switch_image_resize -->



Vivi
Adminactive
Adminactive

Féminin
Messages: 22124
Réputation: 2825
Inscrit(e) le: 30/03/2007

http://forum.forumactif.com

Revenir en haut Aller en bas

Tutoriel Re: Redimensionnement automatique des images

Message par Vivi le Mar 27 Oct 2009 - 15:28

  • punBB

      --> mod_news.tpl
      Spoiler:

      ¤ Remplacer tout par :
      Code:
      <!-- BEGIN post_row -->
      <!-- BEGIN saut -->
      <div style="height:2px"></div>
      <!-- END saut -->
      <div class="module main">
          <a name="news_{post_row.ID}"></a>

          <div class="module mod_news">
              <div class="main-head" style="text-align:{LEFT};">{post_row.TITLE}</div>
              <div class="main-content" style="padding:0;">
                  <p class="author">{post_row.TIME} {BY} <strong>{post_row.POSTER}</strong></p>
                  <div class="body">
                      {post_row.TEXT}<br /><br />{post_row.OPEN}<a href="{post_row.U_READ_FULL}">{post_row.L_READ_FULL}</a>{post_row.CLOSE}
                  </div>
                  <p class="comments"><a href="{post_row.U_VIEW_COMMENTS}">{L_COMMENTS}</a>: {post_row.REPLIES}</p>
              </div>
          </div>

      </div>
      <!-- END post_row -->
      <!-- BEGIN switch_image_resize -->
      <script type="text/javascript">
      //<![CDATA[
      $(function(){
          $('.mod_news .content img').not('.signature_div img').css('display','none');
      });
      $(window).load(function(){
          $('.mod_news .body img')
              .each(function(){
                  if ( ( $(this).width() > {switch_image_resize.IMG_RESIZE_WIDTH} && {switch_image_resize.IMG_RESIZE_WIDTH} != 0 ) || ( $(this).height() > {switch_image_resize.IMG_RESIZE_HEIGHT} && {switch_image_resize.IMG_RESIZE_HEIGHT} != 0 ) ) {
                      $(this)
                          .before(document.createElement('div'))
                          .prev()
                          .click(function(){
                              return false;
                          })
                          .addClass('resizebox')
                          .append(document.createElement('div'))
                          .children()
                          .addClass('resize_border clearfix')
                          .append(document.createElement('div'))
                          .children()
                          .addClass('resize_content clearfix')
                          .append(document.createElement('a'))
                          .children()
                          .addClass('enlarge')
                          .attr('href', '#')
                          .text('{switch_image_resize.L_IMAGE_ENLARGE}')
                          .focus(function(){
                              $(this).blur();
                          })
                          .click(function(){
                              $(this).parent().parent().parent().next().css('display','none').attr('resizeWidth', $(this).parent().parent().parent().next().width()).width('');
                              $(this).parent().parent().parent().next().width($(this).parent().parent().parent().next().width() > ($('html').attr('dir') != 'rtl' ? $(this).closest('.body').width() - $(this).parent().parent().parent().offset().left + $(this).closest('.body').offset().left : $(this).parent().parent().parent().width() + $(this).parent().parent().parent().offset().left - $(this).closest('.body').offset().left) ? $('html').attr('dir') != 'rtl' ? $(this).closest('.body').width() - $(this).parent().parent().parent().offset().left + $(this).closest('.body').offset().left : $(this).parent().parent().parent().width() + $(this).parent().parent().parent().offset().left - $(this).closest('.body').offset().left : '').css('max-width','100%').css('display','inline');
                              $(this).css('display','none').next('a.resize').css('display','inline-block');
                              $(this).parent().parent().parent().width($(this).parent().parent().parent().next().width());
                              return false;
                          })
                          .parent()
                          .append(document.createElement('a'))
                          .children()
                          .next()
                          .addClass('resize')
                          .attr('href','#')
                          .text('{switch_image_resize.L_CLICK_TO_RESIZE}')
                          .click(function(){
                              $(this).parent().parent().parent().next().width(parseInt($(this).parent().parent().parent().next().attr('resizeWidth'))).removeAttr('resizeWidth');
                              $(this).css('display','none').prev('a.enlarge').css('display','inline-block');
                              $(this).parent().parent().parent().width('').width($(this).parent().parent().parent().next().width());
                              return false;
                          })
                          .parent()
                          .append(document.createElement('div'))
                          .children('a.resize')
                          .next()
                          .addClass('resize_filler')
                          .text(' ')
                          .parent()
                          .append(document.createElement('a'))
                          .children('div.resize_filler')
                          .next()
                          .addClass('fullsize')
                          .attr('href','#')
                          .click(function(){
                              window.open('/viewimage.forum?u=' + encodeURIComponent($(this).parent().parent().parent().next().attr('src')));
                              return false;
                          })
                          .attr('target', '_blank')
                          .text('{switch_image_resize.L_CLICK_TO_SEE_FULLSIZE}');
                      if ($(this).width() > ($('html').attr('dir') != 'rtl' ? $(this).closest('.body').width() - $(this).prev().offset().left + $(this).closest('.body').offset().left : $(this).prev().width() + $(this).prev().offset().left - $(this).closest('.body').offset().left)){
                          $(this).prev().find('a.fullsize').attr('href','/viewimage.forum?u=' + encodeURIComponent($(this).attr('src'))).css('display', 'inline-block');
                      }
                      $(this).width($(this).width() * ( ( {switch_image_resize.IMG_RESIZE_WIDTH} != 0 && ( {switch_image_resize.IMG_RESIZE_HEIGHT} == 0 || $(this).width() / $(this).height() > {switch_image_resize.IMG_RESIZE_WIDTH} / {switch_image_resize.IMG_RESIZE_HEIGHT} ) )
                              ? {switch_image_resize.IMG_RESIZE_WIDTH} / $(this).width()
                              : {switch_image_resize.IMG_RESIZE_HEIGHT} / $(this).height() ) )
                          .prev().width($(this).width());
                  }
              })
              .css('display', 'inline');
      });
      //]]>
      </script>
      <!-- END switch_image_resize -->

      --> viewtopic_body.tpl et posting_body.tpl et privmsgs_read_body.tpl et viewcomments_body.tpl
      Spoiler:

      Ajouter à la fin du fichier :
      Code:
      <!-- BEGIN switch_image_resize -->
      <script type="text/javascript">
      //<![CDATA[
      $(function(){
          $('.post-entry .entry-content img').not('.signature_div img').css('display','none');
      });
      $(window).load(function(){
          $('.post-entry .entry-content img')
              .not('.signature_div img')
              .each(function(){
                  if ( ( $(this).width() > {switch_image_resize.IMG_RESIZE_WIDTH} && {switch_image_resize.IMG_RESIZE_WIDTH} != 0 ) || ( $(this).height() > {switch_image_resize.IMG_RESIZE_HEIGHT} && {switch_image_resize.IMG_RESIZE_HEIGHT} != 0 ) ) {
                      $(this)
                          .before(document.createElement('div'))
                          .prev()
                          .click(function(){
                              return false;
                          })
                          .addClass('resizebox')
                          .append(document.createElement('div'))
                          .children()
                          .addClass('resize_border clearfix')
                          .append(document.createElement('div'))
                          .children()
                          .addClass('resize_content clearfix')
                          .append(document.createElement('a'))
                          .children()
                          .addClass('enlarge')
                          .attr('href', '#')
                          .text('{switch_image_resize.L_IMAGE_ENLARGE}')
                          .focus(function(){
                              $(this).blur();
                          })
                          .click(function(){
                              $(this).parent().parent().parent().next().css('display','none').attr('resizeWidth', $(this).parent().parent().parent().next().width()).width('');
                              $(this).parent().parent().parent().next().width($(this).parent().parent().parent().next().width() > $(this).closest('.entry-content').width()?'100%':'').css('max-width','100%').css('display','inline');
                              $(this).css('display','none').next('a.resize').css('display','inline-block');
                              $(this).parent().parent().parent().width($(this).parent().parent().parent().next().width());
                              return false;
                          })
                          .parent()
                          .append(document.createElement('a'))
                          .children()
                          .next()
                          .addClass('resize')
                          .attr('href','#')
                          .text('{switch_image_resize.L_CLICK_TO_RESIZE}')
                          .click(function(){
                              $(this).parent().parent().parent().next().width(parseInt($(this).parent().parent().parent().next().attr('resizeWidth'))).removeAttr('resizeWidth');
                              $(this).css('display','none').prev('a.enlarge').css('display','inline-block');
                              $(this).parent().parent().parent().width('').width($(this).parent().parent().parent().next().width());
                              return false;
                          })
                          .parent()
                          .append(document.createElement('div'))
                          .children('a.resize')
                          .next()
                          .addClass('resize_filler')
                          .text(' ')
                          .parent()
                          .append(document.createElement('a'))
                          .children('div.resize_filler')
                          .next()
                          .addClass('fullsize')
                          .attr('href','#')
                          .click(function(){
                              window.open('/viewimage.forum?u=' + encodeURIComponent($(this).parent().parent().parent().next().attr('src')));
                              return false;
                          })
                          .attr('target', '_blank')
                          .text('{switch_image_resize.L_CLICK_TO_SEE_FULLSIZE}');
                      if ($(this).width() > ($('html').attr('dir') != 'rtl' ? $(this).closest('.entry-content').width() - $(this).prev().offset().left + $(this).closest('.entry-content').offset().left : $(this).prev().width() + $(this).prev().offset().left - $(this).closest('.entry-content').offset().left)){
                          $(this).prev().find('a.fullsize').attr('href','/viewimage.forum?u=' + encodeURIComponent($(this).attr('src'))).css('display', 'inline-block');
                      }
                      $(this).width($(this).width() * ( ( {switch_image_resize.IMG_RESIZE_WIDTH} != 0 && ( {switch_image_resize.IMG_RESIZE_HEIGHT} == 0 || $(this).width() / $(this).height() > {switch_image_resize.IMG_RESIZE_WIDTH} / {switch_image_resize.IMG_RESIZE_HEIGHT} ) )
                              ? {switch_image_resize.IMG_RESIZE_WIDTH} / $(this).width()
                              : {switch_image_resize.IMG_RESIZE_HEIGHT} / $(this).height() ) )
                          .prev().width($(this).width());
                  }
              })
              .css('display', 'inline');
      });
      //]]>
      </script>
      <!-- END switch_image_resize -->

      --> profile_advanced_body.tpl
      Spoiler:

      ¤ Ajouter à la fin du fichier :
      Code:
      <!-- BEGIN switch_image_resize -->
      <script type="text/javascript">
      //<![CDATA[
      $(function(){
          $('.message-text img').not('.signature_div img').css('display','none');
      });
      $(window).load(function(){
          $('.message-text img')
              .not('.signature_div img')
              .each(function(){
                  if ( ( $(this).width() > {switch_image_resize.IMG_RESIZE_WIDTH} && {switch_image_resize.IMG_RESIZE_WIDTH} != 0 ) || ( $(this).height() > {switch_image_resize.IMG_RESIZE_HEIGHT} && {switch_image_resize.IMG_RESIZE_HEIGHT} != 0 ) ) {
                      $(this)
                          .before(document.createElement('div'))
                          .prev()
                          .click(function(){
                              return false;
                          })
                          .addClass('resizebox')
                          .append(document.createElement('div'))
                          .children()
                          .addClass('resize_border clearfix')
                          .append(document.createElement('div'))
                          .children()
                          .addClass('resize_content clearfix')
                          .append(document.createElement('a'))
                          .children()
                          .addClass('enlarge')
                          .attr('href', '#')
                          .text('{switch_image_resize.L_IMAGE_ENLARGE}')
                          .focus(function(){
                              $(this).blur();
                          })
                          .click(function(){
                              $(this).parent().parent().parent().next().css('display','none').attr('resizeWidth', $(this).parent().parent().parent().next().width()).width('');
                              $(this).parent().parent().parent().next().width($(this).parent().parent().parent().next().width() > $(this).closest('.message-text').width()?'100%':'').css('display','inline');
                              $(this).css('display','none').next('a.resize').css('display','inline-block');
                              $(this).parent().parent().parent().width($(this).parent().parent().parent().next().width());
                              return false;
                          })
                          .parent()
                          .append(document.createElement('a'))
                          .children()
                          .next()
                          .addClass('resize')
                          .attr('href','#')
                          .text('{switch_image_resize.L_CLICK_TO_RESIZE}')
                          .click(function(){
                              $(this).parent().parent().parent().next().width(parseInt($(this).parent().parent().parent().next().attr('resizeWidth'))).removeAttr('resizeWidth');
                              $(this).css('display','none').prev('a.enlarge').css('display','inline-block');
                              $(this).parent().parent().parent().width('').width($(this).parent().parent().parent().next().width());
                              return false;
                          })
                          .parent()
                          .append(document.createElement('div'))
                          .children('a.resize')
                          .next()
                          .addClass('resize_filler')
                          .text(' ')
                          .parent()
                          .append(document.createElement('a'))
                          .children('div.resize_filler')
                          .next()
                          .addClass('fullsize')
                          .attr('href','#')
                          .click(function(){
                              window.open('/viewimage.forum?u=' + encodeURIComponent($(this).parent().parent().parent().next().attr('src')));
                              return false;
                          })
                          .attr('target', '_blank')
                          .text('{switch_image_resize.L_CLICK_TO_SEE_FULLSIZE}');
                      if ($(this).width() > ($('html').attr('dir') != 'rtl' ? $(this).closest('.message-text').width() - $(this).prev().offset().left + $(this).closest('.message-text').offset().left : $(this).prev().width() + $(this).prev().offset().left - $(this).closest('.message-text').offset().left)){
                          $(this).prev().find('a.fullsize').attr('href','/viewimage.forum?u=' + encodeURIComponent($(this).attr('src'))).css('display', 'inline-block');
                      }
                      $(this).width($(this).width() * ( ( {switch_image_resize.IMG_RESIZE_WIDTH} != 0 && ( {switch_image_resize.IMG_RESIZE_HEIGHT} == 0 || $(this).width() / $(this).height() > {switch_image_resize.IMG_RESIZE_WIDTH} / {switch_image_resize.IMG_RESIZE_HEIGHT} ) )
                              ? {switch_image_resize.IMG_RESIZE_WIDTH} / $(this).width()
                              : {switch_image_resize.IMG_RESIZE_HEIGHT} / $(this).height() ) )
                          .prev().width($(this).width());
                  }
              })
              .css('display', 'inline');
      });
      //]]>
      </script>
      <!-- END switch_image_resize -->

      --> topics_blog_box.tpl
      Spoiler:

      ¤ Ajouter à la fin du fichier :
      Code:
      <!-- BEGIN switch_image_resize -->
      <script type="text/javascript">
      //<![CDATA[
      $(function(){
          $('.blog_message img').not('.signature_div img').css('display','none');
      });
      $(window).load(function(){
          $('.blog_message img')
              .each(function(){
                  if ( ( $(this).width() > {switch_image_resize.IMG_RESIZE_WIDTH} && {switch_image_resize.IMG_RESIZE_WIDTH} != 0 ) || ( $(this).height() > {switch_image_resize.IMG_RESIZE_HEIGHT} && {switch_image_resize.IMG_RESIZE_HEIGHT} != 0 ) ) {
                      $(this)
                          .before(document.createElement('div'))
                          .prev()
                          .click(function(){
                              return false;
                          })
                          .addClass('resizebox clearfix')
                          .append(document.createElement('div'))
                          .children()
                          .addClass('resize_border clearfix')
                          .append(document.createElement('div'))
                          .children()
                          .addClass('resize_content clearfix')
                          .append(document.createElement('a'))
                          .children()
                          .addClass('enlarge')
                          .attr('href', '#')
                          .text('{switch_image_resize.L_IMAGE_ENLARGE}')
                          .focus(function(){
                              $(this).blur();
                          })
                          .click(function(){
                              $(this).parent().parent().parent().next().css('display','none').attr('resizeWidth', $(this).parent().parent().parent().next().width()).width('');
                              $(this).parent().parent().parent().next().width($(this).parent().parent().parent().next().width() > ($('html').attr('dir') != 'rtl' ? $(this).closest('.blog_message').width() - $(this).parent().parent().parent().offset().left + $(this).closest('.blog_message').offset().left : $(this).parent().parent().parent().width() + $(this).parent().parent().parent().offset().left - $(this).closest('.blog_message').offset().left) ? $('html').attr('dir') != 'rtl' ? $(this).closest('.blog_message').width() - $(this).parent().parent().parent().offset().left + $(this).closest('.blog_message').offset().left : $(this).parent().parent().parent().width() + $(this).parent().parent().parent().offset().left - $(this).closest('.blog_message').offset().left : '').css('display','inline');
                              $(this).css('display','none').next('a.resize').css('display','inline-block');
                              $(this).parent().parent().parent().width($(this).parent().parent().parent().next().width());
                              return false;
                          })
                          .parent()
                          .append(document.createElement('a'))
                          .children()
                          .next()
                          .addClass('resize')
                          .attr('href','#')
                          .text('{switch_image_resize.L_CLICK_TO_RESIZE}')
                          .click(function(){
                              $(this).parent().parent().parent().next().width(parseInt($(this).parent().parent().parent().next().attr('resizeWidth'))).removeAttr('resizeWidth');
                              $(this).css('display','none').prev('a.enlarge').css('display','inline-block');
                              $(this).parent().parent().parent().width('').width($(this).parent().parent().parent().next().width());
                              return false;
                          })
                          .parent()
                          .append(document.createElement('div'))
                          .children('a.resize')
                          .next()
                          .addClass('resize_filler')
                          .text(' ')
                          .parent()
                          .append(document.createElement('a'))
                          .children('div.resize_filler')
                          .next()
                          .addClass('fullsize')
                          .attr('href','#')
                          .click(function(){
                              window.open('/viewimage.forum?u=' + encodeURIComponent($(this).parent().parent().parent().next().attr('src')));
                              return false;
                          })
                          .attr('target', '_blank')
                          .text('{switch_image_resize.L_CLICK_TO_SEE_FULLSIZE}');
                      if ($(this).width() > ($('html').attr('dir') != 'rtl' ? $(this).closest('.blog_message').width() - $(this).prev().offset().left + $(this).closest('.blog_message').offset().left : $(this).prev().width() + $(this).prev().offset().left - $(this).closest('.blog_message').offset().left)){
                          $(this).prev().find('a.fullsize').attr('href','/viewimage.forum?u=' + encodeURIComponent($(this).attr('src'))).css('display', 'inline-block');
                      }
                      $(this).width($(this).width() * ( ( {switch_image_resize.IMG_RESIZE_WIDTH} != 0 && ( {switch_image_resize.IMG_RESIZE_HEIGHT} == 0 || $(this).width() / $(this).height() > {switch_image_resize.IMG_RESIZE_WIDTH} / {switch_image_resize.IMG_RESIZE_HEIGHT} ) )
                              ? {switch_image_resize.IMG_RESIZE_WIDTH} / $(this).width()
                              : {switch_image_resize.IMG_RESIZE_HEIGHT} / $(this).height() ) )
                          .prev().width($(this).width());
                  }
              })
              .css('display', 'inline');
      });
      //]]>
      </script>
      <!-- END switch_image_resize -->

      viewtopic

      --> viewtopic_body.tpl
      Spoiler:

      ¤ trouver:
      Code:
      <!-- BEGIN switch_signature -->
      <div class="sig-content">
          <span class="sig-line"></span>
          {postrow.displayed.SIGNATURE_NEW}
      </div>
      <!-- END switch_signature -->
      remplacer par:
      Code:
      <!-- BEGIN switch_signature -->
      <div class="sig-content">
          {postrow.displayed.SIGNATURE_NEW}
      </div>
      <!-- END switch_signature -->

Vivi
Adminactive
Adminactive

Féminin
Messages: 22124
Réputation: 2825
Inscrit(e) le: 30/03/2007

http://forum.forumactif.com

Revenir en haut Aller en bas

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


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