Results 1 to 8 of 8
  1.    #1  
    I am calling the ImageViewer widget on a new scene. There are no other widgets and I added some css to make it full screen. However, it just occupies the upper part of the screen and the rest is blank (see screenshot). I can even zoom in this small area.

    Here is the scene:

    <div id="iv" style="height: 480px; width: 320px; margin: 0px; -webkit-user-drag: none; border: 0px; padding: 0px; background-color: black;">
      <div id="viewimage" x-mojo-element="ImageView"></div>
    How can I make the widget full screen?
    Attached Images Attached Images
  2. #2  
    This widget will always work on proportion of width and height as you increase the width height also increases.
  3. #3  
    You need to put the size attributes on the widget itself, not the containing div. You can do it with a css class or just the style attribute.

    You can also set the size to full screen by using the following code. This is useful when changing orientation.

    $('ImageView').mojo.manualSize(this.controller.window.innerWidth, this.controller.window.innerHeight);
  4. #4  
    Thanks Blubble,

    Can you help me out for loading more than 1 photo from the server using Image view widget.
    I have almost done that but it gives me error while the set of pics are between 3 to 5.

    There is one more issue that I am facing which is posted in the following thread:

  5.    #5  
    Ah - I see, thanks!
  6.    #6  
    I works! Great
  7.    #7  
    Nope, it doesn't!

    The ImageVIewer supports orientation change, I added this. Images in portait format in portrait mode are displayed in fullscreen. Images in landscape format are cropped in portait mode, but if I turn the phone to landscape mode, the image turns as it should but it again occupies only a part of the window, not the full screen.

    See the screenshot.
    Attached Images Attached Images
  8.    #8  
    Ok, I managed it, but I think this is not the way it's supposed to be done.

    I added the following to the setup() of the ViewImage scene:

    this.controller.listen(document, 'orientationchange',this.handleOrientation.bindAsEventListener(this));
    var x = this.controller.window.innerHeight;
    var y = this.controller.window.innerWidth;
    if(x > y) {
        this.maxw = x;
        this.minw = y
    else {
        this.maxw = y;
        this.minw = x
    Here I am installing an event handler for orientation change and I record the x/y max size of the window (just in case the user starts the application in landscape orientation)

    And in the eventhandler I change the viewer size based on orientation position using the previously recorded max values:

    ViewimageAssistant.prototype.handleOrientation = function(event) {
        if(event.position >= 4) {
    	$('viewimage').mojo.manualSize(this.maxw, this.minw);
        else {
    	$('viewimage').mojo.manualSize(this.minw, this.maxw);
    This works. But I assume there must be an out-of-the-box way to do it...

Posting Permissions