Question

我正在使用Featherlite作为我的灯箱而我的问题是，我有很多图像（缩略图）加载到我的页面上，当它加载时我单击其中一个加载的图像，灯箱没有不行。因此，它将转到另一页上的jpeg文件而不是模态窗口。

即使所有图像都已加载，我怎样才能制作我的灯箱。顺便说一下，我把它放在我的WordPress上，但我不想使用插件。我也在使用FoundationPress。

以下是我用来启动灯箱的代码

$(document).ready(function(){
  $('a.gallery').featherlight({
    targetAttr: 'href'
  });
});

我有图片加载脚本，但我在我的砌体上使用它。如何将灯箱脚本放在图片加载的插件中？

(function() {

// Main content container
var $container = $('.grid');

var $grid = $('.grid').masonry({
  // options
  columnWidth: '.grid-sizer',
  itemSelector: '.grid-item',
  percentPosition: true

});

// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
  $grid.masonry('layout');
});

// Infinite Scroll
$container.infinitescroll({

    navSelector  : '.pagination',    // selector for the paged navigation 
    nextSelector : '.pagination a.next',  // selector for the NEXT link (to page 2)
    itemSelector : '.grid-item',     // selector for all items you'll retrieve
    loading: {
            msg: null,
            msgText: '<i class="fa fa-circle-o-notch fa-spin"></i>',
            finishedMsg: '<i class="fa fa-check"></i>',
            img: null
      }
    },


    // Trigger Masonry as a callback
    function( newElements ) {
        // hide new items while they are loading
        var $newElems = $( newElements ).css({ opacity: 0 });
        // ensure that images load before adding to masonry layout
        $newElems.imagesLoaded(function(){
            // show elems now they're ready
            $newElems.animate({ opacity: 1 });
            $container.masonry( 'appended', $newElems, true );
        });

});

})();

Answer 1

我不确定我是否理解你想要的解决方案，但你可以使用

https://github.com/desandro/imagesloaded

专门针对砌体插件布局等用例而制作，检查所有图像是否已完成加载，然后执行函数/其他脚本。

例如：

$('#your-container').imagesLoaded( {
  },
  function() {
    $('a.gallery').featherlight({
      targetAttr: 'href'
    });
  }
);

希望这有点帮助？

在加载所有图像之前，使灯箱工作

1 个答案: