It is currently Mon 26 Sep 2016 - 00:29 - créer un forum

Redimensionner automatiquement les images, version 2

Skip to content

Post new topic Reply to topic Goto page: 1, 2, 315, 16, 17  >

Redimensionner automatiquement les images, version 2
Author Message
Arlem2


Offline
Guest




PostPosted: Thu 21 Dec 2006 - 19:51    Post subject: Redimensionner automatiquement les images, version 2 Reply with quote

PublicitéSupprimer les publicités ?
  • Titre: Redimensionner automatiquement les images
  • Version: 2

  • Auteur article: Arlem2, Xooit
  • Source: Xooit, Gef0301 : http://xooit.xooit.com/p108215.htm

  • Description: Ce tuto va vous permettre de redimensionner automatiquement les images que vos menbres mettront dans leurs messages. Un clique sur l’image affiche l’image taille réelle.

  • Niveau d'installation: Facile
  • Temps d'installation: 20 Secs.
  • Nombre de template a modifié : 1

  • Fonctionne sur les thémes : Tous
  • Test effectué sur : Xooit

  • Defaut : Fonctionne avec 99% des thèmes
  • Exemple : Ce forum

Ce tuto nécessite la modification d’un template. Essayez d’abord sur le thème de test pour éviter les problèmes.

Nouvelle version:

  1. Plus rapide
  2. Affiche les images taille réelles dans la même fenêtre
  3. Si l’image est dans un lien, ça ouvre le lien plutôt que l’image taille réelle
  4. C’est la version qui est utilisée actuellement sur ce forum

Ouvrez le template overall_header.tpl, recherchez <body...>, et ajoutez ceci après <body...>:

Code: Sélectionner - Agrandir
<script type="text/javascript">

 /* Modifiez 530 ici par la largeur maximum que vous voulez
  */
 MAX_IMG_WIDTH = 530;

 function resizedImgClick(event) {
  event = (event || window.event);
  var img = Event.element(event);

  // L'image est dans un lien, on laisse le lien s'ouvrir
  if (img.up('a')) return;

  // L'image taille réelle est actuellement affichée, on la ferme
  if (fullImg = $('img.resizedImgFull[src="'+img.src+'"]')[0]) {
   fullImg.parentNode.removeChild(fullImg);
   Event.stop(event);
   return false;
  }

  // On peut afficher l'image taille réelle. Avant, on ferme toutes les images taille réelle
  $('img.resizedImgFull').each(function(elem) {
   elem.parentNode.removeChild(elem);
  });

  // On affiche l'image taille réelle
  var elem = $cE('img');
  elem.src=img.src;
  elem.setStyle({
   position:'absolute',top:document.body.scrollTop,left:document.body.scrollLeft,cursor:'pointer'
  });
  elem.addClassName('resizedImgFull');
  elem.onclick=resizedImgClose;
  document.body.appendChild(elem);
  Event.stop(event);
  return false;
 }
 function resizedImgClose(event) {
  event = (event || window.event);
  var img = Event.element(event);
  img.parentNode.removeChild(img);
  Event.stop(event);
  return false;
 }
 function imgsize(maxwidth) {
  $$('.postbody img').each(function(img) {
   if (img.width <= maxwidth) return;
   img.width=maxwidth;
   img.style['cursor']='pointer';
   img.onclick=resizedImgClick;
  });
 }
 Event.observe(window,'load',function(){imgsize(MAX_IMG_WIDTH);});
</script>


Anciennes solutions:



    Cherchez
    Code: Sélectionner - Agrandir
    <!-- BEGIN switch_enable_pm_popup -->

    Juste au dessous, ajoutez :

    Code: Sélectionner - Agrandir
    <script type="text/javascript">
     maxwidth=630;
     function imgsize() {
     document.getElementsByClassName('postbody').each(
       function(elem) {
        $A(elem.getElementsByTagName('img')).each(
         function(elem) {
          if (elem.with<=maxwidth) return;
          elem.width=maxwidth;
          elem.setStyle({cursor:'pointer'}).onclick=function(){window.open(this.src);};
         }
        )
       }
      );
     }
     Event.observe(window,'load',imgsize);
    </script>


    Dans la deuxième ligne de ce script changer 630 par la largeur maximum que vous désirez


    Autre solution:

    Défauts:
    1. Ne fonctionne pas avec Internet Explorer ≤ 6.
    2. Ne permet pas de voir l’image taille réelle

    dans bbcode.tpl
    rechercher :
    Code: Sélectionner - Agrandir
    <!-- BEGIN img --><img src="{URL}" border="0"  /><!-- END img -->


    Remplacer par :
    Code: Sélectionner - Agrandir
    <!-- BEGIN img --><img src="{URL}" border="0" class="picture" /><!-- END img -->


    Dans votre "nomdethème".css, tout à la fin ajoutez :
    Code: Sélectionner - Agrandir
    .picture{
    max-width: 640px;
    width: expression(Math.min(this.width, 640));
    }



    Toutes les images qui ont une largeur supérieure à max-width et insérées avec le bbcode [ img ] seront redimensionnées à 640px; la hauteur est réduite en proportion

    Pour mettre une autre largeur maximale, il faut remplacer les deux 640 dans le code ci-dessus

    Fonctionne avec IE6, Iceweasel, Konqueror, Firefox
    avec Opera 9, l'image est réduite aux proportions voulues, mais le forum est quand même défiguré


    Last edited by Arlem2 on Sat 3 Oct 2009 - 21:07; edited 5 times in total
    Author Message
    JEAPPER
    Équipe Xooit.com


    Offline
    Équipe Xooit.com

    Joined: 01 Jan 1970
    Posts: 1,206
    Point(s): -8,541
    Moyenne: -7.08
    Mac Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin Vierge (24aoû-22sep) 馬 Cheval

    PostPosted: Thu 28 Jun 2007 - 13:11    Post subject: Redimensionner automatiquement les images, version 2 Reply with quote

    Nouvelle version du script de redimensionnement.

    1. Plus rapide
    2. Affiche les images taille réelles dans la même fenêtre
    3. Si l’image est dans un lien, ça ouvre le lien plutôt que l’image taille réelle
    4. C’est la version qui est utilisée actuellement sur ce forum
    Exemples:

    Image trop grande:



    Image trop grande avec un lien (le lien s’ouvre normalement à la place d’afficher l’image taille réelle).


    _______________________
    Jeapper - Propriétaire de Xooit.com
    Nous ne fournissons aucune assistance par messages privés ou courriel.


    Forum
    Author Message
    Beldin


    Offline
    Guest




    PostPosted: Fri 29 Jun 2007 - 11:52    Post subject: Redimensionner automatiquement les images, version 2 Reply with quote

    Est-ce qu'il y a moyen de me dire ou se trouve la partie à modifier dans mon template (je trouve pas :s)?

    Voila mon template:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html dir="{S_CONTENT_DIRECTION}">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset={S_CONTENT_ENCODING}">
    <meta http-equiv="Content-Style-Type" content="text/css">
    {META}
    {NAV_LINKS}
    <title>{SITENAME} :: {PAGE_TITLE}</title>
    <!-- link rel="stylesheet" href="http://img.xooimage.com/files2/8/2/4/subsilver-3dd85.css" type="text/css" -->
    <style type="text/css">
    <!--
    /*
    The original subSilver Theme for phpBB version 2+
    Created by subBlue design
    http://www.subBlue.com

    NOTE: These CSS definitions are stored within the main page body so that you can use the phpBB2
    theme administration centre. When you have finalised your style you could cut the final CSS code
    and place it in an external file, deleting this section to save bandwidth.
    */

    /* General page style. The scroll bar colours only visible in IE5.5+ */
    body {
    background-color: {T_BODY_BGCOLOR};
    scrollbar-face-color: {T_TR_COLOR2};
    scrollbar-highlight-color: {T_TD_COLOR2};
    scrollbar-shadow-color: {T_TR_COLOR2};
    scrollbar-3dlight-color: {T_TR_COLOR3};
    scrollbar-arrow-color: {T_BODY_LINK};
    scrollbar-track-color: {T_TR_COLOR1};
    scrollbar-darkshadow-color: {T_TH_COLOR1};
    background-image: url("http://img186.imageshack.us/img186/6540/classeqk1.jpg");
    background-repeat: repeat;
    background-attachment: fixed;
    }

    /* General font families for common tags */
    font,th,td,p { font-family: {T_FONTFACE1} }
    a:link,a:active,a:visited { color : {T_BODY_LINK}; }
    a:hover { text-decoration: underline; color : {T_BODY_HLINK}; }
    hr { height: 0px; border: solid {T_TR_COLOR3} 0px; border-top-width: 1px;}

    /* This is the border line & background colour round the entire page */
    /*.bodyline { background-color: {T_TD_COLOR2}; border: 1px {T_TH_COLOR1} solid; }*/

    /* This is the outline round the main forum tables */
    .forumline { background-color: {T_TD_COLOR2}; border: 2px {T_TH_COLOR2} solid; }

    /* Main table cell colours and backgrounds */
    td.row1 { background-color: {T_TR_COLOR1}; filter:Alpha(Opacity=100); }
    td.row2 { background-color: {T_TR_COLOR2}; filter:Alpha(Opacity=100); }
    td.row3 { background-color: {T_TR_COLOR3}; filter:Alpha(Opacity=100); }

    /*
    This is for the table cell above the Topics, Post & Last posts on the index.php page
    By default this is the fading out gradiated silver background.
    However, you could replace this with a bitmap specific for each forum
    */
    td.rowpic {
    background-color: {T_TD_COLOR2};
    background-image: url(http://img.xooimage.com/files5/c/e/cellpic2-30da7.jpg);
    background-repeat: repeat-y;
    }

    /* Header cells - the blue and silver gradient backgrounds */
    th {
    color: {T_FONTCOLOR3}; font-size: {T_FONTSIZE2}px; font-weight : bold;
    background-color: {T_BODY_LINK}; height: 25px;
    background-image: url(http://img.xooimage.com/files2/c/e/cellpic3-30da8.gif);
    }

    td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom {
    background-image: url(http://img.xooimage.com/files2/c/e/cellpic1-30da9.gif);
    background-color:{T_TR_COLOR3}; border: {T_TH_COLOR3}; border-style: solid; height: 28px;
    }

    /*
    Setting additional nice inner borders for the main table cells.
    The names indicate which sides the border will be on.
    Don't worry if you don't understand this, just ignore it Smile
    */
    td.cat,td.catHead,td.catBottom {
    height: 29px;
    border-width: 0px 0px 0px 0px;
    }
    th.thHead,th.thSides,th.thTop,th.thLeft,th.thRight,th.thBottom,th.thCornerL,th.thCornerR {
    font-weight: bold; border: {T_TD_COLOR2}; border-style: solid; height: 28px;
    }
    td.row3Right,td.spaceRow {
    background-color: {T_TR_COLOR3}; filter:Alpha(Opacity=100); border: {T_TH_COLOR3}; border-style: solid;
    }

    th.thHead,td.catHead { font-size: {T_FONTSIZE3}px; border-width: 1px 1px 0px 1px; }
    th.thSides,td.catSides,td.spaceRow { border-width: 0px 1px 0px 1px; }
    th.thRight,td.catRight,td.row3Right { border-width: 0px 1px 0px 0px; }
    th.thLeft,td.catLeft { border-width: 0px 0px 0px 1px; }
    th.thBottom,td.catBottom { border-width: 0px 1px 1px 1px; }
    th.thTop { border-width: 1px 0px 0px 0px; }
    th.thCornerL { border-width: 1px 0px 0px 1px; }
    th.thCornerR { border-width: 1px 1px 0px 0px; }

    /* The largest text used in the index page title and toptic title etc. */
    .maintitle {
    font-weight: bold; font-size: 22px; font-family: "{T_FONTFACE2}",{T_FONTFACE1};
    text-decoration: none; line-height : 120%; color : {T_BODY_TEXT};
    }

    /* General text */
    .gen { font-size : {T_FONTSIZE3}px; }
    .genmed { font-size : {T_FONTSIZE2}px; }
    .gensmall { font-size : {T_FONTSIZE1}px; }
    .gen,.genmed,.gensmall { color : {T_BODY_TEXT}; }
    a.gen,a.genmed,a.gensmall { color: {T_BODY_LINK}; text-decoration: none; }
    a.gen:hover,a.genmed:hover,a.gensmall:hover { color: {T_BODY_HLINK}; text-decoration: underline; }

    /* The register, login, search etc links at the top of the page */
    .mainmenu { font-size : {T_FONTSIZE2}px; color : {T_BODY_TEXT} }
    a.mainmenu { text-decoration: none; color : {T_BODY_LINK}; }
    a.mainmenu:hover{ text-decoration: underline; color : {T_BODY_HLINK}; }

    /* Forum category titles */
    .cattitle { font-weight: bold; font-size: {T_FONTSIZE3}px ; letter-spacing: 1px; color : {T_BODY_LINK}}
    a.cattitle { text-decoration: none; color : {T_BODY_LINK}; }
    a.cattitle:hover{ text-decoration: underline; }

    /* Forum title: Text and link to the forums used in: index.php */
    .forumlink { font-weight: bold; font-size: {T_FONTSIZE3}px; color : {T_BODY_LINK}; }
    a.forumlink { text-decoration: none; color : {T_BODY_LINK}; }
    a.forumlink:hover{ text-decoration: underline; color : {T_BODY_HLINK}; }

    /* Used for the navigation text, (Page 1,2,3 etc) and the navigation bar when in a forum */
    .nav { font-weight: bold; font-size: {T_FONTSIZE2}px; color : {T_BODY_TEXT};}
    a.nav { text-decoration: none; color : {T_BODY_LINK}; }
    a.nav:hover { text-decoration: underline; }

    /* titles for the topics: could specify viewed link colour too */
    .topictitle,h1,h2 { font-weight: bold; font-size: {T_FONTSIZE2}px; color : {T_BODY_TEXT}; }
    a.topictitle:link { text-decoration: none; color : {T_BODY_LINK}; }
    a.topictitle:visited { text-decoration: none; color : {T_BODY_VLINK}; }
    a.topictitle:hover { text-decoration: underline; color : {T_BODY_HLINK}; }

    /* Name of poster in viewmsg.php and viewtopic.php and other places */
    .name { font-size : {T_FONTSIZE2}px; color : {T_BODY_TEXT};}

    /* Location, number of posts, post date etc */
    .postdetails { font-size : {T_FONTSIZE1}px; color : {T_BODY_TEXT}; }

    /* The content of the posts (body of text) */
    .postbody { font-size : {T_FONTSIZE3}px; line-height: 18px}
    a.postlink:link { text-decoration: none; color : {T_BODY_LINK} }
    a.postlink:visited { text-decoration: none; color : {T_BODY_VLINK}; }
    a.postlink:hover { text-decoration: underline; color : {T_BODY_HLINK}}

    /* Quote & Code blocks */
    .code {
    font-family: {T_FONTFACE3}; font-size: {T_FONTSIZE2}px; color: {T_FONTCOLOR2};
    background-color: {T_TD_COLOR1}; border: {T_TR_COLOR3}; border-style: solid;
    border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
    }

    .quote {
    font-family: {T_FONTFACE1}; font-size: {T_FONTSIZE2}px; color: {T_FONTCOLOR1}; line-height: 125%;
    background-color: {T_TD_COLOR1}; border: {T_TR_COLOR3}; border-style: solid;
    border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
    }

    /* Copyright and bottom info */
    .copyright { font-size: {T_FONTSIZE1}px; font-family: {T_FONTFACE1}; color: {T_FONTCOLOR1}; letter-spacing: -1px;}
    a.copyright { color: {T_FONTCOLOR1}; text-decoration: none;}
    a.copyright:hover { color: {T_BODY_TEXT}; text-decoration: underline;}

    /* Form elements */
    input,textarea, select {
    color : {T_BODY_TEXT};
    font: normal {T_FONTSIZE2}px {T_FONTFACE1};
    border-color : {T_BODY_TEXT};
    }

    /* The text input fields background colour */
    input.post, textarea.post, select {
    background-color : {T_TD_COLOR2};
    }

    input { text-indent : 2px; }

    /* The buttons used for bbCode styling in message post */
    input.button {
    background-color : {T_TR_COLOR1};
    color : {T_BODY_TEXT};
    font-size: {T_FONTSIZE2}px; font-family: {T_FONTFACE1};
    }

    /* The main submit button option */
    input.mainoption {
    background-color : {T_TD_COLOR1};
    font-weight : bold;
    }

    /* None-bold submit button */
    input.liteoption {
    background-color : {T_TD_COLOR1};
    font-weight : normal;
    }

    /* This is the line in the posting page which shows the rollover
    help line. This is actually a text box, but if set to be the same
    colour as the background no one will know Wink
    */
    .helpline { background-color: {T_TR_COLOR2}; border-style: none; }

    /* Import the fancy styles for IE only (NS4.x doesn't use the @import function) */
    @import url("http://img.xooimage.com/files10/f/o/formie-30d7c.css");
    -->
    </style>
    <!-- BEGIN switch_enable_pm_popup -->
    <script language="Javascript" type="text/javascript">
    <!--
    if ( {PRIVATE_MESSAGE_NEW_FLAG} )
    {
    window.open('{U_PRIVATEMSGS_POPUP}', '_phpbbprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');;
    }
    //-->
    </script>
    <!-- END switch_enable_pm_popup -->
    </head>
    <body bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">

    <a name="top">[/url]

    <table width="100%" cellspacing="0" cellpadding="10" border="0" align="center">
    <tr>
    <td class="bodyline"><table width="100%" cellspacing="0" cellpadding="0" border="0">
    <tr>
    <td>[url={U_INDEX}]<img src="http://img.xooimage.com/files2/d/e/9/copie-de-classe-157dcb.jpg" border="0" alt="{L_INDEX}" vspace="1" />[/url]</td>
    <td align="center" width="100%" valign="middle"><span class="maintitle">{SITENAME}</span>
    <span class="gen">{SITE_DESCRIPTION}
    &nbsp; </span>
    <table cellspacing="0" cellpadding="2" border="0">
    <tr>
    <td align="center" valign="top" nowrap="nowrap"><span class="mainmenu">&nbsp;[url={U_FAQ}]<img src="http://img.xooimage.com/files1/i/n/interrogation-1--2e754.gif" width="12" height="13" border="0" alt="{L_FAQ}" hspace="3" />{L_FAQ}[/url]</span><span class="mainmenu">&nbsp; &nbsp;[url={U_SEARCH}]<img src="http://img.xooimage.com/files9/i/c/icon_mini_search-30d7d.gif" width="12" height="13" border="0" alt="{L_SEARCH}" hspace="3" />{L_SEARCH}[/url]&nbsp; &nbsp;[url={U_MEMBERLIST}]<img src="http://img.xooimage.com/files8/i/c/icon_mini_members-30d7e.gif" width="12" height="13" border="0" alt="{L_MEMBERLIST}" hspace="3" />{L_MEMBERLIST}[/url]&nbsp; &nbsp;[url={U_GROUP_CP}]<img src="http://img.xooimage.com/files3/i/c/icon_mini_groups-30d7f.gif" width="12" height="13" border="0" alt="{L_USERGROUPS}" hspace="3" />{L_USERGROUPS}[/url]&nbsp;
    <!-- BEGIN switch_user_logged_out -->
    &nbsp;[url={U_REGISTER}]<img src="http://img.xooimage.com/files5/i/c/icon_mini_register-30d80.gif" width="12" height="13" border="0" alt="{L_REGISTER}" hspace="3" />{L_REGISTER}[/url]</span>&nbsp;
    <!-- END switch_user_logged_out -->
    </td>
    </tr>
    <tr>
    <td height="25" align="center" valign="top" nowrap="nowrap"><span class="mainmenu">&nbsp;[url={U_PROFILE}]<img src="http://img.xooimage.com/files2/i/c/icon_mini_profile-30d81.gif" width="12" height="13" border="0" alt="{L_PROFILE}" hspace="3" />{L_PROFILE}[/url]&nbsp; &nbsp;[url={U_PRIVATEMSGS}]<img src="http://img.xooimage.com/files8/i/c/icon_mini_message-30d82.gif" width="12" height="13" border="0" alt="{PRIVATE_MESSAGE_INFO}" hspace="3" />{PRIVATE_MESSAGE_INFO}[/url]&nbsp; &nbsp;[url={U_LOGIN_LOGOUT}]<img src="http://img.xooimage.com/files4/i/c/icon_mini_login-30d83.gif" width="12" height="13" border="0" alt="{L_LOGIN_LOGOUT}" hspace="3" />{L_LOGIN_LOGOUT}[/url]&nbsp;</span></td>
    </tr>
    </table></td>
    </tr>
    </table>





    Author Message
    JEAPPER
    Équipe Xooit.com


    Offline
    Équipe Xooit.com

    Joined: 01 Jan 1970
    Posts: 1,206
    Point(s): -8,541
    Moyenne: -7.08
    Mac Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin Vierge (24aoû-22sep) 馬 Cheval

    PostPosted: Fri 29 Jun 2007 - 12:24    Post subject: Redimensionner automatiquement les images, version 2 Reply with quote

    Juste après <body bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
    _______________________
    Jeapper - Propriétaire de Xooit.com
    Nous ne fournissons aucune assistance par messages privés ou courriel.


    Last edited by JEAPPER on Wed 4 Jul 2007 - 23:23; edited 2 times in total
    Forum
    Author Message
    Troll


    Offline
    Guest




    PostPosted: Wed 4 Jul 2007 - 13:56    Post subject: Redimensionner automatiquement les images, version 2 Reply with quote

    En tout cas chez moi ça ne fonctionne pas Smile

    Exemple de page avec image de plus de 530 px non réduite :
    http://forum.pcinfo-web.com/t1340-Tutoriel-Utiliser-l-administration-de-votre-Livebo


    Author Message
    themalin
    Membre


    Offline
    Membre

    Joined: 19 Apr 2006
    Posts: 8,897
    Point(s): 9,101
    Moyenne: 1.02
    Mac Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...)

    PostPosted: Wed 4 Jul 2007 - 18:26    Post subject: Redimensionner automatiquement les images, version 2 Reply with quote

    bonjour
    tu as plusieurs script dans ton overall header
    le problème peut venir de là
    _______________________


    Forum
    Author Message
    Troll


    Offline
    Guest




    PostPosted: Wed 4 Jul 2007 - 20:02    Post subject: Redimensionner automatiquement les images, version 2 Reply with quote

    themalin wrote:
    bonjour
    tu as plusieurs script dans ton overall header
    le problème peut venir de là


    Oui mais les autres scripts sont utiles également Smile
    Je vais essayer de les déplacer pour voir Smile

    edit : même en virant les autres scripts du header, aucun résultat Smile

    Pourtant j'utilise un thème classique : subsilver Smile


    edit : Voici le code fonctionnel >>

    Code: Sélectionner - Agrandir


    <script type="text/javascript">

         /* Modifiez 530 ici par la largeur maximum que vous voulez
          */
         MAX_IMG_WIDTH = 500;

         function resizedImgClick(event) {
          event = (event || window.event);
          var img = Event.element(event);

          // L'image est dans un lien, on laisse le lien s'ouvrir
          if (img.up('a')) return;

          // L'image taille réelle est actuellement affichée, on la ferme
          if (fullImg = $('img.resizedImgFull[src="'+img.src+'"]')[0]) {
           fullImg.parentNode.removeChild(fullImg);
           Event.stop(event);
           return false;
          }

          // On peut afficher l'image taille réelle. Avant, on ferme toutes les images taille réelle
          $('img.resizedImgFull').each(function(elem) {
           elem.parentNode.removeChild(elem);
          });

          // On affiche l'image taille réelle
          var elem = $cE('img');
          elem.src=img.src;
          elem.setStyle({
           position:'absolute',top:document.body.scrollTop,left:document.body.scrollLeft,cursor:'pointer'
          });
          elem.addClassName('resizedImgFull');
          elem.onclick=resizedImgClose;
          document.body.appendChild(elem);
          Event.stop(event);
          return false;
         }
         function resizedImgClose(event) {
          event = (event || window.event);
          var img = Event.element(event);
          img.parentNode.removeChild(img);
          Event.stop(event);
          return false;
         }
         function imgsize(maxwidth) {
          $('.postbody img').each(function(img) {
           if (img.width <= maxwidth) return;
           img.width=maxwidth;
           img.style['cursor']='pointer';
           img.onclick=resizedImgClick;
          });
         }
         Event.observe(window,'load',function(){imgsize(MAX_IMG_WIDTH);});

    </script>



    Author Message
    altair


    Offline
    Guest




    PostPosted: Fri 6 Jul 2007 - 20:25    Post subject: Redimensionner automatiquement les images, version 2 Reply with quote

    Bonsoir à tous


    après avoir tester les deux premiers codes mais sans succès avec le thème ca_aphrodite (ça marche bien avec d'autre thèmes)
    j'ai donc recherché un autre code alternatif que j'espère être compatible avec la plupart des thèmes

    (le mieux serait de l'appliquer sur le thème de test tout d'abord)

    • Titre: Redimensionnement automatique des images
    • Version: 3

    • Auteur: altair
    • Contact Auteur: Messagerie privé
    • Source: réadapter à partir du mod "SMR_mod_v1.1.0"

    • Description: méthode alternative pour le redimensionnement automatique des images, et affichage en taille réelle (sur une nouvelle fenêtre) en cliquant sur l'image
    • Niveau d'installation: Facile
    • Temps d'installation: 5 min
    • Nombre de template(s) à modifier : 2

    • Fonctionne sur les thèmes : la plupart
    • Test(s) effectué(s) sur :Xooit, Phpbb,

    • Défaut(s) : à éviter si vous avez déjà modifié la ligne <!-- BEGIN img --> ... <!-- END img --> dans bbcode.tpl
    • Exemple(s) : http://salon-du-maroc.xooit.com


      Installation :

      Sauvegardez vos templates, images avant toutes modifications



    Ouvrez overall_header.tpl

    Ajoutez avant </head>

    Code: Sélectionner - Agrandir
    <script type="text/javascript">

    SMR_confMaxDim = 600; // pixels

    function SMR_resize(obj) {

       thisWidth = obj.width;
       thisHeight = obj.height;
       
       if(thisWidth > thisHeight) thisMaxDim = thisWidth;
       else thisMaxDim = thisHeight;
       
       if(thisMaxDim > SMR_confMaxDim) {
          thisMinDim = Math.round((((thisWidth > thisHeight)?thisHeight:thisWidth) * SMR_confMaxDim) / thisMaxDim);
         
          if(thisWidth > thisHeight) {
             thisWidth = SMR_confMaxDim;
             thisHeight = thisMinDim;
          } else {
             thisHeight = SMR_confMaxDim;
             thisWidth = thisMinDim;
          }
       } // if(thisMaxDim > SMR_confMaxDim)

       obj.height = thisHeight;
       obj.width = thisWidth;
    }
    function SMR_setLink(obj) {
       thisInnerHtml = obj.innerHTML;
       tmpArray = thisInnerHtml.split(' src=\"');
       tmpArray = tmpArray[1].split('"');
       obj.href = tmpArray[0];
    }

    </script>


    vous pouvez changer la valeur 600 dans : SMR_confMaxDim = 600; // pixels

      Sauvegardez et fermez


    Ouvrez bbcode.tpl

    Cherchez
    Code: Sélectionner - Agrandir
    <!-- BEGIN img --><img src="{URL}" border="0" alt="" /><!-- END img -->


    remplacez par
    Code: Sélectionner - Agrandir
    <!-- BEGIN img --><img src="{URL}" border="0" onLoad="SMR_resize(this);"  /><!-- END img -->


    si vous voulez que le lien associé à l'image ainsi que la taille réelle de l'image s'ouvrent en parallèle, vous devrez remplacer par ce code :
    Code: Sélectionner - Agrandir
    <!-- BEGIN img --><img src="{URL}" border="0" onLoad="SMR_resize(this);" onclick="javascript:window.open('{URL}')" /><!-- END img -->


      Sauvegardez et fermez



    Fin du tuto


    Last edited by altair on Sat 7 Jul 2007 - 00:44; edited 2 times in total
    Author Message
    Troll


    Offline
    Guest




    PostPosted: Fri 6 Jul 2007 - 20:39    Post subject: Redimensionner automatiquement les images, version 2 Reply with quote

    altair wrote:
    Bonsoir à tous


    après avoir tester les deux premiers codes mais sans succès avec le thème ca_aphrodite (ça marche bien avec d'autre thèmes)
    j'ai donc recherché un autre code alternatif que j'espère être compatible avec la plupart des thèmes

    (le mieux serait de l'appliquer sur le thème de test tout d'abord)

    {{{Autre méthode}}}

    Chez moi cela fonctionne uniquement pour les images qui ne sont pas inclues dans un lien Smile
    Car quand elle sont inclues dans un lien, si on clique ca ouvre la fenêtre... pour voir l'image, et donc ca n'ouvre pas le lien que ca devrait ouvrir Smile


    Author Message
    altair


    Offline
    Guest




    PostPosted: Fri 6 Jul 2007 - 21:00    Post subject: Redimensionner automatiquement les images, version 2 Reply with quote

    @ Troll, effectivement cela ne marche pas avec les images associées à un lien, donc j'essaierais de voir si y'a un autre code plus correct pour remplacé celui affiché avant
    sinon il faudra voir ce qui doit être adapté sur le premier code xooit pour fonctionner sur les autres thèmes


    Author Message
    Troll


    Offline
    Guest




    PostPosted: Fri 6 Jul 2007 - 21:02    Post subject: Redimensionner automatiquement les images, version 2 Reply with quote

    altair wrote:
    @ Troll, effectivement cela ne marche pas avec les images associées à un lien, donc j'essaierais de voir si y'a un autre code plus correct pour remplacé celui affiché avant
    sinon il faudra voir ce qui doit être adapté sur le premier code xooit pour fonctionner sur les autres thèmes

    Qu'est-ce qui ne marchait pas avec ton thème ? Elles étaient réduites mais pas de pop-up ?


    Author Message
    altair


    Offline
    Guest




    PostPosted: Fri 6 Jul 2007 - 22:29    Post subject: Redimensionner automatiquement les images, version 2 Reply with quote

    @ Troll, non en fait les images ne se réduisaient pas, donc incompatibilité avec le thème
    j'ai donc essayé avec un autre code, et après correction cela marche assez bien
    maintenant en cliquant sur une image avec un lien, cela ouvre donc le lien dans une nouvelle fenêtre

    • Titre: Redimensionnement automatique des images
    • Version: 4

    • Auteur: altair
    • Contact Auteur: Messagerie privé
    • Source: réadapter à partir du mod "rmw_mod_2.4.5"

    • Description: méthode alternative pour le redimensionnement automatique des images, et affichage en taille réelle (sur une nouvelle fenêtre) en cliquant sur l'image
    • Niveau d'installation: Facile
    • Temps d'installation: 5 min
    • Nombre de template(s) à modifier : 2

    • Fonctionne sur les thèmes : la plupart
    • Test(s) effectué(s) sur :Xooit, Phpbb,

    • Défaut(s) : aucun pour l'instant
    • Exemple(s) : http://salon-du-maroc.xooit.com





      Ouvrez overall_header.tpl

      Ajoutez avant </head>

      Code: Sélectionner - Agrandir


      <!-- start mod : Resize Posted Images Based on Max Width -->
      <script type="text/javascript">
      //<![CDATA[
      <!--

      var rmw_max_width = 600; // you can change this number, this is the max width in pixels for posted images
      var rmw_border_1 = '1px solid {T_BODY_LINK}';
      var rmw_border_2 = '2px dotted {T_BODY_LINK}';
      var rmw_image_title = '{L_RMW_IMAGE_TITLE}';

      //-->
      //]]>
      </script>
      <script type="text/javascript" src="{U_RMW_JSLIB}"></script>
      <!-- fin mod : Resize Posted Images Based on Max Width -->



      vous pouvez changer la valeur 600 dans "var rmw_max_width = 600" c'est la largeur maximale des images en pixel

      Ajoutez également avant </head>

      Code: Sélectionner - Agrandir


      <script type="text/javascript">

      function rmw_go()
      {
       var rmw_img_array = document.getElementsByTagName("IMG");
       for (var i = 0; i < rmw_img_array.length; i++)
       {
        var rmw_img = rmw_img_array[i];
        if (String(rmw_img.getAttribute('resizemod')) == 'on')
        {
         if (rmw_wait_for_width && rmw_img.width && !isNaN(rmw_img.width))
         {
          if (rmw_img.width > Number(rmw_max_width))
          {
           rmw_img.setAttribute('resizemod','off');
           rmw_img.onload = null;
           rmw_img.removeAttribute('onload');
           var rmw_clone = rmw_img.cloneNode(false);
           var rmw_parent = rmw_img.parentNode;
           rmw_clone.setAttribute('width',String(rmw_max_width));
           rmw_parent.replaceChild(rmw_clone,rmw_img);
           rmw_make_pop(rmw_clone);
          }
         }
         else if (!rmw_wait_for_width)
         {
          rmw_img.setAttribute('resizemod','off');
          var rmw_clone = rmw_img.cloneNode(false);
          rmw_img.onload = null;
          rmw_img.removeAttribute('onload');
          var rmw_parent = rmw_img.parentNode;
          var rmw_ind = rmw_count++;
          rmw_clone.setAttribute('resizemod',String(rmw_ind));
          rmw_preload[rmw_ind] = new Image();
          rmw_preload[rmw_ind].src = rmw_img.src;
          if (window.showModelessDialog)
          {
           rmw_clone.style.margin = '2px';
          }
          rmw_clone.style.border = rmw_border_1;
          rmw_clone.style.width = '100px';
          rmw_parent.replaceChild(rmw_clone,rmw_img);
         }
        }
       }
       if (!rmw_over && document.getElementById('resizemod'))
       {
        rmw_over = true;
        rmw_go();
       }
       else if (!rmw_over)
       {
        window.setTimeout('rmw_go()',2000);
       }
      }
      function rmw_img_loaded(rmw_obj)
      {
       if (!document.getElementsByTagName || !document.createElement) {return;}
       var rmw_att = String(rmw_obj.getAttribute('resizemod'));
       var rmw_real_width = false;
       if ((rmw_att != 'on') && (rmw_att != 'off'))
       {
        var rmw_index = Number(rmw_att);
        if (rmw_preload[rmw_index].width)
        {
         rmw_real_width = rmw_preload[rmw_index].width;
        }
       }
       else
       {
        rmw_obj.setAttribute('resizemod','off');
        if (rmw_obj.width)
        {
         rmw_real_width = rmw_obj.width;
        }
       }
       if (!rmw_real_width || isNaN(rmw_real_width) || (rmw_real_width <= 0))
       {
        var rmw_rand1 = String(rmw_count++);
        eval("rmw_retry" + rmw_rand1 + " = rmw_obj;");
        eval("window.setTimeout('rmw_img_loaded(rmw_retry" + rmw_rand1 + ")',2000);");
        return;
       }
       if (rmw_real_width > Number(rmw_max_width))
       {
        if (window.showModelessDialog)
        {
         rmw_obj.style.margin = '2px';
        }
        rmw_make_pop(rmw_obj);
       }
       else if (!rmw_wait_for_width)
       {
        rmw_obj.style.width = String(rmw_real_width) + 'px';
        rmw_obj.style.border = '0';
        if (window.showModelessDialog)
        {
         rmw_obj.style.margin = '0px';
        }
       }
       if (window.ActiveXObject) // IE on Mac and Windows
       {
        window.clearTimeout(rmw_timer1);
        rmw_timer1 = window.setTimeout('rmw_refresh_tables()',10000);
       }
      }
      function rmw_refresh_tables()
      {
       var rmw_tables = document.getElementsByTagName("TABLE");
       for (var j = 0; j < rmw_tables.length; j++)
       {
        rmw_tables[j].refresh();
       }
      }
      function rmw_make_pop(rmw_ref)
      {
       rmw_ref.style.border = rmw_border_2;
       rmw_ref.style.width = String(rmw_max_width) + 'px';
       if (!window.opera)
       {
        rmw_ref.onclick = function()
        {
         if (!rmw_pop.closed)
         {
          rmw_pop.close();
         }
         rmw_pop = window.open('about:blank','christianfecteaudotcom',rmw_pop_features);
         rmw_pop.resizeTo(window.screen.availWidth,window.screen.availHeight);
         rmw_pop.moveTo(0,0);
         rmw_pop.focus();
         rmw_pop.location.href = this.src;
        }
       }
       else
       {
        var rmw_rand2 = String(rmw_count++);
        eval("rmw_pop" + rmw_rand2 + " = new Function(\"rmw_pop = window.open('" + rmw_ref.src + "','christianfecteaudotcom','" + rmw_pop_features + "'); if (rmw_pop) {rmw_pop.focus();}\")");
        eval("rmw_ref.onclick = rmw_pop" + rmw_rand2 + ";");
       }
       document.all ? rmw_ref.style.cursor = 'hand' : rmw_ref.style.cursor = 'pointer';
       rmw_ref.title = rmw_image_title;
       if (window.showModelessDialog)
       {
        rmw_ref.style.margin = '0px';
       }
      }
      if (document.getElementsByTagName && document.createElement) // W3C DOM browsers
      {
       rmw_preload = new Array();
       if (window.GeckoActiveXObject || window.showModelessDialog) // Firefox, NN7.1+, and IE5+ for Win
       {
        rmw_wait_for_width = false;
       }
       else
       {
        rmw_wait_for_width = true;
       }
       rmw_pop_features = 'top=0,left=0,width=' + String(window.screen.width-80) + ',height=' + String(window.screen.height-190) + ',scrollbars=1,resizable=1';
       rmw_over = false;
       rmw_count = 1;
       rmw_timer1 = null;
       if (!window.opera)
       {
        rmw_pop = new Object();
        rmw_pop.closed = true;
        rmw_old_onunload = window.onunload;
        window.onunload = function()
        {
         if (rmw_old_onunload)
         {
          rmw_old_onunload();
          rmw_old_onunload = null;
         }
         if (!rmw_pop.closed)
         {
          rmw_pop.close();
         }
        }
       }
       window.setTimeout('rmw_go()',2000);
      }

      </script>



        Sauvegardez et fermez


      Ouvrez BBCode.tpl

      Cherchez la ligne
      Code: Sélectionner - Agrandir


      <!-- BEGIN img --><img src="{URL}" border="0" alt="" /><!-- END img -->



      Juste après
      Code: Sélectionner - Agrandir


      <!-- BEGIN img --><img



      Ajoutez sur la même ligne
      Code: Sélectionner - Agrandir


      resizemod="on" onload="rmw_img_loaded(this)"



        Sauvegardez et fermez



      Fin du tuto


      Last edited by altair on Mon 17 Sep 2007 - 12:01; edited 8 times in total
      Author Message
      Troll


      Offline
      Guest




      PostPosted: Fri 6 Jul 2007 - 22:35    Post subject: Redimensionner automatiquement les images, version 2 Reply with quote

      Intéressant comme méthode alternative, mais cela ouvre deux fenêtres quand l'utilisateur clique sur une petite image qui fait lien par exemple, il faudrait mettre la condition de l'image cliquable ( où clic ==> ouverture d'une fenêtre avec l'image) seulement quand elle dépasse la taille Smile
      Et ensuite ne pas crée de lien si on détecte qu'il y en a déjà un Smile

      Parce-que je ne sais pas sur ton thème mais ça crée un lien sur toutes les images moi, donc y compris les petites...


      (je veux pas paraître raba-joie ni critique hein Wink Je donne des idées =) )


      Author Message
      altair


      Offline
      Guest




      PostPosted: Fri 6 Jul 2007 - 23:13    Post subject: Redimensionner automatiquement les images, version 2 Reply with quote

      donc après rectification et test...
      la quatrième méthode rempli enfin les 3 cas de figure suivants :
      - si l'image est de petite taille, rien ne se passe
      - si l'image dépasse la taille prédéfinie, elle est réduite et devient cliquable, et peut s'ouvrir en taille réelle
      - si l'image contient un lien et de grande taille, elle est réduite et c'est le lien associé qui s'ouvre en plus de l'image en taille réelle

      (méthode vérifié sur les thèmes incompatibles avec les autres méthodes)


      Author Message
      Troll


      Offline
      Guest




      PostPosted: Sun 8 Jul 2007 - 19:51    Post subject: Redimensionner automatiquement les images, version 2 Reply with quote

      altair wrote:
      donc après rectification et test...
      la quatrième méthode rempli enfin les 3 cas de figure suivants :
      - si l'image est de petite taille, rien ne se passe
      - si l'image dépasse la taille prédéfinie, elle est réduite et devient cliquable, et peut s'ouvrir en taille réelle
      - si l'image contient un lien et de grande taille, elle est réduite et c'est le lien associé qui s'ouvre en plus de l'image en taille réelle

      (méthode vérifié sur les thèmes incompatibles avec les autres méthodes)


      Super boulot altair Wink

      Du côté ds navigateurs j'ai fait des tests, compatibilité assurée avec :

      Firefox 2
      Opéra 9
      IE 6 (7 j'ai pas testé, altair ?)
      Avant Browser

      Ps : Cette méthode mériterait d'être ajoutée comme "méthode alternative en cas d'incimpatibilité" dans le premier post Wink


      Author Message
      Contenu Sponsorisé





      PostPosted: Today at 00:29    Post subject: Redimensionner automatiquement les images, version 2

      Display posts from previous:   
      Reply to topic Page 1 of 17 Goto page: 1, 2, 315, 16, 17  >




      Portal | Index | Administration Panel | Create a forum | Free support forum | Free forums directory | Report a violation | Conditions générales d'utilisation
      Propulsé par p h p B B © 2016 p h p B B Group |
       
      © 2003-2013 Xooit.com - Contact - Mentions légales - CGU - Charte - CNIL : 1381401