javascript 或 jquery 通过 ajax 发送 post 数据打开灯箱图片

Question

我正在努力将 Ajax post 请求与任何灯箱放在一起。概念是点击 link 一个 post 请求被发送到服务器，其中包含图像标识符和某种用户验证信息的数据。生成的 jpg 图像应显示在响应式开源灯箱中。尝试了 lightboxj.js 和 magic box 都没有成功。可能吗？有什么例子吗？谢谢

更新 1

我现在包括了一些代码，它完成了一半的工作：它加载到特定的 div (#imageHidden) 我需要的图像（所以 "POST" 请求被覆盖）

$("#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"});       
    }
  });

然后我会将此 div 设置为隐藏以避免在页面上显示它（我希望它只显示在灯箱中）...

现在的问题是如何将其显示到灯箱中。有什么建议吗？

出于某种原因，colorbox 在我的案例中不起作用

谢谢

更新 2

好的，一些排序：

colorbox 需要属性 inline 为 true 才能显示页面内容：
```
$.colorbox({inline:true, href:"#hiddenImage"});
```
我已将我的#hiddenImage 放入#hiddenDiv:
```
#hiddenDiv {     display: none; }
```

更新 3

好的，我想现在可以了。我使用 colorbox 作为我的灯箱。请注意，#hiddenImage 是要显示的图像，它将加载到不可见的 (display:none) #hiddenDiv DIV.

中

对于所有感兴趣的人，最终代码是：

   $("#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"});
}
 });
 });

唯一剩下的问题似乎是有时 lightbos 是空的，但如果我设置一个定时器在调用 colorbox 之前等待零点几秒，这个问题就解决了。

有没有办法保证密码

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

在调用 colorbox 之前完全执行（除了丑陋的 settimeout 选项）？

Answer 1

下面的代码片段有点乱，但要点就在这里。

使用 Lokesh Dhakar's lightbox，您可以在页面加载后更改灯箱化 a 元素的 href。通过从 ajax 调用的回调更新它，您可以将其设置为该 ajax 调用返回的图像 url。

var ajaxDummyJpg = 'http://placehold.it/200x200';

function fireAjax() {
  $.ajax({
    method: 'GET',
    url: '#',
    complete: function (data) {
      console.log(data);
      // Replace this with actual returned image url and use success instead
      $('a').attr('href', ajaxDummyJpg);
      $('a').text('This will now point to ' + ajaxDummyJpg);
    }
  });
}

$('#fireAjax').on('click', fireAjax);

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://rawgit.com/lokesh/lightbox2/master/src/js/lightbox.js"></script>
<link rel="stylesheet" href="http://rawgit.com/lokesh/lightbox2/master/src/css/lightbox.css"/>

<button id="fireAjax">Fill Image</button>

<a href="#" data-lightbox="lightbox">This will be blank currently.</a>

Answer 2

我想我也是正确的，只有在 img 完全加载后才显示灯箱：

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"});
        });
}
});
});

javascript 或 jquery 通过 ajax 发送 post 数据打开灯箱图片

javascript or jquery opening lightbox image through ajax sending post data

html

javascript

ajax

jquery

colorbox