developer.jelix.org is not used any more and exists only for history. Post new tickets on the Github account.
developer.jelix.org n'est plus utilisée, et existe uniquement pour son historique. Postez les nouveaux tickets sur le compte github.

Changes between Version 14 and Version 15 of fr/drafts/jimage2


Ignore:
Timestamp:
Oct 5, 2009, 7:31:12 PM (11 years ago)
Author:
Lipki
Comment:

--

Legend:

Unmodified
Added
Removed
Modified
  • fr/drafts/jimage2

    v14 v15  
    11== Proposition pour jImage2 le plugin ==
     2
     3Le plugin jImage actuel utilise un array pour passé les paramètres, on obtient quelque chose comme.
     4
     5{{{
     6{image 'toupie.png', array('width'=>100, 'zoom'=>60, 'alignh'=>'right', 'alignv'=>-20) }
     7}}}
     8
     9Qui peut rapidement devenir lourd et peut lisible dans un .tpl
     10
     11C'est pourquoi je propose l'utilisation d'une syntaxe css like, facile à comprendre et plus légère.
     12{{{
     13{image 'toupie.png', 'width: 100; zoom: 140; align: -20 right;' }
     14}}}
     15
     16ci-dessous une description exhaustive des possibilités de jImage2.
    217
    318
     
    823    border-width     : 2px ;                             // avec ou sans le px
    924    border-color     : #f00 || #ff0000 ;                 // 3 ou 6
    10     border-8share    : url(border.png) 5px ;             // [▲►▼◄] || [▲▼] [►◄] || [▲] [►◄] [▼] || [▲] [►] [▼] [◄]
    11     border           : 5° 2px #f00;                      // ° et px requis ; ordre aléatoire ; n'intègre pas 8share
     25    border-8share    : url(8share_border.png) 5px ;      // avec ou sans le px
     26    border           : 5° 2px #f00;                      // ° et px requis ; ordre aléatoire
    1227       
    13     square           : on ;                              // [on|off] ; force l'interprétation rectangulaire de l'image, pour les fonds transparent, activer par défaut pour le jpg
     28    square           : on ;                              // [on|off] ; force l'interprétation rectangulaire de l'image,
     29                                                         // pour les fonds transparent, activer par défaut pour le jpg
    1430       
    1531    shadow-offset    : 10px ;                            // avec ou sans le px
     
    5470=== Comparaison ===
    5571
     72Voici un comparatif qui montre l'avantage de la syntaxe css.
     73
    5674{{{
    57 
    5875 av : {image 'toupie.png', array('width'=>100) }[[BR]]
    5976 ap : {image 'toupie.png', 'width: 100;' }
     
    7895==== Border ====
    7996
    80 Il est possible d'ajouter une bordure a l'image.
     97Il est possible d'ajouter une bordure a l'image.[[BR]]
     98Une bordure de type 8share est en fait une image divisée en 9, dons 8 morceaux servent à créer une bordure.
    8199
     100exemple :
     101{{{
     102#!html
     103<img src="http://img527.imageshack.us/img527/6435/8share.png"/>
     104}}}
     105
     106
     107 note : si "square" est à "off", la bordure devra suivre la forme de l'image.
    82108 note : l'utilisation de "border-8share" et de "border-radius" force "square" à "on".
    83  note : si "square" est à "off", la bordure devra suivra la forme de l'image.
    84109
    85110 * border-radius : Ajoute des coins arrondi a l'image. [défaut : 5]
     
    87112 * border-color  : Couleur de la bordure. [défaut : #fff]
    88113 * border-8share : url de l'image utilisé pour créer la bordure, cette image est divisé en 8 part. [défaut : ...][[BR]]
    89    Les chiffres représente la taille de la bordure en haut, en bas et sur les coté.
     114   Les chiffres représente la taille de la bordure en haut, en bas et sur les coté.[[BR]]
     115   [[BR]]
     116Ordre des Bords : [▲►▼◄] ou [▲▼] [►◄] ou [▲] [►◄] [▼] ou [▲] [►] [▼] [◄]
     117 * 5px             // haut = 5px, droite = 5px, bas = 5px, gauche = 5px
     118 * 5px 3px         // haut = 5px, droite = 3px, bas = 5px, gauche = 3px
     119 * 5px 3px 2px     // haut = 5px, droite = 3px, bas = 2px, gauche = 3px
     120 * 5px 3px 2px 6px // haut = 5px, droite = 3px, bas = 2px, gauche = 6px
    90121
    91  * border : l'ordre des paramètres n'importe pas, mais il faut penser a mettre les unités. [défaut : 5° 2px #fff][[BR]]
    92    border-8share n'est pas intégrer.
     122Ordre des Coins : [┏ ┓ ┛ ┗] ou [┏ ┛] [┗ ┓] ou [┏] [┗ ┓] [┛] ou [┏] [┓] [┛] [┗]
     123 * 5°              // haut-gauche = 5°, haut-droite = 5°, bas-droite = 5°, bas-gauche = 5°
     124 * 5° 3°           // haut-gauche = 5°, haut-droite = 3°, bas-droite = 5°, bas-gauche = 3°
     125 * 5° 3° 2°        // haut-gauche = 5°, haut-droite = 3°, bas-droite = 2°, bas-gauche = 3°
     126 * 5° 3° 2° 6°     // haut-gauche = 5°, haut-droite = 3°, bas-droite = 2°, bas-gauche = 6°
     127
     128 * border : il faut penser a mettre les unités. [défaut : 5° 2px #fff]
    93129
    94130ex de code :
     
    100136==== Square ====
    101137
    102 Lorsque square est a "on", l'image est traité comme un rectangle plein même si c'est une image png24, avec des zones transparentes.[[BR]]
    103 par défaut square est a "off", mais il est forcé a "on" lorsque l'on utilise :
     138Lorsque square est à "on", l'image est traitée comme un rectangle plein même si c'est une image png24, avec des zones transparentes.[[BR]]
     139par défaut square est à "off", mais il est forcé a "on" lorsque l'on utilise :
    104140 * border-radius
    105141 * border-8share
    106142 * dans le cas d'une image jpg en entrée et/ou en sortie
     143
     144exemple :
     145{{{
     146#!html
     147<img src="http://img340.imageshack.us/img340/5047/square.png"/>
     148}}}
    107149
    108150ex de code :
     
    115157Shadow permet d'appliquer une ombre portée a l'image.
    116158
    117  note : l'utilisation de l'une ou l'autre de c'est attributs force l'ombre a s'afficher, utiliser "shadow: on;" si tous les paramètres reste par défaut.
    118  note : l'image est redimensionner après la pose de l'ombre.
     159note : l'utilisation de l'un de ces attributs force "shadow: on;".[[BR]]
     160note : l'image est redimensionnée après la pose de l'ombre.
    119161
    120162 * shadow-offset : décalage de l'ombre avec l'image [défaut : 10]
     
    125167 * shadow        : Affiche l'ombre [défaut : off]
    126168       
    127  * shadow : l'ordre des paramètres n'importe pas, mais il faut penser a mettre les unités. [défaut : 10px 45° 0.5@ 3 #000 on][[BR]]
     169 * shadow : il faut penser à mettre les unités. [défaut : 10px 45° 0.5@ 3 #000 on]
    128170
    129 ex de code :
     171exemple :
    130172{{{
    131173   {image 'toupie.png', 'shadow: on;' }
     
    135177==== Rotate ====
    136178
     179a suivre