使用 JS 调整 WordPress Jetpack Tiled Gallery 的大小

Question

在我的 WordPress 主题上，我有一个隐藏的 div，里面有一个 Jetpack 画廊。我有一个按钮，单击该按钮时使用 jquery 的 .slideDown() 使 div 出现。 div 内的喷气背包画廊仅以 100 像素宽显示，不会填充 div 内的 space。但是，当我调整 window 的大小时，图库会立即填充 div 中的 space，就像它应该的那样。

我将 div 设置为 display: block; 并且显示正确，但是当 div 设置为 display:none; 并使用 jquery 显示时的 .slideDown() 它只有 100px 宽。

有没有我可以调用按钮的 .click() 事件的 js 函数，它可以触发 Jetpack Gallery 将大小调整为 div？它似乎在 windows 调整大小时调整大小，所以我认为必须有一种方法可以在 .slideDown() 完成时调整它的大小。

HTML

<div id="container">
[gallery]
</div>

<button id="btn">Show</button>

CSS

#container { 
  display:none; 
  width:100%;
  height: auto;
}

JS

    $('#btn').click(function(e) {
        $('#container').slideDown();
    });

Answer 1

我解决这个问题的方法是

$('#btn').click(function(e) {
    $('#container').slideDown();
    $('.tiled-gallery').resize();
});

.tiled-gallery 是由 jetpack 创建的 div 包裹画廊

使用 JS 调整 WordPress Jetpack Tiled Gallery 的大小

Resizing WordPress Jetpack Tiled Gallery with JS

wordpress

jquery

jetpack