10 * @class Roo.bootstrap.Img
11 * @extends Roo.bootstrap.Component
13 * @cfg {Boolean} imgResponsive false | true
14 * @cfg {String} border rounded | circle | thumbnail
15 * @cfg {String} src image source
16 * @cfg {String} alt image alternative text
17 * @cfg {String} href a tag href
18 * @cfg {String} target (_self|_blank|_parent|_top)target for a href.
19 * @cfg {String} xsUrl xs image source
20 * @cfg {String} smUrl sm image source
21 * @cfg {String} mdUrl md image source
22 * @cfg {String} lgUrl lg image source
23 * @cfg {Boolean} backgroundContain (use style background and contain image in content)
27 * @param {Object} config The config object
30 Roo.bootstrap.Img = function(config){
31 Roo.bootstrap.Img.superclass.constructor.call(this, config);
37 * The img click event for the img.
38 * @param {Roo.EventObject} e
43 * The when any image loads
44 * @param {Roo.EventObject} e
50 Roo.extend(Roo.bootstrap.Img, Roo.bootstrap.Component, {
61 backgroundContain : false,
63 getAutoCreate : function()
65 if(this.src || (!this.xsUrl && !this.smUrl && !this.mdUrl && !this.lgUrl)){
66 return this.createSingleImg();
71 cls: 'roo-image-responsive-group',
76 Roo.each(['xs', 'sm', 'md', 'lg'], function(size){
78 if(!_this[size + 'Url']){
84 cls: (_this.imgResponsive) ? 'img-responsive' : '',
85 html: _this.html || cfg.html,
86 src: _this[size + 'Url']
89 img.cls += ' roo-image-responsive-' + size;
91 var s = ['xs', 'sm', 'md', 'lg'];
93 s.splice(s.indexOf(size), 1);
95 Roo.each(s, function(ss){
96 img.cls += ' hidden-' + ss;
99 if (['rounded','circle','thumbnail'].indexOf(_this.border)>-1) {
100 cfg.cls += ' img-' + _this.border;
117 a.target = _this.target;
121 cfg.cn.push((_this.href) ? a : img);
128 createSingleImg : function()
132 cls: (this.imgResponsive) ? 'img-responsive' : '',
134 src : Roo.BLANK_IMAGE_URL // just incase src get's set to undefined?!?
137 if (this.backgroundContain) {
138 cfg.cls += ' background-contain';
141 cfg.html = this.html || cfg.html;
143 if (this.backgroundContain) {
144 cfg.style="background-image: url(" + this.src + ')';
146 cfg.src = this.src || cfg.src;
149 if (['rounded','circle','thumbnail'].indexOf(this.border)>-1) {
150 cfg.cls += ' img-' + this.border;
167 a.target = this.target;
172 return (this.href) ? a : cfg;
175 initEvents: function()
178 this.el.on('click', this.onClick, this);
180 if(this.src || (!this.xsUrl && !this.smUrl && !this.mdUrl && !this.lgUrl)){
181 this.el.on('load', this.onImageLoad, this);
183 // not sure if this works.. not tested
184 this.el.select('img', true).on('load', this.onImageLoad, this);
189 onClick : function(e)
191 Roo.log('img onclick');
192 this.fireEvent('click', this, e);
194 onImageLoad: function(e)
197 this.fireEvent('load', this, e);
201 * Sets the url of the image - used to update it
202 * @param {String} url the url of the image
205 setSrc : function(url)
209 if(this.src || (!this.xsUrl && !this.smUrl && !this.mdUrl && !this.lgUrl)){
210 if (this.backgroundContain) {
211 this.el.dom.style.backgroundImage = 'url(' + url + ')';
213 this.el.dom.src = url;
218 this.el.select('img', true).first().dom.src = url;