如何设置fotorama插件动态生成图片？

Question

我使用jquery，我添加了head标签

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<link  href="http://fotorama.s3.amazonaws.com/4.5.2/fotorama.css" rel="stylesheet"> 
<script src="http://fotorama.s3.amazonaws.com/4.5.2/fotorama.js"></script> 



 $(document).ready(function($)
 {


 $.get( "getonepoi",{clicked:clicked_poi}, function(data)
 {


 $( "#picture_bar" ).html(data.picture_bar);

 $('#dialog').dialog('option', 'title',   clicked_poi);
 $( "#dialog" ).dialog( "open" );



 });
 });

html

<div id="dialog" title="Basic dialog">

<div class="fotorama" id ="picture_bar"></div>
</div>

当我通过$.get为图像生成html代码并添加它时

 picture_bar='img src="http://s.fotorama.io/1.jpg">'
 $( "#picture_bar" ).html(data.picture_bar);

然后幻灯片fotorama，包含在head中的jquery插件不工作，但当我手动添加代码时，如

<div id="dialog" title="Basic dialog">
<div class="fotorama" id ="picture_bar">
img src="http://s.fotorama.io/1.jpg">
</div>
</div>

然后它就可以工作了，任何人都知道为什么在$get中添加html不想包括其他的js，css，当我点击Inspect元素它看起来都很好，这里我去掉了脚本和img标签的第一个字符，因为stackoverflow显示图像而不是代码，所以错误不是因为"<"img == img。我的问题是如何设置fotorama插件来动态生成图像，$get目前调用的是生成http://fotorama.io/set-up/代码的django view，

def get_one_poi(request):


if  "clicked" in request.GET:
    poi_name=request.GET["clicked"]
    pictures=Pic.objects.filter(poi_id=poi_name)

    picture_bar=""
    for picture in pictures:
    picture_bar+='<img src="http://127.0.0.1:8000/media/'+str(picture.picture)+'">'
    picture_bar+='<img src="http://s.fotorama.io/2.jpg">'
    print picture_bar
    response_data = {}

    response_data['picture_bar'] = picture_bar
    return HttpResponse(json.dumps(response_data), content_type="application/json")

?？?

Answer 1

请看，试着将js代码放在HTML代码的页脚中，这样就可以确保所有的DOM都准备就绪并由浏览器加载。试试这个。

$(window).load(function(){
  var picture_bar = '<img src="http://s.fotorama.io/1.jpg">';
  $( "#picture_bar" ).html(picture_bar);
});

​

希望它能帮上忙！