Fotorama：我应该如何初始化动态创建的Fotorama？

Question

我希望在我的项目中使用Fotorama。但我的项目使用AngularJS加载包含

的局部视图

<div class="fotorama">
<img src="1.jpg"><img src="2.jpg"><img src="3.jpg">
</div>

但由于html是通过AJAX加载的，因此无法初始化fotorama。

在这种情况下我应该如何加载Fotorama？

问题是我认为类似于动态创建的元素处理事件。例如，

<div class="myImg">Some Img</div>

你写的，

$('.myImg').on('click', function() {
    alert('Clicked');
});

如果动态创建div，则不会触发警报。但以下情况可行：

$(document).on('click', '.myImg', function() {
    alert('Clicked');
});

我认为同样的情况对于fotorama来说也是如此。那么对于Fotorama的案例我应该怎么做呢？

非常感谢。

Answer 1

您可以查看官方文档：http://fotorama.io/customize/api/ 或者使用角度包装器之一：https://github.com/tamtakoe/ap.fotorama 可能你必须从HTML块解析图像，或者重新设计它（通过AJAX发送HTML不是好方法）来发送JSON。像这样：

$('.fotorama').fotorama({
    data: [
      {img: '1.jpg', thumb: '1-thumb.jpg'},
      {img: '2.jpg', thumb: '2-thumb.jpg'}
    ]
});

或者像这样（将修改现有的fotorama实例）：

fotorama.load([
  {img: '1.jpg', thumb: '1-thumb.jpg'},
  {img: '2.jpg', thumb: '2-thumb.jpg'}
]);

<强> PS 如果要动态创建DOM元素，则应在将事件侦听器添加到文档后添加它们。例如

$.get({/* url, etc */})
  .success(plainHtml) {
    $('el').append(plainHtml)
    $('selector').on('click', onClickCallback)
  })

此外，您可以手动初始化DOM元素上的fotorama：$（'。fotorama'）。fotorama（）。当然，在onSuccess回调中。实际上，你不应该在AngularJs项目中使用jQuery。