Question

我使用jquery，我添加了头标记

<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，包含在头部的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元素时它看起来都很好，这里我删除了拳头charachter for script和img tag，因为stackoverflow然后显示图像而不是代码，所以错误不是因为“＆lt;”img == img。我的问题是如何设置fotorama http://fotorama.io/set-up/插件动态生成图像，$ get当前调用生成imgs代码的django视图，

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

希望它有所帮助！

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

1 个答案: