2

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?

EternalHour
  • 8,308
  • 6
  • 38
  • 57
gamer
  • 23
  • 4

1 Answers1

6

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();
Rohit Batra
  • 674
  • 4
  • 18
  • $("#AjaxPhoto").data('fotorama').destroy(); $("#AjaxPhoto").empty(); $('.fotorama').fotorama(); I try this but stil failure – gamer Apr 08 '15 at 04:30
  • please can you share the worked code, with us. thanks – Po Po Aug 03 '17 at 20:24
  • @PoPo the above code is working. If you've any problem different than this, then post a Question I will surely try to help you. – Rohit Batra Aug 04 '17 at 15:22