Question

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

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

由于某些原因，colorbox在我的情况下不起作用

由于

更新2

好的，有些是分类的：

colorbox需要内联属性才能显示页面内容：
```
$.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，您可以在页面加载后更改lightboxified href元素的a。通过从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发送帖子数据

2 个答案: