title: javascript or jquery opening lightbox image through ajax sending post data
body: <p>I'm struggling in putting together Ajax post request with any light box.
  Concept is that clicking a link a post request is sent to server with data containing image identifier and some sort of user validation info.
  Resulting jpg image should be shown in a responsive open source light box.
  Tried lightboxj.js and magic box without success.
  Is it possible? 
  Any example? Thanks</p>
  
  <p><strong>UPDATE 1</strong></p>
  
  <p>I'm including now some code which does half of the job: it load into a specific div (#imageHidden) the image I need (so the "POST" request is covered)</p>
  
  <pre><code>$("#testa").bind('click', function(e){
  e.stopImmediatePropagation();
  e.preventDefault();
  
  $.ajax({ 
      type: "POST",
      data       : {
       username:   username,
       password:   password,
       img:        img
      },
      url: php_url, 
      success: function(data){ //read the value and save in settings
      if (data.length&gt;0) {
                  $('#hiddenImage').html('&lt;img src="data:image/jpeg;base64,' + data + '" /&gt;'); 
                  // $.colorbox({href:"#hiddenImage"});       
      }
    });
  </code></pre>
  
  <p>I would then set this div as hidden to avoid showing it on the page (I want it to be shown in the lightbox only)...</p>
  
  <p>Now the problem is how to show this into a lightbox. Any suggestion?</p>
  
  <p>For some reason colorbox is not working in my case</p>
  
  <p>Thanks</p>
  
  <p><strong>UPDATE 2</strong></p>
  
  <p>Ok, some of sorted:</p>
  
  <ol>
  <li><p>colorbox needs the attribute inline to be true to show content of the page:</p>
  
  <pre><code>$.colorbox({inline:true, href:"#hiddenImage"});
  </code></pre></li>
  <li><p>I've put my #hiddenImage into an #hiddenDiv:</p>
  
  <pre><code>#hiddenDiv {     display: none; }
  </code></pre></li>
  </ol>
  
  <p><strong>UPDATE 3</strong></p>
  
  <p>Ok,I think it works now.
  I used colorbox as my lightbox.
  Note that #hiddenImage is the image a want to show which will be loaded inside an invisible (display:none) #hiddenDiv DIV.</p>
  
  <p>For everyone interested the final code is:</p>
  
  <pre><code>   $("#testa").bind('click', function(e){
  e.stopImmediatePropagation();
  e.preventDefault();
  
  $.ajax({ 
  type: "POST",
  data       : {
   username:   username,
   password:   password,
   img:        img
  },
  url: php_url, 
  success: function(data){ //read the value and save in settings
  if (data.length&gt;0) {
              $('#hiddenImage').html('&lt;img src="data:image/jpeg;base64,' + data + '" /&gt;'); 
              $.colorbox({inline:true, href:"#hiddenImage"});
  }
   });
   });
  </code></pre>
  
  <p>Only remaining issue seems that sometime the lightbos is empty but this gets solved if I set a timer to wait few tenths of sec before calling colorbox.</p>
  
  <p>Is there a way to ensure the code</p>
  
  <pre><code>   $('#hiddenImage').html('&lt;img src="data:image/jpeg;base64,' + data + '" /&gt;'); 
  </code></pre>
  
  <p>is fully executed before calling colorbox (apart the ugly settimeout option) ?</p>