1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    60
    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
    35,704
    Answers
    3356
    Vote Rating
    750
    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
    60
    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
    60
    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
    60
    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
    60
    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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar