Alignment Issue in jquery mobile image Popup

Question

I have a div with id popupBasic for popup in Jquery Mobile

<div data-role="popup" id="popupBasic">
      <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a><img id="imgView" />
</div>

In order to Open the popup on a button click btnViewPopup following code is used.

function btnViewPopup() {
    try {
        if (localStorage.imageURL == undefined || localStorage.imageURL.length == 0 || localStorage.imageURL == "undefined") {
            Notify(22);
        }
        else {
            var source = localStorage.imageURL
            $("#imgView").attr('src', source);
            $("#popupBasic").popup("open");
        }
    }
    catch (err) {
    ErrorMessageDB("Issue Attachments", "btnAttViewClick", "", "click-to view attachment", err.message, localStorage.EmployeesKId4LastModifiedBy);
    }
}

Current implementation

1. there is a radiobutton list for list of images.
2. if select one its image URL will be stored in local storage.
3. When click View Button, set src of the imgView with the value in localstorage
4. Call Popup("Open")

My problem is first time when i click View button,image displayed is small and it is aligned to middle right. next time when i open another or same image it is displaying full as i expected. i did not given height and width for image, as it may be different for different images.

what am i doing wrong?

Thanks in advance

Answer 1

Your popup is being shown before knowing the image dimensions. You can open the popup after the image is loaded, as follows:

• CSS:

  #imgView
  {
      width: 100%;
      height: 100%;
  }
  

• JS:

  function btnViewPopup() {
      localStorage.imageURL = 'http://www.elated.com/res/Image/articles/development/javascript/jquery/jquery-mobile-what-can-it-do-for-you/themes.jpg';
  
      try {
          if (localStorage.imageURL == undefined || localStorage.imageURL.length == 0 || localStorage.imageURL == "undefined") {
              Notify(22);
          }
          else {
              var source = localStorage.imageURL;
              $("#imgView").attr('src', source);
  
              $("#imgView").one("load", function() {
                  $("#popupBasic").popup("open");
              }).each(function() {
                  if (this.complete) {
                      $(this).load();
                  }
              });
          }
      }
      catch (err) {
          ErrorMessageDB("Issue Attachments", "btnAttViewClick", "", "click-to view attachment", err.message, localStorage.EmployeesKId4LastModifiedBy);
      }
  }
  

Here is the DEMO.