jquerywordpresswordpress-jetpack

Resizing WordPress Jetpack Tiled Gallery with JS

On my WordPress theme I have a hidden div with a Jetpack gallery inside of it. I have a button that when clicked makes the div appear using jquery's .slideDown(). The jetpack gallery inside the div is only showing at 100px wide and will not fill the space within the div. However, when I resize the window the gallery immediately fills the space in the div like it is suppose to.

I set the div to display: block; and it shows properly, but when the div is set to display:none; and is then shown using jquery's .slideDown() it is only 100px wide.

Is there a js function I can call on my button's .click() event that can trigger the Jetpack Gallery to resize to the div? It seems to resize when the windows resizes so I figure there must be a way to make it resize when the .slideDown() is completed.

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

  • The way I solved this is

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

    .tiled-gallery is the div created by jetpack that wraps the gallery