2016-03-29 13 views
0
Ben bir ajax isteğinden
benim html sayfası içinde belirli bir yere Featherlight bir görüntüyü açmak istiyorum

:Bir ajax isteğinden tüy ışığı ışık kutusunda görüntü nasıl gösterilir?

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

Biri bu kod kral için sözdizimi biliyor?

Birçok test deneyin, hiçbiri çalışmıyor. Bir şeyi özlemeliyim. Benim sözdizim doğru olanı değil ve doğru yolu bulamıyorum.

Etiketimde bir sorun var ve HTML bölümünü jQuery tarafıyla nasıl birleştirdiğimizi biliyorum. Test amaçla

Temiz bir jpeg dosyasını dönmek temporaly $ .get ('js/resim.jpg', function (data) cadı kullanırlar. Bu tip kodu için örnek bulabileceği

bilen var mı?

Teşekkür

cevap

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

Örnek: http://codepen.io/TheEnd/pen/YWvJdb?editors=0010

İlgili konular