Fotorama: как мне инициализировать Fotorama, которая создается динамически?

Я хочу использовать 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?

Большое тебе спасибо.


angularjs fotorama
person Cheung Brian    schedule 29.07.2014    source источник
comment
ты смог ее решить?   -  person nik    schedule 26.02.2015

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете проверить официальную документацию: http://fotorama.io/customize/api/ или воспользоваться одним из угловые обертки: https://github.com/tamtakoe/ap.fotorama Возможно, вам придется анализировать изображения из фрагмента HTML или переделывать все это (отправка HTML с помощью AJAX не является хорошим подходом) для отправки 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)
  })

Кроме того, вы можете вручную инициализировать fotorama для элемента DOM: $('.fotorama').fotorama(). В обратном вызове onSuccess, конечно. На самом деле вы не должны использовать jQuery в проектах AngularJs.

person Unrealsolver    schedule 29.07.2014
comment
Действительно спасибо за ваш ответ. Я отредактировал свой вопрос. Моя проблема похоже в том, что фоторама не активируется, а не проблема с загрузкой картинки. Мне не следует использовать Fotorama с частичным представлением AngularJS, не так ли? - person Cheung Brian; 29.07.2014