0

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

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

但这无法初始化 fotorama，因为 html 是通过 AJAX 加载的。

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

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

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

你写，

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

如果 div 是动态创建的，则不会触发警报。但以下方法会起作用：

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

我认为对于 fotorama 也是如此。那么对于 Fotorama 的情况，我应该如何做类似的事情呢？

非常感谢。

4

1 回答 1

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。

于 2014-07-29T09:41:12.387 回答