[2.x] Ext.ux.ImageSlideshow

[gizzmo]

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]

The slideshow works fine in FF, but not in IE6 or IE7. Can anyone confirm?

[garraS]

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]

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]

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]

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]

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]

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]

I try this code, but doesn't to loop(back to first image after last image). Any suggestion?