1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    61
    Answers
    3
    Vote Rating
    0
    kidqn is on a distinguished road

      0  

    Default Answered: How to display images in carousel full screen when orientation is landscape

    Answered: How to display images in carousel full screen when orientation is landscape


    Hi , i have a carousel full screen images when it in Potrait mode, but when I change into landscape mode, it doens't.
    The height of images was shortened. Can you help me,
    My code:
    Code:
    {         xtype: 'carousel',
              //height:  150,
              flex: Ext.os.is.Phone ? 5 : 6,
              style: 
              {
                   background: 'white'
               },
                direction: 'horizontal',
                directionLock: true,
                layout: 'fit',
                items: 
                    [
                      {
                          xtype: 'label',
                          html: '<div style="width:' 
                            + window.innerWidth 
                            + 'px;height:' + 'px;"><img src=' 
                            +                  'http://www.papayaclothing.com/shop/images/ListBanners/523.jpg'
                             + ' style="width: 100%;height: 100%;" /></div>'
                       },
                        {
                              xtype: 'label',
                              html: '<div style="width:' 
                              + window.innerWidth 
                               + 'px;height:' + 'px;"><img src=' 
    +
    'http://www.llbean.com/dept_resources/kids/seasonalLander_images/130709_BACKPACK_lander-older.jpg'
    + ' style="width: 100%;height: 100%;" /></div>' } ] },

  2. Orientation Ext.device.Orientation and orientation change:


    Code:
        Ext.device.Orientation.on({
            scope: this,
            orientationchange: function(e) {
                console.log('Alpha: ', e.alpha);
                console.log('Beta: ', e.beta);
                console.log('Gamma: ', e.gamma);
    
    
                // add code here, or fire custom event for carousel
            }
        });
    Orientation is based on Viewport. I usually add a listener which is more reliable:


    Code:
       onOrientationChange: function(viewport, orientation, width, height) {
            // test trigger and values
            console.log('o:' + orientation + ' w:' + width + ' h:' + height);
    
    
            if (width > height) {
                orientation = 'landscape';
            } else {
                orientation = 'portrait';
            }
            // add code here, or fire custom event for carousel
        }
    First step to having it work well, is how you set your images in carousel.
    Each image you add, have them set to a mode of background.


    Code:
        // carousel initialize.
        // passing an array of image urls "imageItemsArray"
        fn: function(component, eOpts) {
            var imageItemsArray = this.getImageArray();
    
    
            component.setItems([]);
    
    
            // Initialize carousel images
            Ext.Array.each(imageItemsArray, function(item) {
                var image = Ext.create('Ext.Img', {
                    src  : item,
                    mode : 'background'
                });
                component.add(image);
            });
            component.setActiveItem(0);
            },
            event: 'initialize'
        }
    The CSS for this will now allow you to easily have all images in proportion.


    Code:
        // from recollection, sencha sets this:
        .x-carousel-item>* {
            position : absolute !important;
            width    : 100%;
            height   : 100%;
        }
    
    
        // here are the styles which makes it effective to use background-mode.
        // swap .x-img for a unique class if this effect is for one carousel of app only
        // and add that class to the Ext.Img create code above.
        .x-carousel .x-img {
            background-size     : "contain"; // or "cover" if you want to overflow the image to fill
            background-position : 50% 50%;
            background-repeat   : no-repeat;
        }
    
    
        // here's a class that can be added to carousel / anything to animate size change:
        .resize {
            -webkit-transition : height .5s;
            transition         : height .5s;
            height             : 0;
            width              : 100%;
            overflow           : hidden;
        }
    The technique
    - add class "resize" to the carousel.
    - On carousel painted event:
    - If your images are 4:3
    var ratioHeight = Ext.Viewport.element.getWidth() * 0.75;
    - If your images are 16:9
    var ratioHeight = Ext.Viewport.element.getWidth() * 0.75 * 0.75;
    - Apply to carousel using: component.setHeight(ratioHeight);


    The carousel will now expand to the correct ratio height automatically.
    On orientation change to landscape, set the height to 100%, or if that doesn't work, then to Ext.Viewport.element.getHeight();

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,801
    Answers
    3467
    Vote Rating
    834
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      1  

    Default


    It looks like you are setting the height and width of the <div> to a static size. You could use Ext.Img instead of the label and since Carousel uses card layout it should update the size of the image no matter the orientation.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    61
    Answers
    3
    Vote Rating
    0
    kidqn is on a distinguished road

      0  

    Default


    my Main.js has type: container. i create a toolbar, put carousel and a list in container.
    If I set static size window.innerWidth, the image display full in carousel
    Portrait mode Landscape: not full in height
    1.jpg3.jpg

    If I add Ext.List and use xtype img,
    Code:
    {
          xtype: 'image',
          src: 'link'
    }
    the image doesn't in portrait mode.
    2.jpg
    It is full in height but not in width in landscape mode

    4.jpg

    my code:
    Code:
    Ext.define('samdo.view.Main', {    extend: 'Ext.Container',
        xtype: 'main',
        requires: [
            'Ext.TitleBar',
            'Ext.Video',
            'Ext.carousel.Carousel',
            'Ext.Img',
            'Ext.List'
        ],
        config: {
            scrollable: 
           {
               direction: 'vertical',
               directionLock: true
            },
            items:[
            {
                xtype: 'titlebar',
                title: 'hello',
           },
          {
                xtype:'carousel',
                height: 150,
                //flex: Ext.os.is.Phone ? 5 : 6,
                direction : 'horizontal',
                directionLock : true,
                items:
                [
                  {
                       xtype: 'label',
                       html: '<div style="width:' + window.innerWidth +  'px;" "height:' 
                                + window.innerHeight +  'px;">' 
                                +  '<img src= http://www.llbean.com/dept_resources/kids/seasonalLander_images/130709_BACKPACK_lander-older.jpg'
                                 + ' style="width: 100%;height: 100%;" /></div>'
                  },
                  {
                         xtype: 'image',
                         src: 'http://www.llbean.com/dept_resources/kids/seasonalLander_images/130709_BACKPACK_lander-older.jpg'
                    }
                ]
                            
        },
        {                            
                    xtype: 'list',
                    height: 252,
                    flex: 1,
                    scrollable: false,
                                                
                    data: [
                    {text: 'Value of day'},
                    {text: 'Order list'},
                    {text: 'Find a store'},
                    {text: 'Register'},
                    {text: 'Contact'}
                            ],
                    itemTpl: '<div class="menu"><table width="443" height="25" border="0"> <tr> <td width="53" rowspan="2"></td> <td width="374">{text}</td></tr> <tr><td></td></tr></table></div>'                            
                                        
                                        
        },
        {
            xtype:'label',
            html: 'Component 3'
        }
        
        ]
        }
    });

  5. #4
    Sencha User
    Join Date
    Mar 2012
    Posts
    61
    Answers
    3
    Vote Rating
    0
    kidqn is on a distinguished road

      0  

    Default


    I think problem is red text in my code.
    Can i get the orientation ? It means that
    if (getOrientation() == 'landscape') {height: //}
    else {//}
    I try put that code in my Main.js, but it seems doesn't work. Grammar code.

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

      1  

    Default


    Orientation Ext.device.Orientation and orientation change:


    Code:
        Ext.device.Orientation.on({
            scope: this,
            orientationchange: function(e) {
                console.log('Alpha: ', e.alpha);
                console.log('Beta: ', e.beta);
                console.log('Gamma: ', e.gamma);
    
    
                // add code here, or fire custom event for carousel
            }
        });
    Orientation is based on Viewport. I usually add a listener which is more reliable:


    Code:
       onOrientationChange: function(viewport, orientation, width, height) {
            // test trigger and values
            console.log('o:' + orientation + ' w:' + width + ' h:' + height);
    
    
            if (width > height) {
                orientation = 'landscape';
            } else {
                orientation = 'portrait';
            }
            // add code here, or fire custom event for carousel
        }
    First step to having it work well, is how you set your images in carousel.
    Each image you add, have them set to a mode of background.


    Code:
        // carousel initialize.
        // passing an array of image urls "imageItemsArray"
        fn: function(component, eOpts) {
            var imageItemsArray = this.getImageArray();
    
    
            component.setItems([]);
    
    
            // Initialize carousel images
            Ext.Array.each(imageItemsArray, function(item) {
                var image = Ext.create('Ext.Img', {
                    src  : item,
                    mode : 'background'
                });
                component.add(image);
            });
            component.setActiveItem(0);
            },
            event: 'initialize'
        }
    The CSS for this will now allow you to easily have all images in proportion.


    Code:
        // from recollection, sencha sets this:
        .x-carousel-item>* {
            position : absolute !important;
            width    : 100%;
            height   : 100%;
        }
    
    
        // here are the styles which makes it effective to use background-mode.
        // swap .x-img for a unique class if this effect is for one carousel of app only
        // and add that class to the Ext.Img create code above.
        .x-carousel .x-img {
            background-size     : "contain"; // or "cover" if you want to overflow the image to fill
            background-position : 50% 50%;
            background-repeat   : no-repeat;
        }
    
    
        // here's a class that can be added to carousel / anything to animate size change:
        .resize {
            -webkit-transition : height .5s;
            transition         : height .5s;
            height             : 0;
            width              : 100%;
            overflow           : hidden;
        }
    The technique
    - add class "resize" to the carousel.
    - On carousel painted event:
    - If your images are 4:3
    var ratioHeight = Ext.Viewport.element.getWidth() * 0.75;
    - If your images are 16:9
    var ratioHeight = Ext.Viewport.element.getWidth() * 0.75 * 0.75;
    - Apply to carousel using: component.setHeight(ratioHeight);


    The carousel will now expand to the correct ratio height automatically.
    On orientation change to landscape, set the height to 100%, or if that doesn't work, then to Ext.Viewport.element.getHeight();

  7. #6
    Sencha User
    Join Date
    Mar 2012
    Posts
    61
    Answers
    3
    Vote Rating
    0
    kidqn is on a distinguished road

      0  

    Default


    @Greg Arnott: Thanks for your code. It helps me understand more things. I put css code in my css file. But in my main.js, I can't put it in correct position. Where I was wrong?
    Code:
    Ext.define('samdo.view.Home', {
        extend: 'Ext.Container',
        xtype: 'home',
        fullscreen:true,
            requires: [
            'Ext.Toolbar',
            'Ext.Video',
                'Ext.Img',
                'Ext.field.Search',
                'Ext.List',
                'Ext.Carousel',
            'Ext.dataview.List'
        ],
         config: {
          id:'hometown',
          scrollable: 
          {
              direction: 'vertical',
              directionLock: true
          },
            //layout:'vbox',
            items:[
          {
                xtype:'carousel',
                direction: 'horizontal',
                directionLock: true,
                listeners:{
                  fn:'changesize',
                  event:'painted'
                },
                height: Ext.Viewport.element.getWidth() * 0.75*0.75,
                style:{
                  background:'white',
                },
                //resize:true,
                items:
                [
                  {
                    xtype: 'image',
                    src: 'http://www.llbean.com/dept_resources/kids/seasonalLander_images/130709_BACKPACK_lander-older.jpg',
                    mode: 'background'
                  },
                  {
                    xtype: 'image',
                    src: 'http://sophan.vn/Upload/Images/Fulls/slide21.png',
                    listeners: {
                                  tap : function(me, evt){
                                        console.log("Tap on right");
                                    }
                                },
                    mode: 'background'
                  },
                  {
                    xtype: 'image',
                    src: 'http://www.llbean.com/dept_resources/kids/seasonalLander_images/130709_BACKPACK_lander-older.jpg',
                    mode: 'background'
                  }
                ]
                            
        },
        {                            
              xtype: 'list',
              height: 252,
              flex: 1,
          layout:'fit',
              scrollable: false,
              data: [
              {text: 'Product'},
              {text: 'Show'},
              {text: 'Find a store'},
              {text: 'Register'},
              {text: 'Contact'}
                      ],
              //itemTpl: '<div class="menu"><table width="443" height="25" border="0"> <tr> <td width="53" rowspan="2"></td> <td width="374">{text}</td></tr> <tr><td></td></tr></table></div>'                 
          itemTpl: '<div class = "menuhome" id="menuhome">Here, the image is tiled (repeated) to fill the area.</div>'
        },
        {
           //other
        }   
        ],
        ]
        },
        //end config
        initialize:function(){
            console.log('Panel initialize');
            // Add a Listener. Listen for [Viewport ~ Orientation] Change.
            Ext.Viewport.on('orientationchange', 'onOrientationChange', this,{buffer: 50 });
            this.callParent(arguments);
        },
        onOrientationChange: function(viewport, orientation, width, height) {
                              // test trigger and values
                              console.log('o:' + orientation + ' w:' + width + ' h:' + height);
    
    
    
    
                              if (width > height) {
                                  orientation = 'landscape';
                              } else {
                                  orientation = 'portrait';
                              }
                              // add code here, or fire custom event for carousel
        },
        changesize: function(){
          if (orientation == 'landscape'){
            height:Ext.Viewport.element.getWidth() * 0.75*0.75;
        }else{
            height:Ext.Viewport.element.getWidth() * 0.75;
        }
      }
    });

  8. #7
    Sencha User
    Join Date
    Mar 2012
    Posts
    61
    Answers
    3
    Vote Rating
    0
    kidqn is on a distinguished road

      0  

    Default


    I solved this problem. Thank you! Greg Arbott and mitchellsimoens.

Thread Participants: 2

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