0

プロジェクトで 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 の場合、同様のことをどのようにすればよいでしょうか?

どうもありがとうございました。

4

1 に答える 1

1

公式ドキュメントを確認することができます: http://fotorama.io/customize/api/ または角度ラッパーのいずれかを使用します: https://github.com/tamtakoe/ap.fotorama おそらく、HTML チャンクから画像を解析する必要があります。 JSON を送信するようにすべてを再設計します (AJAX で HTML を送信するのは適切な方法ではありません)。このようなもの：

$('.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 に答える