View Full Version : Carousel: auto-resize images when iphone is rotated?

23 Jun 2010, 9:09 AM
I have 10 images with varying heights and widths within a carousel.

If a user rotates their iphone from vertical to horizontal orientation can the images in the carousel auto resize to accommodate the new viewport dimensions?

24 Jun 2010, 10:54 AM
You can set monitorOrientationChange: true on the Carousel and then implement the onOrientationChange method in which you resize the images.

You could override the afterLayout method (remember to call superclass afterLayout) on the Carousel, and check the current orientation by reading the Ext.orientation property.

The third way you could do it is using the Ext.EventManager.onOrientationChange(yourFunction). It gets passed the orientation as the first argument to your handler function.

14 Jul 2010, 1:02 PM
does anyone have a simple sample of this working?
just something simple like:

if Ext.orientation == 'landscape'

I'm having a tough time grasping this.


30 Sep 2010, 11:08 AM
Can you provide a sample code?

30 Sep 2010, 1:06 PM
If you put the image in a div in a panel and set the container width to 100% it will automatically rezise when the orientation changes.

In the code below I'm using an outer div as a container and an inner div that contains the image.

html :'<div id ="outerDiv" style=" width:100%; background-color:grey; overflow:hidden;"><div id="p1"><img id="photo" width="98%"; style="padding:10px;" src="img/t1.jpg"></div></div>'

30 Sep 2010, 2:17 PM
Nice! Thanks for your help.
Next question, How can I have the image aligned vertically centered?

30 Sep 2010, 2:49 PM
Horizontal alignment:

<div id="p1" style="text-align:center;"><img id="photo" width="98%"; style="padding:10px;" src="img/t1.jpg"></div>

Vertical: Haven't tested.

1 Oct 2010, 11:00 AM
Putting width 100% won't work for all cases. For example, if you have a naturally vertical image (portrait) and you are in portrait orientation, you'd probably want it to fill the vertical space completely (height=100%). However if you have a landscape image and you are in portrait orientation, you probably will want it to be filling the width at 100%. The same examples apply for an iphone/touch landscape oriented except reverse everything.

The approach I've found to work is to calc the size of the view area on orientation change, then change your image to fit those dimensions preserving the aspect ratio. Maybe there is another way but this worked for me.

24 Sep 2014, 5:47 AM
You can add this in your .css file

.my-carousel-item{background:url(images/loading.png) no-repeat center center}@media screen and (orientation: portrait){.my-carousel-item-img{background-size:100% auto}}@media screen and (orientation: landscape){.my-carousel-item-img{background-size:auto 100%}}.x-portrait .my-carousel-item-img{background-size:100% auto}.x-landscape .my-carousel-item-img{background-size:auto 100%}.my-carousel-item-img{background-position:center center}.x-carousel-indicator>*{background-color:orange !important;opacity:0.4}.x-carousel-indicator>.x-carousel-indicator-active{opacity:1}