javascript or jquery opening lightbox image through ajax sending post data

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

UPDATE 1

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)

$("#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>0) {
                $('#hiddenImage').html('<img src="data:image/jpeg;base64,' + data + '" />'); 
                // $.colorbox({href:"#hiddenImage"});       
    }
  });

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

Now the problem is how to show this into a lightbox. Any suggestion?

For some reason colorbox is not working in my case

Thanks

UPDATE 2

Ok, some of sorted:

colorbox needs the attribute inline to be true to show content of the page:
```
$.colorbox({inline:true, href:"#hiddenImage"});
```
I've put my #hiddenImage into an #hiddenDiv:
```
#hiddenDiv {     display: none; }
```

UPDATE 3

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.

For everyone interested the final code is:

   $("#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>0) {
            $('#hiddenImage').html('<img src="data:image/jpeg;base64,' + data + '" />'); 
            $.colorbox({inline:true, href:"#hiddenImage"});
}
 });
 });

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.

Is there a way to ensure the code

   $('#hiddenImage').html('<img src="data:image/jpeg;base64,' + data + '" />');

is fully executed before calling colorbox (apart the ugly settimeout option) ?

Solution

I think I got right also the lightbox show only after img is fully loaded:

HTML:

<div id="hiddenDiv"><img src="" id="hiddenImg"/></div><a href="#" id="testa">Click Here</a>

CSS:

#hiddenDiv {     display: none; }

JS:

 $("#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>0) {
        $('#hiddenImage').html('<img src="data:image/jpeg;base64,' + data + '" />'); 
        $("#hiddenImage").load(function() {
             $.colorbox({inline:true, href:"#hiddenImage"});
        });
}
});
});