Ext.ux.ImageViewer

[hb562100]

The class can help you change pictures like an advertisement.

Edit your 'demo_chain.png'.

demo_online (http://www.jiashow.com/test_img_exchange.html)
source code (http://mylib.duxiu.com/userfile/6020391/2008-09-26/1222438202933.zip)


/**
* The class of Ext.ux.ImageViewer.
* @description : the class can help you change pictures like an advertisement.
*/
Ext.ux.ImageViewer = Ext.extend(Ext.Component , {
/**
* The size of the viewer
*/
height: 300,
width : 400,


/**
* The class of the Number buttons
*/
clsBtn : 'dx-button-btn',
selectClsBtn : 'dx-button-select',
overClsBtn : 'dx-button-over',

/**
* The Number buttons' count and number format text.
*
*/
count : 6,
numText : '{0}',

/**
* If false the image can change auto or not.
*/
autoChange : true,

/**
* The frequency in milliseconds with which the image should be changed.
*/
interval : 3000,

/**
* The callback for click on the buttons.
*/
clickCallback : false,

bli : 0,//private
onRender: function(ct, position){
this.nums = [];
for(var i = 0 ; i<this.count ; i++){
this.nums.push({
text : String.format( this.numText , i+1 ),
cls : i==0?this.clsBtn+' '+this.selectClsBtn:this.clsBtn
});
}
if(!this.tpl){
this.tpl = new Ext.XTemplate(
'<div class="dx-view">',
'<div class="dx-img-view"></div>',
'<ul class="dx-button">',
'<tpl for="nums">',
'<li class="{cls}">{text}</li>',
'</tpl>',
'</ul>',
'</div>'
);
}
if(position){
this.el = this.tpl.insertBefore(position,this ,true);
}else{
this.el = this.tpl.append(ct,this ,true);
}

this.el.setWidth(this.width);
this.el.setHeight(this.height);
},
//private
afterRender : function(){
this.lis =Ext.query( 'li' , this.el.dom);
Ext.each(this.lis , function(li,i){
li = Ext.get(li);
li.on({
'click' : this.onClick.createDelegate(this,[li,i]),
'mouseover' : this.onMouseOver.createDelegate(this,[li,i]),
'mouseout' : this.onMouseOut.createDelegate(this,[li,i])
});
} , this);

this.imgView = Ext.get(Ext.query( 'div[class=dx-img-view]' , this.el.dom)[0]);

if(this.autoChange===true){
var task = {
run: function(){
if(!this.clicked)
this.skip( (this.bli+1)% this.count );
},
interval: this.interval,
scope: this
}
Ext.TaskMgr.start.defer(this.interval , this , [task]);
}
},

fxt : 'background-position:0px -{0}px',
/**
* skip to the other num
* @param num
*/
skip : function( num ){
Ext.get(this.lis[this.bli]).removeClass(this.selectClsBtn);
this.bli = num;
Ext.get(this.lis[num]).addClass(this.selectClsBtn);

this.imgView.slideOut( 'r' ,{
stopFx : true,
duration : 0.5,
easing : 'easeOut',
afterStyle : String.format(this.fxt, num* this.height ),
scope : this
});

this.imgView.slideIn( 'l' ,{
duration : 0.2,
easing : 'easeIn'
});
},
//private
onClick : function( li , i ){
this.skip(i);
this.clicked = true;

if(typeof this.clickCallback =='function'){
this.clickCallback(i,this);
}
},
//private
onMouseOver : function(li){
li.addClass(this.overClsBtn);
},
//private
onMouseOut : function(li){
li.removeClass(this.overClsBtn);
}
});

[benny00]

Very nice indeed.
Would love to see this taking a JSON format of pictures like:

{ 'results': 2, 'pics': [
{ 'id': 1, 'src': 'images/pic1.jpg', 'desc': 'Picture1' },
{ 'id': 2, 'src': 'images/pic2.jpg', 'desc': 'Picture2' } ]
}

[hb562100]

Very nice indeed.
Would love to see this taking a JSON format of pictures like:

{ 'results': 2, 'pics': [
{ 'id': 1, 'src': 'images/pic1.jpg', 'desc': 'Picture1' },
{ 'id': 2, 'src': 'images/pic2.jpg', 'desc': 'Picture2' } ]
}

8-| Maybe like you want,load the pictures is asynchronous,sometimes express a blank.So bad to do that,but all pictures in one can solve this problem.:-?

[vlados]

Very serious problem. U need to first load some image, and the setTimeout for the next image

[benny00]

8-| Maybe like you want,load the pictures is asynchronous,sometimes express a blank.So bad to do that,but all pictures in one can solve this problem.:-?

I understand what you are saying, but on a dynamical page, where pictures always change, it is not so good.
For me, having one big 813.24 KB PNG file loaded (which is min. 2x larger than ext-all.js) is not really a good solution.
On the other hand, this imageViewer is very practical for static home pages, where the images won't change.