Gelmiş geçmiş en büyük porno sitemiz olan 2pe de her zaman en kaliteli pornoları sunmayı hedefledik. Diğer video sitemiz olan vuam da ise hd porno ağırlıklı çalışmalara başladık.

  1. #1
    Sencha User
    Join Date
    Mar 2007
    Posts
    117
    Vote Rating
    0
    gizzmo is on a distinguished road

      0  

    Default [2.x] Ext.ux.ImageSlideshow

    [2.x] Ext.ux.ImageSlideshow


    Hi,

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

    Code:
    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:

    Code:
    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:

    Code:
    {
       "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
    Attached Files
    Last edited by gizzmo; 17 Jul 2008 at 11:00 AM. Reason: Updated code

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Posts
    117
    Vote Rating
    0
    gizzmo is on a distinguished road

      0  

    Default


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

  3. #3
    Sencha User garraS's Avatar
    Join Date
    Oct 2007
    Location
    Argentina
    Posts
    203
    Vote Rating
    0
    garraS is on a distinguished road

      0  

    Default


    Quote Originally Posted by gizzmo View Post
    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

  4. #4
    Touch Premium Member
    Join Date
    Mar 2008
    Posts
    5
    Vote Rating
    0
    gugman is on a distinguished road

      0  

    Default


    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:
    Code:
     
    ...
    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

  5. #5
    Ext User
    Join Date
    Feb 2008
    Posts
    34
    Vote Rating
    0
    Legend is on a distinguished road

      0  

    Default


    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?

  6. #6
    Sencha User
    Join Date
    Mar 2007
    Posts
    117
    Vote Rating
    0
    gizzmo is on a distinguished road

      0  

    Default


    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?
    Last edited by gizzmo; 16 Jul 2008 at 1:48 PM. Reason: Confirmed gugmans suggestion. Updated code...

  7. #7
    Ext User
    Join Date
    Feb 2008
    Posts
    34
    Vote Rating
    0
    Legend is on a distinguished road

      0  

    Default


    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?

  8. #8
    Sencha User
    Join Date
    Mar 2007
    Posts
    117
    Vote Rating
    0
    gizzmo is on a distinguished road

      0  

    Default


    The code has been updated to take any store if provided...

    Code:
    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.

    Code:
    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...

  9. #9
    Sencha User
    Join Date
    Aug 2009
    Posts
    3
    Vote Rating
    0
    sri_js is on a distinguished road

      0  

    Default Ext.ux.ImagesSlideshow for looping (after last image back to first imagea gain)

    Ext.ux.ImagesSlideshow for looping (after last image back to first imagea gain)


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