wiki:fr/drafts/jimage2
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.

Version 11 (modified by Lipki, 12 years ago) (diff)

--

Proposition pour jImage2 le plugin

{image 'data/fichiers/toupie.png', '

    border-radius    : 5° ;                              // avec ou sans le °
    border-width     : 2px ;                             // avec ou sans le px
    border-color     : #f00 || #ff0000 ;                 // 3 ou 6
    border-8share    : url(border.png) 5px ;             // [▲►▼◄] || [▲▼] [►◄] || [▲] [►◄] [▼] || [▲] [►] [▼] [◄]
	
    border           : 5° 2px #f00;                      // ° et px requis ; ordre aléatoire ; n'intègre pas 8share
	
    square           : on ;                              // [on|off] ; force l'interprétation rectangulaire de l'image, pour les fonds transparent, activer par défaut pour le jpg
	
    shadow-offset    : 10px ;                            // avec ou sans le px
    shadow-angle     : 45° ;                             // avec ou sans le ° ; [0-360]
    shadow-alpha     : 0.5@ ;                            // avec ou sans le @ ; [0-1]
    shadow-blur      : 5 ;                               // [1-10]
    shadow-color     : #f00 || #ff0000 ;                 // 3 ou 6
    shadow           : on ;                              // on ou off ; inutile si un autre paramêtre et spécifier
	
    shadow           : 10px 45° 5 #f00 ;                 // ° et px requis ; ordre aléatoire
	
    rotate           : 20° ;                             // avec ou sans le ° ; [0-360]
    zoom             : 50% ;                             // avec ou sans le % ; [0-∞]
	
    link             : url(http://jelix.org) ;
	
    vertical-align   : top   || -20px ;                  // avec ou sans le px ; [top |middle|bottom|:int]
    horizontal-align : right ||  20px ;                  // avec ou sans le px ; [left|center|right |:int]
	
    align            : top 20px ;                        // avec ou sans le px ; vertical horizontal
	
    extension        : jpg ;                             // [png|jpg|gif]
    quality          : 0.8 ;                             // [0-1]
	
    background-color : #f00 || #ff0000 ;                 // 3 ou 6
    background-image : url(border.png) ;

    background       : #f00 url(border.png) ;

    defaut           : url(border.png) || hide ;         // [hide|hidden|url(x)]

    width            : 90px || 20% ;                     // % et px requis ; % de la taille d'origine
    height           : 90px || 20% ;                     // % et px requis ; % de la taille d'origine
    enlarge          : on ;                              // [on|off]
    ratio            : inner ;                           // [inner|outer|inner-cap|outer-cut]

    class            : bob ;                             // n'importe quel attributs html

'}

Comparaison

 av : {image 'toupie.png', array('width'=>100) }[[BR]]
 ap : {image 'toupie.png', 'width: 100;' }

 av : {image 'toupie.png', array('width'=>150, 'height'=>50, 'omo'=>true) }[[BR]]
 ap : {image 'toupie.png', 'width: 150; height: 50; ratio: outer-cut;' }

 av : {image 'toupie.png', array('width'=>100, 'zoom'=>60, 'alignh'=>'right', 'alignv'=>-20) }[[BR]]
 ap : {image 'toupie.png', 'width: 100; zoom: 140; align: -20 right;' }

 av : {image 'toupie.png', array('width'=>100, 'shadow'=>true, 'soffset'=>20, 'sangle'=>0, 'sblur'=>0, 'sopacity'=>100, 'scolor'=>'#ffff00') }[[BR]]
 ap : {image 'toupie.png', 'width: 100; shadow: 20px 0° 0 1@ #ff0;' }

 av : {image 'toupie2.png', array('width'=>100, 'notexists'=>'pastoupie.png') }[[BR]]
 ap : {image 'toupie2.png', 'width: 100; defaut: url(pastoupie.png);' }

Utilisation de :

Border

Il est possible d'ajouter une bordure a l'image.

note : si "square" est à off, la bordure devra suivra la forme de l'image. note : l'utilisation de "border-8share" force "square" à on.

  • border-radius : Ajoute des coins arrondi a l'image.
  • border-width : Épaisseur de la bordure.
  • border-color : Couleur de la bordure.
  • border-8share : url de l'image utilisé pour créer la bordure, cette image est divisé en 8 part.
    Les chiffres représente la taille de la bordure en haut, en bas et sur les coté.
  • border : l'ordre de paramètres n'importe pas, mais il faut penser a mettre les unitées.
    border-8share n'est pas intégrer.

ex de code :

   {image 'toupie2.png', 'border: 5° 3px #fff;' }
   {image 'toupie2.png', 'border-8share: url(border.png) 5px 3px;' }