Sujet : Où appeler ma fonction ?

Bonjour,

En premier lieu, je me dois de vous prévenir que je suis un néophyte total en javascript/Jquery (de toute façon, vous le constaterez forcément par vous-même smile )
Alors d'avance, merci de pardonner les incongruités et autres âneries qui pourraient sortir de mes propos et/ou de mes codes !

Voilà, je commence à créer un site (et une première ânerie, une !!!) sur lequel seront listés un certains nombre d'articles, chacun d'eux contenu dans un <div> comme suit :

Code HTML :

    <!-- Article 1 -->
    <div class="ResumeArticle">
        <p class="GroupeDateNatureEvenement">
            <a href="lien.html" title="Lien vers l'article 1">
              <span class="DateEvenement">Date</span>
              <span class="NatureEvenement">Evenement</span>
          </a>
      </p>
        <p class="GroupeDescriptifEvenement">
          <a class="LienDiapoEvenement" href="" title=""><img class="ImgDiapoEvenement" src="images.jpg alt="" /></a>
            <span class="DescriptifEvenement">Descriptif.
            <br>
            <a href="" class="TexteSuiteEvenement">[...] -> Lire la suite</a>
        </p>
    </div>
    <!-- Article 2 -->
    <div class="ResumeArticle">
        <p class="GroupeDateNatureEvenement">
            <a href="lien.html" title="Lien vers l'article 2">
              <span class="DateEvenement">Date</span>
              <span class="NatureEvenement">Evenement</span>
          </a>
      </p>
        <p class="GroupeDescriptifEvenement">
          <a class="LienDiapoEvenement" href="" title=""><img class="ImgDiapoEvenement" src="images.jpg alt="" /></a>
            <span class="DescriptifEvenement">Descriptif.
            <br>
            <a href="" class="TexteSuiteEvenement">[...] -> Lire la suite</a>
        </p>
    </div>
    <!-- Article 3 -->
    <div class="ResumeArticle">
        ...
    </div>

La balise <img> de classe "ImgDiapoEvenement" ainsi mise en forme :
Code CSS :

#Articles .ResumeArticle .ImgDiapoEvenement{
    display:block;
    float:left;
    margin-right:16px;
    margin-bottom:16px;
    padding:0;
    border:3px solid #866b29;
}

Je voudrais redimensionner l'image,quelle que soit sa taille d'origine, au moment de son affichage et j'ai écrit cette fonction :
Code Jquery :

(function($){
    $.fn.RedimensionneImageMiniature=function(){;
        var Largeur=this.width();
        var Hauteur=this.height();
        var Ratio=Math.min(132/Largeur,132/Hauteur);
        Largeur=Largeur*Ratio;
        Hauteur=Hauteur*Ratio;
        if (Largeur!=this.width() || Hauteur!=this.height()){
            this.css('width',Largeur);
            this.css('height',Hauteur);
        };
    };
})(jQuery);

Le problème est que je ne sais pas où appeler cette fonction dans le code HTML (ou ailleurs ?).
Peut-être n'est-ce pas la bonne méthode pour arriver à mes fins...

Si quelqu'un pouvait m'aiguiller...

Merci d'avance.

Re : Où appeler ma fonction ?

Bienvenue sur le forum.

Tu as fait des corrections sur ton plugin entre hier soir et ce matin ? (juste pour savoir si j'avais vraiment le cerveau fatigué ou pas, parce qu'hier il ne pouvait pas fonctionner et ce matin je trouve le code beaucoup plus propre).

Bon en gros si je comprend bien ce que tu veux faire, c'est redimensionner tes images en gardant les proportions pourque le coté le plus grand de l'image fasse 132px maximum c'est bien ça ?

Alors, pour t'aiguiller sur ta question initiale, pour ton plugin jQuery, pour l'appeler c'est assez simple, il faut faire 2 choses: le premiere c'est de rajotuer un each, afin que tu puisse lui passer plusieurs éléments et qu'il agisse sur tous:

(function($){
    $.fn.RedimensionneImageMiniature=function(){
        var Largeur, Hauteur, Ratio;
        this.each(function() {
            Largeur=$(this).width();
            Hauteur=$(this).height();
            Ratio=Math.min(132/Largeur,132/Hauteur);
            Largeur=Largeur*Ratio;
            Hauteur=Hauteur*Ratio;
            if (Largeur!=$(this).width() || Hauteur!=$(this).height()){
                $(this).css('width',Largeur);
                $(this).css('height',Hauteur);
            };
        });
    };
})(jQuery);

Ensuite pour l'appeler, il faut que tu mettes à la suite de ton code html la ligne suivante:

$("#Articles .ResumeArticle .ImgDiapoEvenement").RedimensionneImageMiniature();

Voila pour la partie javascript, en revanche tu as beaucoup plus simple à ta disposition: le CSS
il suffit de rajouter les propriétés suivantes dans le code css attribué a tes images:

max-height:132px;
max-width:132px;

J'espere que tu y vois un peu plus clair smile


PS: je déplace ton message dans la section plugin

3

Re : Où appeler ma fonction ?

Merci pour ton accueil et ta réponse...

MaitreKabba a écrit:

Tu as fait des corrections sur ton plugin entre hier soir et ce matin ? ....

Non, je n'ai fait aucune modif...

MaitreKabba a écrit:

Bon en gros si je comprend bien [...], c'est redimensionner tes images en gardant les proportions [...] ?

YEEESSSS !!! Ca me rassure, malgré ma totale inexpérience, mon code était suffisamment explicite wink

MaitreKabba a écrit:

en revanche tu as beaucoup plus simple à ta disposition [...]

Sniff ! Qu'il est tjs dûr de s'entendre dire que l'on peut faire plus simple que le code compliqué que l'on a mis des heures à pondre smile smile

Je te remercie encore pour tes explications et tes conseils. Je teste tout ça et te tiendrai au courant...
Cordialement.

Re : Où appeler ma fonction ?

boddhi a écrit:

Sniff ! Qu'il est tjs dûr de s'entendre dire que l'on peut faire plus simple que le code compliqué que l'on a mis des heures à pondre smile smile

Malheureusement ça arrive souvent en début de parcours, on est tous passés par là:

La plupart des Développeurs a écrit:


- Yes ! mon plugin est enfin pret ! pfiouuuuu 2500 lignes mais ça cartonne le rendu est super !
- Ouais mais t'as la fonction xxxxxx() qui fait pareil nativement et ça tient sur une ligne
- ...
- ...
- Bon tu me lache les baskets je dois aller me pendre

Mais tu verras, l'expérience... smile

Hésite pas si tu as d'autres questions

5

Re : Où appeler ma fonction ?

@MaitreKabba

Je te réponds avec un peu de retard car je n'ai pas eu trop le temps, ces jours-ci, de travailler sur mon projet.

je confirme, les propriétés max-height et max-width correspondent totalement à mon attente bien que je n'ai pas encore tout à fait compris comment CSS sait appliquer le bon ratio tout seul....

MaitreKabba/La plupart des Développeurs a écrit:

Yes ! mon plugin est enfin pret ! pfiouuuuu 2500 lignes mais ça cartonne le rendu est super !
[...]

big_smile big_smile C'est si vrai hélas !!!

MaitreKabba/La plupart des Développeurs a écrit:

Hésite pas si tu as d'autres questions

C'est proposé si gentiment que je ne saurais refuser une telle invitation... smile Mais tu ne sais pas à quoi tu t'exposes 3:-)

Dans un bout de code HMTL, créé via PHP, j'ai des <DIV> qui contiennent des liens avec images de tailles différentes (d'où la précédente question sur le redimmensionnement) sur la partie gauche (avec float:left;) et des <P> 'margés' sur la partie droite. Je souhaite repositionner les <IMG> afin de les centrer sur la partie gauche.
En passant par jQuery, est-il possible de le faire après le chargement de chaque image et avant l'exécution du reste du code HTML  ou est-il préférable, d'un point de vue technique ou rapidité d'exécution, d'attendre que l'ensemble de la page HTML soit chargée sachant que le repositionnement pourrait être perçu visuellement par l'utilisateur ?

Merci par avance.
Cdlt.

Re : Où appeler ma fonction ?

boddhi a écrit:

je n'ai pas encore tout à fait compris comment CSS sait appliquer le bon ratio tout seul....

Tout simplement parce que les max-* se basent sur le coté le plus grand, donc si ton image fait 1320x640, alors il va réduire l'image (en gardant les proportions) jusqu'à ce que les deux coté soient inférieur ou égaux à la valeur que tu as spécifié, donc il va réduire le 1320 en 132 (ce qui impliquera que le coté 640 deviendra 64, puisque les proportions sont conservées), ensuite, vu que le petit coté est inférieur à 132, il ne lui appliquera rien.

Donc pour faire simple il conserve les proportions parce qu'il n'applique une dimension que sur le coté le plus grand, puis réduit l'autre en fonction de la réduction du grand coté (c'est comme si par exemple tu utilise l'attribut width dans ta balise <img> sans utiliser l'attribut height, l'image gardera ses proportions) smile

Pour ce qui est de ton autre problème, je vais m'en occuper, mais pourrais-tu créer un nouveau sujet pour celui-ci afin que les sujets soient bien différenciés smile