2016-03-29 8 views
0
私は、AJAXリクエストから
私のhtmlページ内の特定の場所でFeatherlightで画像を開きたい

ajaxリクエストからfeatherlightライトボックスに画像を表示するにはどうすればいいですか?

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

誰かがこのコードの王のための構文を知っていますか?

私は多くの、多くのテストを試して、誰も動作していません。私は何かが恋しいです。 私の構文は正しいものではなく、私は への道を見つけることができません。

私のタグに何か問題があります。どうすればよいでしょうか。 jQuery側でHTML部分を一緒にバインドします。テスト目的のために

私はきれいなJPEGファイルを返すtemporaly $に.get(「のJS/picture.jpg」、機能(データ) 魔女を使用しています。私は、このタイプのコードの例を見つけることができる場所

誰もが知っていますか?

おかげ

答えて

0
//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

関連する問題