fotorama slider: slier not working after updating the images via ajax

Question

   <script src="includes/fotorama.js"></script>
   <div id="fotorama" class="fotorama"> 
<img  src="images/6.jpg"/>
<img  src="images/7.jpg"/>
<img  src="images/8.jpg"/>
  </div>

This works fine in the begining. Once i update the images via ajax call , Slider does not work.. Please help ..

Answer 1

This is a bad way to update the images in the fotorama. Still you can make it work by altering your onreadystatechange function:

function fun (str) {
  var xmlhttp;
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
  } else {
    // code for IE6, IE5
    xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
  }
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      var $fotorama = $('#fotorama'),
          api = $fotorama.data('fotorama');
      if ($fotorama[0] && api) {
        api.destroy(); // destroy previous instance
        $fotorama[0].innerHTML = xmlhttp.responseText;
        $fotorama.fotorama(); // make new one
      }
    }
  };
  xmlhttp.open('GET', "<?php echo site_url();?>home/s?regid=" + str, true);
  xmlhttp.send();
}

A “good” way is to use the methods of the Fotorama API, load and push for example:

// Get access to the API
var fotorama = $('#gallery-id').data('fotorama');

// Overwirte all the photos
fotorama.load([
  {img: '1.jpg', thumb: '1-thumb.jpg'},
  {img: '2.jpg', thumb: '2-thumb.jpg'},
  {img: '3.jpg', thumb: '3-thumb.jpg'}
]);

// Or push one to the end
fotorama.push({img: '4.jpg', thumb: '4-thumb.jpg'});

The image object may look like so:

{
  img: '1.jpg',
  thumb: '1-thumb.jpg', // if you are using the `nav:'thumbs'` option
  full: '1-full.jpg', // separate image for the fullscreen mode
  id: 'one', // custom anchor, used with the `hash:true` option
  fit: 'cover', // override the global fit option
  caption: 'The first one'
}