ajax - fotorama 滑块：通过 ajax 更新图像后，slier 不工作

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>

这在开始时效果很好。一旦我通过 ajax 调用更新图像，Slider 不起作用..请帮助..

Answer 1

这是更新 fotorama 中图像的不好方法。您仍然可以通过更改功能使其工作onreadystatechange：

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();
}

一个“好”的方法是使用 Fotorama API 的方法，load例如push：

// 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'});

图像对象可能如下所示：

{
  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'
}