1

こんにちは、packery ライブラリを使用して、さまざまなアイテムを含むルックブックを作成しようとしています。各アイテムには、packery を使用してパックする画像の配列があります。

それぞれのコンテナー div を作成しましたが、packery は最初のコンテナーでのみ機能しているようです。誰でも私を助けることができますか？

ここに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>';
                }
         }

    ?>

以下は、非常に基本的な JavaScript です。

jQuery(document).ready(function () {

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

});

4

1 に答える 1

2

各 packery コンテナーに異なるクラス名を持たせる必要があります。次に、packery コンテナーごとに Packery クラスの新しいインスタンスを作成します。私はあなたのコードを取り、それを少しリファクタリングして、ループの最後に html がエコーするようにしました。

<?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>';
}

?>

于 2014-05-15T21:53:19.050 に答える