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

【问题标题】：How To set fotorama plugin to generate images dynamically?如何设置 fotorama 插件以动态生成图像？
【发布时间】：2014-07-30 21:09:25
【问题描述】：

我使用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然后显示图像而不是代码，因此错误不是因为“http://fotorama.io/set-up/ 插件动态生成图像，$get 当前调用 django 视图生成 imgs 代码，

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

？？？

【问题讨论】：

标签： jquery django

【解决方案1】：

请看，尝试将 js 代码放在 HTML 代码的页脚中，以确保所有 DOM 都已准备好并由浏览器加载。试试这个...

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

希望对你有帮助！

【讨论】：