javascript或jquery通过ajax发送帖子数据打开灯箱图像答案

【问题标题】：javascript or jquery opening lightbox image through ajax sending post datajavascript或jquery通过ajax发送帖子数据打开灯箱图像
【发布时间】：2015-09-11 03:41:23
【问题描述】：

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

更新 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 设置为隐藏以避免在页面上显示它（我希望它只显示在灯箱中）...

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

由于某种原因，颜色框在我的情况下不起作用

谢谢

更新 2

好的，一些排序：

colorbox 需要属性 inline 为真才能显示页面内容：
```
$.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 选项）？

【问题讨论】：

你能提供代码（小提琴）和更多关于你的问题的细节吗？

标签： javascript jquery html ajax colorbox

【解决方案1】：

下面的 sn-p 有点乱，但是你如何做到这一点的要点就在那里。

使用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>

【讨论】：

感谢您的回答，但重点并没有即时更改链接。我需要将整个图像用作 data_Uri 或其他适当的图像标题。只有通过 Ajax 请求 img ref 用户名和密码提供后才能提供图像...
我看到了你的问题。尝试将链接设置为 ajax 调用的 url，如 stackoverflow.com/questions/18866447/…

【解决方案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"});
        });
}
});
});

【讨论】：