Search code examples
javascriptjqueryajaxfotorama

fotorama how to work with ajax

I got two problems by using ajax in fotorama

i) before ajax, my code is:

<div id="AjaxPhoto" class="fotorama" data-nav="thumbs" data-ratio="4/3"></div>

after ajax, my code is:

<div id="AjaxPhoto" class="fotorama" data-nav="thumbs" data-ratio="4/3">
  <img src="1.jpg" />
  <img src="2.jpg" />
</div>

the fotorama may work or not work in this case

ii) assume the fotorama works 'successfully', when I clear data by

$("#AjaxPhoto").empty();
$(".fotorama--hidden").remove();

and then add the other images, the fotorama is exactly not work again. Does fotorama support ajax?

Solution

  • When you clear the photos & re-add the photos you need to re-initalize the plugin again for it to work.

    $("#AjaxPhoto").empty();
$(".fotorama--hidden").remove();
// Load the new set of Photos here
// after that the below statement will re-initialize the fotorama gallery plugin
$('.fotorama').fotorama();