1. #1
    Sencha User
    Join Date
    Sep 2011
    Location
    India
    Posts
    56
    Vote Rating
    0
    raju0574 is on a distinguished road

      0  

    Question Answered: image slide show with carousel in sencha touch randomly

    Answered: image slide show with carousel in sencha touch randomly


    Hi all,i am carousel to get dispaly images as a slide show ,in which images are moving by clicking or by moving,Here what i want to do is just keep on going that image slide show with some time peroid,just like simple slide show,for that what i have to do,my code is
    Code:
    var carousel1 = new Ext.Carousel({
    flex:7.3,
    centered:true,
    
    
                defaults: {
                   cls: 'card' 
                },
                items: [{
                    html: '<p><img src="resources/imgs/sidcorrect.jpg"></p>',
    				cls:'card card1'
                },
                {
                    
                    html: '<p><img src="resources/imgs/sname320250.jpg"></p>',
    				cls:'card card2'
                },
                {
                    
                   html: '<p><img src="resources/imgs/search350.jpg"></p>',
    			   cls:'card card3'
                }]
            });
    Ext.panel({
    layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
    items:[carousel1]
    });
    This my code to display 3 images one after another by clicking or by moving,
    What i have to do to move images one after another without performing any actrion.

    Please let me know as soon as possible.

    Thanks in advance.

  2. you could use a delayed task for this.


    Code:
                {                        cls:'home_carousel',                xtype:'carousel',
                    direction: 'horizontal',
                    height:175,
                    listeners:
                    {
                        'afterrender': function(carousel) {
                            carousel.pageTurner = new Ext.util.DelayedTask(function() {
                                if (this.getActiveIndex() == this.items.length - 1) {
                                    this.setActiveItem(0, 'slide');
                                }
                                else {
                                    this.next();
                                }
                                this.pageTurner.delay(6000);
                            }, carousel);
                            carousel.pageTurner.delay(6000);
                        }
                    },
                    items:[
                        {html:'<div class="ccard">one</div>'},
                        {html:'<div class="ccard">two</div>'},
                        {html:'<div class="ccard">three</div>'}
                    ]
                }

  3. #2
    Sencha Premium Member
    Join Date
    May 2008
    Location
    Pasadena, California
    Posts
    172
    Answers
    27
    Vote Rating
    2
    NickT is on a distinguished road

      1  

    Default


    you could use a delayed task for this.


    Code:
                {                        cls:'home_carousel',                xtype:'carousel',
                    direction: 'horizontal',
                    height:175,
                    listeners:
                    {
                        'afterrender': function(carousel) {
                            carousel.pageTurner = new Ext.util.DelayedTask(function() {
                                if (this.getActiveIndex() == this.items.length - 1) {
                                    this.setActiveItem(0, 'slide');
                                }
                                else {
                                    this.next();
                                }
                                this.pageTurner.delay(6000);
                            }, carousel);
                            carousel.pageTurner.delay(6000);
                        }
                    },
                    items:[
                        {html:'<div class="ccard">one</div>'},
                        {html:'<div class="ccard">two</div>'},
                        {html:'<div class="ccard">three</div>'}
                    ]
                }

  4. #3
    Sencha User
    Join Date
    Sep 2011
    Location
    India
    Posts
    56
    Vote Rating
    0
    raju0574 is on a distinguished road

      0  

    Default


    thank you its working fine,but one more thing i want change is the style of animation and speed of slide its showing very fastly,not that delay the display animation and speed,how can we change that.

  5. #4
    Sencha User
    Join Date
    Jul 2009
    Posts
    16
    Vote Rating
    1
    e-mike is on a distinguished road

      1  

    Default Sencha Touch 2 - Rotating Carousel

    Sencha Touch 2 - Rotating Carousel


    Code:
    Ext.define('Ext.carousel.RotatingCarousel', {	extend: 'Ext.carousel.Carousel',
    	alternateClassName: 'Ext.RotatingCarousel',
    	xtype: 'rotatingcarousel',
    	config: {
    		delay: 3000,
    		start: true,
    		listeners: {
    			tap: {
    				fn: function() {
    					this.pause();
    				},
    				element: 'element'
    			},
    			swipe: {
    				fn: function() {
    					this.start();
    				},
    				element: 'innerElement'
    			}
    		}
    	},
    	initialize: function() {
    		if (this.config.start) {
    			this.start();
    		}
    	},
    	rotate: function() {
    		if (this.timeout) {
    			clearTimeout(this.timeout);
    		}
    		if (this.getActiveIndex() === this.getMaxItemIndex()) {
    			this.setActiveItem(0, 'slide');
    		}
    		else {
    			this.next();
    		}
    		this.timeout = Ext.defer(this.rotate, this.config.delay, this);
    	},
    	start: function(delayStart) {
    		this.timeout = Ext.defer(this.rotate, delayStart || this.config.delay, this);
    	},
    	pause: function(delayStart) {
    		if (this.timeout) {
    			clearTimeout(this.timeout);
    		}
    		if (delayStart) {
    			this.start(delayStart);
    		}
    		return this;
    	},
    	stop: function(delayStart) {
    		this.pause(delayStart);
    		this.setActiveItem(0, 'slide');
    		return this;
    	}
    });

  6. #5
    Sencha User Frank's Avatar
    Join Date
    Mar 2007
    Posts
    185
    Vote Rating
    1
    Frank is an unknown quantity at this point

      0  

    Default


    Thanks for your tip, it's helpful!
    Ext Every Day!
    ajaxjs.com

  7. #6
    Sencha User
    Join Date
    Feb 2012
    Location
    Chicago, IL
    Posts
    7
    Vote Rating
    0
    MacHellerOgden is on a distinguished road

      0  

    Default


    Thank you! This is great—very helpful indeed. One thing: I'd love to see the automatic progression stop if there's a tapmove event on the carousel, effectively turning it back into a normal carousel and giving complete control back to the user. As it is, the slides keep progressing automatically even if the user tries to take over. I'm working on this now and if I can figure it out, I'll post my solution. Thanks again.

  8. #7
    Sencha User
    Join Date
    Mar 2012
    Location
    bangalore
    Posts
    14
    Vote Rating
    -1
    sushmak_bs is an unknown quantity at this point

      0  

    Default image slide show...

    image slide show...


    this is working fine thank u.. But i want the image slide show automatically without the user interaction how do i do that? please help me

    thanks in advance..

  9. #8
    Sencha User Pulp Fiction's Avatar
    Join Date
    Mar 2013
    Location
    Italy
    Posts
    75
    Answers
    2
    Vote Rating
    -1
    Pulp Fiction is an unknown quantity at this point

      0  

    Default Rotating Carousel from jsonp store

    Rotating Carousel from jsonp store


    Thank you very much e-mike Great job!!!

    I tried to extend the application with a carousel that loads data from a store and is displayed in a panel. Everything works fine but the auto rotate carousel does not start until you run a slide manually.

    Code:
    Ext.define('Grottaglie.view.Carousel', {
        extend: 'Ext.carousel.Carousel',
        alias: 'widget.carouselPanel',
    
        config: {
            delay: 1000,
            start: true,
            listeners: {
                tap: {
                    fn: function() {
                        this.pause();
                    },
                    element: 'element'
                },
                swipe: {
                    fn: function() {
                        this.start();
                    },
                    element: 'innerElement'
                }
            },
            defaults: {
                styleHtmlContent: true
            }
        },
        
        initialize: function() {
            if (this.config.start) {
                this.start();
            }
         },
         
         rotate: function() {
            if (this.timeout) {
                clearTimeout(this.timeout);
            }
            if (this.getActiveIndex() === this.getMaxItemIndex()) {
                this.setActiveItem(0, 'slide');
            }
            else {
                this.next();
            }
            this.timeout = Ext.defer(this.rotate, this.config.delay, this);
        },
        start: function(delayStart) {
            this.timeout = Ext.defer(this.rotate, delayStart || this.config.delay, this);
        },
        pause: function(delayStart) {
            if (this.timeout) {
                clearTimeout(this.timeout);
            }
            if (delayStart) {
                this.start(delayStart);
            }
            return this;
        },
        stop: function(delayStart) {
            this.pause(delayStart);
            this.setActiveItem(0, 'slide');
            return this;
        },
    
        initialize: function() {
            var store = Ext.create('SVE.store.Carousel');
            store.load ({
                callback : function(records, operation, success) {
                    for (var i=0,totalItem=store.getCount();i<totalItem;i++){
                        this.add({
                            data: store.getAt(i).data,
                            tpl: '<tpl for "."><div><img src="http://www.grottaglie24.it/{immagine}"/></div></tpl>'
                        });
                    }
                },
                scope:this
            });
        }
    
    });
    Knows someone explain to me why? Thanks.

  10. #9

  11. #10
    Sencha User
    Join Date
    May 2011
    Location
    Melbourne, Australia
    Posts
    89
    Answers
    5
    Vote Rating
    7
    Greg Arnott is on a distinguished road

      0  

    Default


    Quote Originally Posted by Pulp Fiction View Post
    Thank you very much e-mike Great job!!!

    I tried to extend the application with a carousel that loads data from a store and is displayed in a panel. Everything works fine but the auto rotate carousel does not start until you run a slide manually.

    Code:
    Ext.define('Grottaglie.view.Carousel', {
        extend: 'Ext.carousel.Carousel',
        alias: 'widget.carouselPanel',
    
        config: {... },
        
        initialize: function() {
            if (this.config.start) {
                this.start();
            }
         },
         
         rotate: function() {...},
        start: function(delayStart) {...},
        pause: function(delayStart) {... },
        stop: function(delayStart) {... },
    
        initialize: function() {
            var store = Ext.create('SVE.store.Carousel');
            store.load ({
                callback : function(records, operation, success) {
                    for (var i=0,totalItem=store.getCount();i<totalItem;i++){
                        this.add({
                            data: store.getAt(i).data,
                            tpl: '<tpl for "."><div><img src="http://www.grottaglie24.it/{immagine}"/></div></tpl>'
                        });
                    }
                },
                scope:this
            });
        }
    
    });
    Knows someone explain to me why? Thanks.
    Basic javascript principles.
    When you made a second "initialize" function, you overwrote the first, and not extended the functionality. The contents of the latest definition stand, thus the call to automatically start is wiped.

    To fix, move the contents of your second init into the first and delete the second init call.

    Better still - remove the second initialize.
    Then where you want the carousel:

    Code:
    items: [{
       xtype: 'carouselPanel'
    }],listeners: [{
            fn: function(component, eOpts) {
                var store = Ext.create('SVE.store.Carousel');
                store.load({
                    callback: function(records, operation, success) {
                        for (var i = 0, totalItem = store.getCount(); i < totalItem; i++) {
                            this.add({
                                data: store.getAt(i).data,
                                tpl: '<tpl for "."><div><img src="http://www.grottaglie24.it/{immagine}"/></div></tpl>'
                            });
                        }
                    },
                    scope: this
                });
                component.setActiveItem(0);
    
    
                if (this.config.start) {
                    this.start();
                }
            },
            event: 'initialize'
        }
    Else dynamically:

    Code:
    var carousel = Ext.widget('carouselPanel');
    
    carousel.add( [images ... via any method] );
    
    this.down('someTarget').add(carousel);
    carousel.show();

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi