Question

首先，为许多代码道歉。只是不想错过任何东西。

我正在以这种格式在页面上生成图像：

<!DOCTYPE html>
  <head>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js" type="text/javascript"></script>

    <!-- photoswipe Core CSS file -->
    <link rel="stylesheet" href="assets/photoswipe/dist/photoswipe.css"> 
    <link rel="stylesheet" href="assets/photoswipe/dist/default-skin/default-skin.css"> 
  </head>

  <body>
    <div id="page">  
      <div id="thumbs" itemscope itemtype="http://schema.org/ImageGallery">
        <ul class="responsive-thumbnails" data-max-width="202px" data-padding="4px">
          <li class="thumb">
            <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
              <a href="img/pv_31.jpg" itemprop="contentUrl" data-size="600x800"><img src="img/th_31.jpg" itemprop="thumbnail" alt="" /></a>
            </figure>
          </li>

          <!-- multiple of <li> as above here for each thumbnail image -->

        </ul>
      </div>

    <div id="pagination"><!-- my codeigniter paginiation output (gets hidden by infintie scroll</div>   

    </div>

    <!-- Infinite AJAX Scroll stuff --> 
    <script type="text/javascript" src="assets/jquery-ias.min.js"></script>  

    <script type="text/javascript">
    var ias = $.ias({
      container: "#thumbs",
      item: ".thumb",
      pagination: "#pagination",
      next: ".next a"
    });

    ias.extension(new IASSpinnerExtension());
    ias.extension(new IASTriggerExtension({offset: 5}));
    ias.extension(new IASNoneLeftExtension({text: 'There are no more pages left to load.'}));
/*    //I think somehow here, I need to trigger photoswipe to add new items after IAS has added more. 
    ias.on('rendered', function(items) {
          lightBox.init();
        );
      });
*/
     </script>

     <!-- Root element of PhotoSwipe. Must have class pswp. -->
     <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
     <!-- this is where the standard photoswipe html elements are stored. Copied from their docs. Omitted here -->
     </div> 

     <!-- photoswipe Core JS file -->
     <script src="assets/photoswipe/dist/photoswipe.min.js"></script> 
     <script src="assets/photoswipe/dist/photoswipe-ui-default.min.js"></script> 
     <!-- my script to initiate Photoswipe instance (see below) -->
     <script type="text/javascript" src="assets/photoswipe.js"></script>
  </body>
</html>

photoswipe.js的内容：

(function($) {
    var $pswp = $('.pswp')[0];
    var image = [];

  $('#thumbs').each( function() {
  var $pic = $(this),
    getItems = function() {
      var items = [];
      $pic.find('a').each(function() {
        var $href   = $(this).attr('href'),
        $size   = $(this).data('size').split('x'),
        $width  = $size[0],
        $height = $size[1];

        var item = {
          src : $href,
          w   : $width,
          h   : $height
        }

        items.push(item);
      });

      return items;
    }

    var items = getItems();

    console.log(items);

    $.each(items, function(index, value) {
        image[index]     = new Image();
        image[index].src = value['src'];
      });

    $pic.on('click', 'li', function(event) {
        event.preventDefault();

        var $index = $(this).index();
        var options = {
            index: $index,
            bgOpacity: 0.7,
            showHideOpacity: true,
            showAnimationDuration: 500,
            hideAnimationDuration: 500
        }

        var lightBox = new PhotoSwipe($pswp, PhotoSwipeUI_Default, items, options);
        lightBox.init();
    });
  });
})(jQuery);

Photoswipe正在运行，但它仅适用于最初加载在页面上的第一批照片。在这种情况下，我加载20.可以点击IAS附加的任何更多图像，并打开照片扫描灯箱，但他们的预览大小的图像不会显示在灯箱中。我只是得到前20个滚动。

所以问题是，如何让photoswipe和Infinite AJAX Scroll一起工作？

Photoswipe和Infinite AJAX Scroll

0 个答案: