Image1.0<div><a><span></span><span></span></a></div>

<images_selector default='[]' facultative='true' help='Cette propriété vous permet de préciser la ou les photos qui seront affichées en plein-écran. Si vous ne sélectionnez aucune photo et que vous avez cochez la case 'Plein écran au clic', l'image du module Image sera affichée en plein écran.' icon='screen' name='tb_imgs' value='Images en plein-écran' /><link_selector default='null' help='Insère un lien vers un site externe, un document ou une page, ou supprime le lien actuel.' icon='t_link' name='link' /><textarea facultative='true' feature='image_menu_mouseover' height='20' help='Entrez ici le nom d'un menu déroulant qui sera affiché au survol de l'image.<br>Le nom du menu déroulant doit aussi être spécifié dans les propriétés du menu que vous voulez afficher.' icon='menu' name='mouseoverMenu' text='Menu au survol' /></properties><design_properties><trigger help='Adapte la taille du module à la taille réelle de l'image.' icon='arrow_tb' text='Taille réelle' trigger='realsize' /><radio class='filterRadio' default=''none'' display='Aucun|Noir et Blanc|Flou|Inverser|Contraste|Couleur ou dégradé' help='Sélectionne le filtre pour l'image.<br> <b>Aucun</b> pas de filtre<br> <b>Noir et blanc</b> supprime toutes les couleurs<br> <b>Flou</b> rend l'image floue<br> <b>Inverse</b> inverse toutes les couleurs<br> <b>Contraste</b> plus de différence de luminosité<br> <b>Couleur ou dégradé</b> ajoute un filtre avec couleurs et transparence' name='filter' title='Filtre' values='none|grayscale|blur|invert|contrast|color' /><gradient default='['vertical', [['0%', 'rgba(0,0,0,0.5)'], ['100%', 'rgba(0,0,0,0.5)']], 0, false]' name='gradient_colors' /><bloc class='uii_mask_properties -transparent'><checkbox class='uii_active_mask' default='false' help='En cochant cette option, vous pourrez découper le contour de l'image suivant une forme choisie (cercle, triangle...).' name='activate_mask' value='Découper suivant une forme' /><icon_selector class='uii_chose_mask' default='{"id":594,"name":"brightness_1","service":"Google-material-icons","removable":false}' default_action='true' icon='folder' name='mask' search_options='{"search_by":"shapes"}' value='Choisir la forme' /></bloc><bloc class='uii_radius_properties -transparent'><checkbox class='uii_radius_toggle' default='false' name='radius_toggle' value='Arrondi' /><radius class='uii_radius' default='[50, 50, 50, 50]' maximum='500' minimum='0' name='radius' /></bloc></design_properties></view><script>UI_List.UI_Image={initialize:function(t){this.component=t
;t.setOptions(["locked","container","fixed","footer","sticky","scroll_animated"])
;this.protect_available="editor"==v.mode||v.features.image_protection
;this.mouseover_available="editor"==v.mode||v.features.image_mouseover
},updateImage:function(){this.component.componentBody.unbind()
;var t=this,e={h:this.component.H(),w:this.component.W()
},o=function(o,i){var n=$("<span>").css({position:"absolute",
top:"-1000px"}).appendTo("body")
;n.setIcon(t.component.data.mask,!1,function(){
setTimeout(function(){
var a=cdn_url(bestImgSrc(i,t.component.W(),t.component.H())),s=function(){
n.children().css({"font-size":"100px"});var i={w:n.width(),
h:n.height()};i.h/i.w
;var s=document.createElementNS("http://www.w3.org/2000/svg","text")
;o.empty().addClass("uii_mask_node")
;var r=Math.min(e.h/i.h*100,e.w/i.w*100)
;s.setAttributeNS(null,"x",(e.w-r*i.w/100)/2);var c=r*i.h/100
;s.setAttributeNS(null,"y",(e.h-c)/2+c/("Symbola"!=t.component.data.mask.service?1:1.3))
;s=$.fn.setIcon(t.component.data.mask,$(s),function(){
var i='<pattern class="uii_pattern" id="'+(o==t.img2?"hover_":"")+"pattern_mask_"+t.component.uniqId()+'" patternUnits="userSpaceOnUse" width="'+e.w+'" height="'+e.h+'" viewbox="0 0 '+e.w+" "+e.h+'"><image xlink:href="'+a+'" width="'+e.w+'" height="'+e.h+'" preserveAspectRatio="xMidYMid '+("cover"==t.component.data.ratio_type?"slice":"meet")+'" /></pattern>'
;$(".pattern_mask",t.component.componentBody).remove()
;o.html("<svg class='svg_defs'><defs>"+i+"</defs></svg>").append($('<svg class="content_svg" width="'+e.w+'" height="'+e.h+'"></svg>'))
;$(".content_svg",o)[0].appendChild(s);$(s).css({
fill:"url(#"+(o==t.img2?"hover_":"")+"pattern_mask_"+t.component.uniqId()+")",
"font-size":r+"px"});setTimeout(function(){n.remove()},2e3)})}
;$.fn.loadImage(a).done(function(){s();t._setFilter()
}).fail(function(){if(/ra0\.cdnsw\.com\/cc0/.test(a)){
a=a.replace("ra0.cdnsw.com/cc0","www.sitew.com/file/pixabay")
;s()}})},100)})}
;if(this.component.data.activate_mask&&this.component.data.mask){
$(".uii_pattern",this.component.componentBody).remove()
;o(this.img1,t.component.data.imageFile)}else{
this.img1.removeClass()
;if(!this.component.preloaded||this._protected()||"fullwidth"==this.component.data.ratio_type){
this.img1.empty().append(t._setImageDefault(this.component.data.imageFile,this.component))
;this._protected()&&this._antiDownload(this.img1)}
this.mouseover_available&&this.component.data.mouseoverMenu&&""!=this.component.data.mouseoverMenu&&this.component.componentBody.mouseover(function(){
window.UI_Menu&&UI_Menu.showDropDownMenu(t.component.data.mouseoverMenu)
});this._setFullWidth();this._setParallax()}
if(this.mouseover_available&&this.component.data.mouseoverImage){
this.component.data.activate_mask&&this.component.data.mask?o(this.img2,this.component.data.mouseoverImage):this.img2.empty().append(t._setImageDefault(this.component.data.mouseoverImage,this.component))
;this.component.componentBody.hover(function(){t.img2.show()</article></body></html>

Prisca Graphiste

Story Board