CODEWITHSUNDEEP
sencha-touch-2
user1824359
user1824359

Reputation: 41

Sencha touch 2.0 carousel, image resolution

-App uses Sencha touch 2.0 carousel
-Images in the carousel are displayed full screen (minus the navigation bar at the top of the screen)
-App is targetted for iPad2, iPad2 Retina display, Android xhdpi (tablets)

Goal: To display full screen images in the carousel in all target devices

Question: What should be the resolution of the image? I have tried 1028x768 image in the carousel. Displays fine (full screen) on iPad2 retina but on Samsung galaxy Tab 10 I see vertical bars on the sides. I understand the resolution is lower than retina but I figured that it would automatically scale down to the resolution of the target device and display the image full screen but apparently it isnt doing so.

Has this been achieved, if so please share.

Appreciate it.

Thanks.

Upvotes: 2

Views: 1644

Answers (1)

user1824359
user1824359

Reputation: 41

Got it!

The resolution of the image doesnt really matter! True. What is important is making sure the image tag displays the complete image by automatically resizing the image.

Here is how:
-Define a DIV tag with a specfied height (window.innerHeight) and width (window.innerWidth).
-Place the img tag as a child element of the DIV tag with height=100% and width=100%

Irrespective of the resolution of the image, resolution of the device, screen size of the device the image will be always be automitcally resized and displayed in full size.

The complete code to make the carousel work is here:

Carousel code

{
    xtype: 'panel'
    layout: 'fit',
    flex: Ext.os.is.Phone ? 5 : 6,
    items: [
        {
            xtype: 'carousel',
            direction: 'horizontal',
            directionLock: true,
            id: 'ImgId',
            flex: Ext.os.is.Phone ? 5 : 6,
            config: {
                fullscreen: true
            }
        }
    ]
}

Carousel item code

Ext.each(images, function (picture) {
    var img = picture.url;
    var bigImg = picture.bigUrl;
    itemsoverlay.push({
        xtype: 'label',
        html: '<div style="width:' 
               + window.innerWidth 
               + 'px;height:' + 'px;"><img src=' 
               + imgURL 
               + ' style="width: 100%;height: 100%;" /></div>'
     });
});

This code works for tablets and smartphones, iOS or Android.

HTH

Upvotes: 1

Related Questions