Simple utImage initialization

<div id="image-1" style="width:100%;height:100%;"></div>
$('#image-1').utImage();

Inititialize with image

<div id="image-2" style="width:100%;height:100%;"></div>
$('#image-2').utImage({data:"http://assets.urturn.com/medias/image/752d3b05-8e8c-4932-8831-3ed4d2edee1e/default_tumblr_lzpw5md5mf1rphuqgo1_500.png?1374681615"});

Work in group mode


<div id="image-3" style="width:50%;height:100%;"></div>
<div id="image-4" style="width:50%;height:100%;"></div>
    

$('#image-3').utImage({styles:{groupMode:true,autoResize:false}}).utImage("focus");
$('#image-4').utImage({styles:{groupMode:true,autoResize:false}});
    

Different buttons


<div id="image-5" style="width:50%;height:50%;"></div>
<div id="image-6" style="width:50%;height:50%;"></div>
<div id="image-7" style="width:50%;height:50%;"></div>
<div id="image-8" style="width:50%;height:50%;"></div>
    

$('#image-5').utImage({ui:{add:false}, data:"http://assets.urturn.com/medias/image/752d3b05-8e8c-4932-8831-3ed4d2edee1e/default_tumblr_lzpw5md5mf1rphuqgo1_500.png?1374681615",styles:{autoResize:false}});
$('#image-6').utImage({ui:{edit:false}, data:"http://assets.urturn.com/medias/image/752d3b05-8e8c-4932-8831-3ed4d2edee1e/default_tumblr_lzpw5md5mf1rphuqgo1_500.png?1374681615",styles:{autoResize:false}});
$('#image-7').utImage({ui:{remove:false}, data:"http://assets.urturn.com/medias/image/752d3b05-8e8c-4932-8831-3ed4d2edee1e/default_tumblr_lzpw5md5mf1rphuqgo1_500.png?1374681615",styles:{autoResize:false}});
$('#image-8').utImage({ui:{edit:false,remove:false}, data:"http://assets.urturn.com/medias/image/752d3b05-8e8c-4932-8831-3ed4d2edee1e/default_tumblr_lzpw5md5mf1rphuqgo1_500.png?1374681615",styles:{autoResize:false}});
    

Max and min image height


<div id="image-9" style="width:100%;height:100%;"></div>
    
$('#image-9').utImage({styles:{minHeight:100, maxHeight:200}});

Fixed image ratio


<div id="image-10" style="width:100%;height:100%;"></div>
    
$('#image-10').utImage({styles:{flexRatio:false}});

Different buttons position


<div id="image-11" style="width:50%;height:50%;"></div>
<div id="image-12" style="width:50%;height:50%;"></div>
<div id="image-13" style="width:50%;height:50%;"></div>
<div id="image-14" style="width:50%;height:50%;"></div>
    

$('#image-11').utImage({styles:{menuPosition:{right:15,bottom:15},autoResize:false}, data:"http://assets.urturn.com/medias/image/752d3b05-8e8c-4932-8831-3ed4d2edee1e/default_tumblr_lzpw5md5mf1rphuqgo1_500.png?1374681615"});
$('#image-12').utImage({styles:{menuPosition:{bottom:15},autoResize:false}, data:"http://assets.urturn.com/medias/image/752d3b05-8e8c-4932-8831-3ed4d2edee1e/default_tumblr_lzpw5md5mf1rphuqgo1_500.png?1374681615"});
$('#image-13').utImage({styles:{menuPosition:{right:15},autoResize:false}, data:"http://assets.urturn.com/medias/image/752d3b05-8e8c-4932-8831-3ed4d2edee1e/default_tumblr_lzpw5md5mf1rphuqgo1_500.png?1374681615"});
$('#image-14').utImage({styles:{menuPosition:{},autoResize:false}, data:"http://assets.urturn.com/medias/image/752d3b05-8e8c-4932-8831-3ed4d2edee1e/default_tumblr_lzpw5md5mf1rphuqgo1_500.png?1374681615"});
    

Set the editable attribute.

By default, the ut-image is editable in editor but not in player. But you can do the opposite of course.


<div id="image-15" style="width:100%;height:100%;"></div>
    

$('#image-15').utImage({
  editable: !(post.context.editor),
  styles: {
    width: $('#image-15').width(),
    height: $('#image-15').height(),
    flexRatio: false
  }
});
$('.image-editable').on('click', function(event) {
  $('#image-15').utImage("editable", ($(event.target).data('editable') === 'editable'));
});
    

Source link position


<div id="image-16" style="width:50%;height:50%;"></div>
<div id="image-17" style="width:50%;height:50%;"></div>
<div id="image-18" style="width:50%;height:50%;"></div>
<div id="image-19" style="width:50%;height:50%;"></div>
    

var img = "http://colorvisiontesting.com/plate%20with%205.jpg";
$('#image-16').utImage({editable:false,styles:{linkPosition:{top:0},autoResize:false}, data:{url:img,info:{source:img}} });
$('#image-17').utImage({editable:false,styles:{linkPosition:{top:0,right:0},autoResize:false}, data:{url:img,info:{source:img}} });
$('#image-18').utImage({editable:false,styles:{linkPosition:{},autoResize:false}, data:{url:img,info:{source:img}} });
$('#image-19').utImage({editable:false,styles:{linkPosition:{right:0},autoResize:false}, data:{url:img,info:{source:img}} });