Forcer la taille de x image contenu dans une class

**mael94420** · 11/06/2009, 09h57

Bonjour,

Je voudrais faire une petit script qui me permette de retailler des images à la volée.

Je m'explique.

A mon plus grand déséspoire, la maquette à été réalisé en tableau. J'ai donc mis une class "contenu" au td dans lequelle se trouve mes x images.

Ensuite, j'ai fait un début de script jQuery qui ressemble à ca :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
$(document).ready(function(){
    $(".contenu > img").css("width", "200px");
});

Il y'a deux problèmes
Le premier c'est que heritage ne fonctionne pas. ce script ne retaille pas les image contenu dans "contenu". Il fonctionne bien quand je fait

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("img").css("width", "200px");

mais ca retaille toutes les images de la page. Normal.

Le deuxieme problème est que je souhaite retailler que les images qui ont une width superieur à 600px
et la, je bloque.

Petite précision, ce sont des images qui sont insérées par des utilisateurs via un wysiwyg. Je n'ai donc pas la main dessus.

Si vous avez une idée de comment résoudre ce problème ca m'aiderais grandement.

Merci d'avance

Maël

**danielhagnoul** · 11/06/2009, 22h37

Bonsoir

Un exemple avec la taille limite fixée à 120 dans le paramètre « valeur » :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <title>Page type</title>
    <link rel="stylesheet" type="text/css" href="../styles/principal.css" media="screen" />
    <style type="text/css">
        div#affiche {
            margin:12px;
            border:1px solid #999999;
        }
    </style>
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(".contenu > img").each(function(i,item){
 
                //debug
                $("#affiche").append("item["+ i + "] = " + item + "<br/>");
 
                var valeur = 120;
                var width = parseInt($(item).css("width"));
                var height = parseInt($(item).css("height"));
                var ratio = width/height;
 
                if (width > valeur) {
                    width = valeur;
                    height = parseInt(width/ratio);
 
                    $(item).css("width", width);
                    $(item).css("height", height);
                }
 
                if (height > valeur) {
                    height = valeur;
                    width = parseInt(height*ratio);
 
                    $(item).css("height", height);
                    $(item).css("width", width);
                }
            });
        });
    </script>
</head>
<body>
    <div id="conteneur">
        <table width="500" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td>&nbsp;</td>
            <td class="contenu"><img src="../images/danielhagnoul.jpg" width="120" height="117" /></td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td class="contenu"><img src="../images/imageTest.png" width="270" height="200" /></td>
          </tr>
          <tr>
            <td class="contenu"><img src="../images/jQuery-alpha-trans.png" width="132" height="132" /></td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
        </table>
        <div id="affiche"></div>
    </div>
</body>
</html>

**mael94420** · 12/06/2009, 06h55

Super pour cette réponse, je ne l'ai pas tester mais il me suffisait finalement de connaitre la fonction each qui s'était perdu dans un coin de ma tete.

Merci beaucoup

Maël

Forcer la taille de x image contenu dans une class

jQuery

Discussions similaires

Partager

Partager