title: Phonegap: Display Multiple Images from Phone Album
body: <p>I am trying to make use of the phonegap(cordova) function to display photos from the users album within a very simple app.</p>
  
  <p>The way it is working so far is that the user can pick a photo from the album, which then is displayed. </p>
  
  <p>What I want to achieve is to have another button so that the user can then add another image from his album underneath the first one (not replace the first one). Is there any way of doing this? [In </p>
  
  <p>Any help would be appreciated :)</p>
  
  <p>Here is the code without any of the design etc. </p>
  
  <pre><code>&lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;script src="phonegap.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" charset="utf-8"&gt;
   var pictureSource; // picture source
   var destinationType; // sets the format of returned value 
  
   // Wait for Cordova to connect with the device
   document.addEventListener("deviceready",onDeviceReady,false);
  
   // Cordova is ready to be used!
   function onDeviceReady() {
     pictureSource=navigator.camera.PictureSourceType;
     destinationType=navigator.camera.DestinationType;
   }
  
   // Take picture using device camera and retrieve image as base64-encoded string
   function capturePhoto() {
     navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50, allowEdit : true,
     destinationType: destinationType.DATA_URL });
   }
  
   // Called if something bad happens. 
   function onFail(message) {
     alert('Failed because: ' + message);
   }
  
   function onPhotoDataSuccess(imageData) {
     // Uncomment to view the base64 encoded image data
     // console.log(imageData);
  
     // Get image handle
     var largeImage = document.getElementById('largeImage');
  
     // Unhide image elements
     largeImage.style.display = 'block';
  
     // Show the captured photo
     // The inline CSS rules are used to resize the image
     largeImage.src = "data:image/jpeg;base64," + imageData;
   }
  
   // Called when a photo is successfully retrieved
   function onPhotoURISuccess(imageURI) {
     // Uncomment to view the image file URI 
     // console.log(imageURI);
  
     // Get image handle
     var largeImage = document.getElementById('largeImage');
  
     // Unhide image elements
     largeImage.style.display = 'block';
  
     // Show the captured photo
     // The inline CSS rules are used to resize the image
     largeImage.src = imageURI;
   }
   // A button will call this function to retrieve photos from the album
   function getPhoto(source) {
  
     // Retrieve image file location from specified source
     navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, 
       destinationType: destinationType.FILE_URI,
       sourceType: source });
   }
  &lt;/script&gt;
  
  
  &lt;link href="css/jquery.mobile-1.3.0.css" rel="stylesheet" type="text/css" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div data-role="content"&gt; 
    &lt;button data-theme="d" onclick="getPhoto(pictureSource.PHOTOLIBRARY);"&gt;Browse     Photos&lt;/button&gt; 
    &lt;img style="display:none;width:100%;" id="largeImage" src="" /&gt; &lt;br&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>