0

我是网络开发的新手。我正在尝试使用同位素和infiniteScroll.js 插件和lightGallery.js 来创建一个画廊。lightGallery.js 不适用于我的代码。

JS

let $grid = $('.grid').isotope({
  itemSelector: 'none', // select none at first
  layoutMode: 'masonry',
  masonry: {
    columnWidth: '.grid__col-sizer',
    gutter: '.grid__gutter-sizer',

  },
  percentPosition: true,
  stagger: 30,
  // nicer reveal transition
  visibleStyle: { transform: 'translateY(0)', opacity: 1 },
  hiddenStyle: { transform: 'translateY(100px)', opacity: 0 },

});

// initial items reveal
$grid.imagesLoaded( function() {
  $grid.removeClass('are-images-unloaded');
  $grid.isotope( 'option', { itemSelector: '.grid__item' });
  var $items = $grid.find('.grid__item');
  $grid.isotope( 'appended', $items );
});


// init Infinte Scroll

// get Isotope instance
let iso = $grid.data('isotope');

$grid.infiniteScroll({
  path: function() {
    return `http://localhost/galleryy/details.php?pageno=${this.pageIndex}`;
  },
  // load response as JSON
  responseBody: 'json',
  outlayer: iso,
  status: '.page-load-status',
  history: false,
});

$grid.on( 'load.infiniteScroll', function( event, body ) {
  // compile body data into HTML

  let itemsHTML = body.map( getItemHTML ).join('');
  // convert HTML string into elements
  let $items = $( itemsHTML );
  // append item elements

  $items.imagesLoaded( function() {
    $grid.append( $items ).isotope( 'appended', $items );
  })
});
$grid.on( 'append.infiniteScroll', function( event, response, path, items ) {
  $( items ).find('.lighgallery').lightGallery();
});
// load initial page
$grid.infiniteScroll('loadNextPage');

function getItemHTML({ image_name, image_title }) {
  return `<div id="gal" class="grid__item itemm" data-src=="uploads/${image_name}">
    <img src="uploads/${image_name}" alt="Photo by ${image_title}" /> </a>
    <div class="itemm__details">
    ${image_title}
    </div>
    </div>`;
};

//light gallery targeting dev by id
lightGallery(document.getElementById('gal') ,  {});

我已阅读lightGallery 文档。据说在那里初始化.lightGallery()新附加的内容。但即使我尝试附加它也不起作用。谁能告诉我如何使用 JavaScript 添加新添加的内容？任何建议都会有所帮助。

4

0 回答 0