PDA

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



tomodea
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?

TommyMaintz
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.

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

if Ext.orientation == 'landscape'
Landscape
else
portrat.

I'm having a tough time grasping this.

Thanks

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

remoorejr
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>'

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

remoorejr
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.

miroperez
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.