Fotorama: how should I initialize Fotorama that is created dynamically? - angularjs

Question

I wish to use Fotorama in my project. But my project uses AngularJS to load the partial view which contains
<div class="fotorama">
<img src="1.jpg"><img src="2.jpg"><img src="3.jpg">
</div>
But that cannot initialize fotorama since the html is loaded via AJAX.
How should I load Fotorama under this situation?
The problem is I think similar to handling event on element created dynamically. For instance,
<div class="myImg">Some Img</div>
And you write,
$('.myImg').on('click', function() {
alert('Clicked');
});
The alert won't fire if the div is created dynamically. But the following would work:
$(document).on('click', '.myImg', function() {
alert('Clicked');
});
I think the same case is true for fotorama. So how should I do similar thing for the case of Fotorama?
Thank you very much.

Answer 1

You may check official documentation: http://fotorama.io/customize/api/
Or use one of angular wrappers: https://github.com/tamtakoe/ap.fotorama
Probably, you have to parse images from HTML chunk, or redesign it all (sending HTML by AJAX isn't good approach) to send JSON. Something like this:
$('.fotorama').fotorama({
data: [
{img: '1.jpg', thumb: '1-thumb.jpg'},
{img: '2.jpg', thumb: '2-thumb.jpg'}
]
});
Or like this (will modify existing fotorama instance):
fotorama.load([
{img: '1.jpg', thumb: '1-thumb.jpg'},
{img: '2.jpg', thumb: '2-thumb.jpg'}
]);
PS
If you going to create DOM element dynamically, you should add event listeners after it been added to document. for example
$.get({/* url, etc */})
.success(plainHtml) {
$('el').append(plainHtml)
$('selector').on('click', onClickCallback)
})
Also, you can manually initialize fotorama on the DOM element: $('.fotorama').fotorama(). In onSuccess callback, of course. Actually, you shouldn't use jQuery in AngularJs projects.