PDA

View Full Version : [2.x] Ext.ux.ImageSlideshow



gizzmo
21 May 2008, 12:40 PM
Hi,

I was writing a image slideshow extension for one of my projects.


Ext.ux.ImageSlideshow = Ext.extend(Ext.Container, {

start: 0,
duration: 1,
easing: 'easeNone',
pause: 5000,

// private
initComponent : function(){

Ext.ux.ImageSlideshow.superclass.initComponent.call(this);

this.tpl = new Ext.Template('<img src="{url}">');
this.tpl.compile();

if(this.ds) {
this.store = this.ds;
delete this.ds;
} else {
this.store = new Ext.data.JsonStore({
autoLoad: this.autoLoad,
baseParams: this.params,
url: this.url,
root: 'data',
fields: [
{name: 'url', type: 'string'}
]
});
}

this.store = Ext.StoreMgr.lookup(this.store);

this.store.on('load', this.loop, this);

},

// private
onRender: function(ct, position) {

this.el = ct.createChild({
id: this.id,
cls: this.baseCls
}, position);

this.el.setWidth(this.width);
this.el.setHeight(this.height);

},

load: function() {
this.store.load();
},

//private
loop: function() {

if(this.store.getCount()>0) {

var r = this.store.getAt(this.start++);

this.el.fadeOut({
duration: this.duration,
easing: this.easing,
scope: this,
useDisplay: true,
callback: function() {

this.tpl.overwrite(this.el.dom, r.data);
this.el.fadeIn({
duration: this.duration,
easing: this.easing,
scope: this,
callback: function() {
if( this.start == this.store.getCount() ) {
this.start = 0;
}
setTimeout( this.loop.createDelegate(this), this.pause );
}

});

}
});
}

}

});

Ext.reg('image-slideshow', Ext.ux.ImageSlideshow);

and implementation:


var slideshow = new Ext.ux.ImageSlideshow({
autoLoad: true,
renderTo: 'commercial',
width: 1000,
height: 225,
url: basePath+'/action/image/getImageSlideshow',
params: {tournamentId: tournamentId, type: 'COMMERCIAL_1000x225'}
});

and data:


{
"success" : true,
"totals" : 3,
"data" :[{
"height" : 225,
"url" : "/action/image/get?id=10048",
"width" : 1000
},{
"height" : 225,
"url" : "/action/image/get?id=10049",
"width" : 1000
},{
"height" : 225,
"url" : "/action/image/get?id=10047",
"width" : 1000
}]
}

Thanks

gizzmo
23 May 2008, 4:14 AM
The slideshow works fine in FF, but not in IE6 or IE7. Can anyone confirm?

garraS
24 May 2008, 4:03 PM
The slideshow works fine in FF, but not in IE6 or IE7. Can anyone confirm?
In my case, works fine but the only different is, in FF when the image change for another, makes a fadeout and in IE not.

Sorry for my english :">

gugman
2 Jul 2008, 7:28 PM
Hello gizzmo,
Found your extension useful. Did you ever find the solution to your fading issue? I was able to run in IE and FF with no problem by adding "useDisplay: true" to your fadeOut config:


...
this.el.fadeOut({
duration: this.duration,
easing: this.easing,
useDisplay: true,
scope: this,
callback: function() {
...


The issue is with IE and visibility mode. See this post for info:
http://extjs.com/forum/showthread.php?p=84257#post84257

Legend
15 Jul 2008, 6:54 PM
I understood till the implementation but could you explain how you are giving it the data please? Are the brackets supposed to be there like that?

gizzmo
16 Jul 2008, 1:21 PM
The data are created from a regular ajax POST/GET from the url and returned as json data from the server side. The data are then stored in an JsonStore as seen from the code.


I was able to run in IE and FF with no problem by adding "useDisplay: true" to your fadeOut config:


[CONFIRMED] I'll try this as soon as possible. Thanks gugman...


Are the brackets supposed to be there like that?

What brackets do you meen?

Legend
16 Jul 2008, 3:58 PM
Oh so it takes the input from basePath+'/action/image/getImageSlideshow' is it? Sorry about that... I'm a little new to ExtJS so its taking me some time to get used to all the syntaxes...

Just as a matter of curiosity... is there a way to give a list of images using the declaration itself without doing call to a remote script?

gizzmo
17 Jul 2008, 10:54 AM
The code has been updated to take any store if provided...


Ext.ux.ImageSlideshow = Ext.extend(Ext.Container, {

start: 0,
duration: 1,
easing: 'easeNone',
pause: 5000,

// private
initComponent : function(){

Ext.ux.ImageSlideshow.superclass.initComponent.call(this);

this.tpl = new Ext.Template('<img src="{url}">');
this.tpl.compile();

if(this.ds) {
this.store = this.ds;
delete this.ds;
} else {
this.store = new Ext.data.JsonStore({
autoLoad: this.autoLoad,
baseParams: this.params,
url: this.url,
root: 'data',
fields: [
{name: 'url', type: 'string'}
]
});
}

this.store = Ext.StoreMgr.lookup(this.store);

this.store.on('load', this.loop, this);

},

// private
onRender: function(ct, position) {

this.el = ct.createChild({
id: this.id,
cls: this.baseCls
}, position);

this.el.setWidth(this.width);
this.el.setHeight(this.height);

},

load: function() {
this.store.load();
},

//private
loop: function() {

if(this.store.getCount()>0) {

var r = this.store.getAt(this.start++);

this.el.fadeOut({
duration: this.duration,
easing: this.easing,
scope: this,
useDisplay: true,
callback: function() {

this.tpl.overwrite(this.el.dom, r.data);
this.el.fadeIn({
duration: this.duration,
easing: this.easing,
scope: this,
callback: function() {
if( this.start == this.store.getCount() ) {
this.start = 0;
}
setTimeout( this.loop.createDelegate(this), this.pause );
}

});

}
});
}

}

});

Ext.reg('image-slideshow', Ext.ux.ImageSlideshow);

So, this is an example of creating it without a server call.


var store = new Ext.data.SimpleStore({
fields: [
{name: 'url'}
]
});

var myData = [
['images/babolat.jpg'],
['images/dunloop.jpg']
];

var panel = new Ext.Panel({
renderTo: 'container',
title: 'Image Slideshow',
style: 'padding: 10px',
frame: true,
width: 213,

items: {
xtype: 'image-slideshow',
ds: store,
width: 180,
height: 300
}
});

store.loadData(myData);

I'll post the latest code in the beginning...

sri_js
29 Nov 2011, 2:15 AM
I try this code, but doesn't to loop(back to first image after last image). Any suggestion?