Using Packery with multiple containers?

Question

Hi i'm trying to use the packery library for laying our a look book containing various items. Each item has an array of images which are using packery to pack them.

I've created container divs for each but packery only seems to be working on the first one. Can anyone help me?

Here is the HTML

<?php
    $args = array(
    'posts_per_page'   => 100);

        $posts = get_posts($args);

        if($posts)
        {
            foreach($posts as $post)
                {
                    echo '<div class="range">'; // div for each range
    ?>
                    <h1><?php the_field('range_title'); ?></h1>
                        <?php
                        $images = get_field('range_gallery');
                        if( $images ):
                        ?>
                            <div id="slider">
                                <?php foreach( $images as $image ): ?>
                                    <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
                                    <p><?php echo $image['caption']; ?></p>
                                <?php endforeach; ?>
                            </div>
                            <div id="carousel" class="packery">
                                <?php foreach( $images as $image ): ?>
                                    <div class="item" >
                                        <img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
                                    </div>
                                <?php endforeach; ?>
                            </div>
                        <?php endif;?>
                    <?php echo '</div>';
                }
         }

    ?>

Here is the very basic javascript:

jQuery(document).ready(function () {

var container = document.querySelector('.packery');
var pckry = new Packery( container, {
  // options
  itemSelector: '.item',
  gutter: 10
});

});

Answer 1

You need to have each packery container have different class names. and then create a new instance of the Packery class for each packery container. I have taken your code and refactored it a bit so the html echos at the end of the loops.

<?php
$args = array('posts_per_page' => 100);
$posts = get_posts($args);
if($posts){
    $html = '';
    $script = '';
    foreach($posts as $key => $post){
        $html .= '<div class="range">'; // div for each range
        $html .= '<h1>'.get_field('range_title').'</h1>';
        $images = get_field('range_gallery');
            if( $images ){                
                $html .= '<div id="slider">';
                foreach( $images as $image ){
                    $html .= '<img src="'.$image['url'].'" alt="'.$image['alt'].'" />';
                    $html .= '<p>'.$image['caption'].'</p>';
                }
                $html .= '</div>';
                $html .= '<div id="carousel" class="packery'.$key.'">';
                foreach( $images as $image ){
                    $html .= '<div class="item" >';
                    $html .= '<img src="'.$image['sizes']['thumbnail'].'" alt="'.$image['alt'].'" />';
                    $html .= '</div>';
                }
                $html .= '</div>';
            }
        $html .= '</div>';
        $script .= "jQuery(document).ready(function () { 
                var container".$key." = document.querySelector('.packery".$key."');
                var pckry = new Packery( container".$key.", {
                    // options
                    itemSelector: '.item',
                    gutter: 10
                });
            });";
    }
    echo $html;
    echo '<script>'.$script.'</script>';
}

?>