Question

我想在中的特定地方用Featherlight打开图像来自ajax请求的html页面：

<html>  
    <head>  
        <title>Search</title>  
        <meta charset="utf-8" />  
        <script src="js/jquery-1.11.3.min.js"></script>  
    </head>  
        <body>  
                <ol>  
                    <li class item >  
                        **<div id="mylightbox">This div will be opened in a lightbox</div>**  
                    </li>  
                </ol>   
        <script src="//cdn.rawgit.com/noelboss/featherlight/1.4.0/release/featherlight.min.js"  
        type="text/javascript" charset="utf-8"></script>
        </body>  
</html>





function ShowPicture()  
{
    $('div#message').html("");  
    $.post('ajax/photo.php', {  
        dataType:'binary',  
        func: "getAffichePhoto"  
    },   
    function(return_data)  
    {  
        $.get('js/picture.jpg', function(data) {  
            **$('div#mylightbox').featherlight(data);**      
        });      
    }, "json" );  
}

有人知道这个代码之王的语法吗？

我尝试了很多很多测试，没有人工作。我必须错过一些东西。我的语法不正确，我无法找到方法做对了。

我的标签有问题，我知道怎么做将HTML部分与jQuery端绑定在一起。

出于测试目的，我暂时使用$ .get（＆＃39; js / picture.jpg＆＃39;，功能（数据）女巫返回一个干净的jpeg文件。

有人知道我在哪里可以找到这种类型代码的例子吗？

谢谢

Answer 1

//Initially disable featherlight
$.featherlight.autoBind = false;


$(document).ready(function(){

var $elem = $('div#mylightbox');
var url = '';

  $.ajax({
    type : "GET",
    url : url,            
    dataType: 'json',
    success : function (data) {
      //setDataAttribute after Ajax Success 
      myFunction(data, $elem);
    },
    error : function (xmlHttpRequest, textStatus, errorThrown) {           
      console.log(errorThrown);
    }
  });
});

function myFunction(data, $elem){
  $elem.attr('data-featherlight', data);//here data == img.src

   //init featherlight after setting data-featherlight
  $elem.featherlight();
}

示例：http://codepen.io/TheEnd/pen/YWvJdb?editors=0010

如何在ajax请求中在featherlight灯箱中显示图像？

1 个答案: