1

Web サイトにタブ付きの要素があり、各タブで jQuery Masonry スクリプトが使用されています。唯一の問題は、Masonry グリッドが最初のタブのコンテンツに対してのみ機能することですが、すべてのタブのコンテンツに対して機能する必要があります。

各タブのコンテナーの名前を変更しようとしましたが、何も機能していないようです。

ウェブサイトはこちら: http://joltentertainment.com/services-2/

これが私のコードです：

    <ul class="services-tabs">
        <li><a href="#tab1">Entertainment</a></li>
        <li><a href="#tab2">Ambiance & Décor</a></li>
        <li><a href="#tab3">Success</a></li>
        <li><a href="#tab4" class="av">A/V Rentals</a></li>
    </ul>

    <div id="services-wrap">

        <div id="tab1" class="tab">

            <div id="services-container">

                <div class="module">
                    <h3 class="service">Emcees</h3>
                    <div class="mini-gallery">
                        <div class="big-thumb"><img src="<?php bloginfo('template_url'); ?>/scripts/timthumb.php?src=http://joltentertainment.com/wp-content/gallery/the-worlds-best-prom/em1_2782_1.jpg&amp;h=172&amp;w=278&amp;zc=1"  title="" width="278" height="172" /></div>
                        <div class="med-thumb"><img src="<?php bloginfo('template_url'); ?>/scripts/timthumb.php?src=http://joltentertainment.com/wp-content/gallery/the-worlds-best-prom/em1_2443_0.jpg&amp;h=82&amp;w=188&amp;zc=1"  title="" width="188" height="82" /></div>
                        <div class="med-thumb"><img src="<?php bloginfo('template_url'); ?>/scripts/timthumb.php?src=http://joltentertainment.com/wp-content/gallery/the-worlds-best-prom/em1_2787_1.jpg&amp;h=82&amp;w=188&amp;zc=1"  title="" width="188" height="82" /></div>
                    </div>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
                    </p>
                </div>

                <div class="module">
                    <h3 class="service">Percussionists</h3>
                    <div class="mini-gallery">
                        <div class="big-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                    </div>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today. Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd!
                    </p>
                </div>

                <div class="module">
                    <h3 class="service">Elegant Event Furniture</h3>
                    <div class="mini-gallery">
                        <div class="big-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                    </div>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
                    </p>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
                    </p>
                </div>

                <div class="module">
                    <h3 class="service">Fabric Backdrops</h3>
                    <div class="mini-gallery">
                        <div class="big-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                    </div>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
                    </p>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
                    </p>
                </div>

                <div class="module">
                    <h3 class="service">Photobooths</h3>
                    <div class="mini-gallery">
                        <div class="big-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                    </div>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
                    </p>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
                    </p>
                </div>

                <div class="module">
                    <h3 class="service">Videography</h3>
                    <div class="mini-gallery">
                        <div class="big-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                    </div>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
                    </p>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
                    </p>
                </div>

                <div class="clear"></div>

            </div>

        </div>

        <div id="tab2">
            <h2 class="services">Entertainment</h2>
            <p>sdlfkjgskjfgl</p>
        </div>

        <div id="tab3">
            <h2 class="services">Entertainment</h2>
            <p>s,djghlkfg</p>
        </div>

        <div id="tab4" class="tab">

            <div id="services-container">

                <div class="module">
                    <h3 class="service">Emcees</h3>
                    <div class="mini-gallery">
                        <div class="big-thumb"><img src="<?php bloginfo('template_url'); ?>/scripts/timthumb.php?src=http://joltentertainment.com/wp-content/gallery/the-worlds-best-prom/em1_2782_1.jpg&amp;h=172&amp;w=278&amp;zc=1"  title="" width="278" height="172" /></div>
                        <div class="med-thumb"><img src="<?php bloginfo('template_url'); ?>/scripts/timthumb.php?src=http://joltentertainment.com/wp-content/gallery/the-worlds-best-prom/em1_2443_0.jpg&amp;h=82&amp;w=188&amp;zc=1"  title="" width="188" height="82" /></div>
                        <div class="med-thumb"><img src="<?php bloginfo('template_url'); ?>/scripts/timthumb.php?src=http://joltentertainment.com/wp-content/gallery/the-worlds-best-prom/em1_2787_1.jpg&amp;h=82&amp;w=188&amp;zc=1"  title="" width="188" height="82" /></div>
                    </div>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
                    </p>
                </div>

                <div class="module">
                    <h3 class="service">Percussionists</h3>
                    <div class="mini-gallery">
                        <div class="big-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                    </div>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today. Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd!
                    </p>
                </div>

                <div class="module">
                    <h3 class="service">Elegant Event Furniture</h3>
                    <div class="mini-gallery">
                        <div class="big-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                    </div>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
                    </p>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
                    </p>
                </div>

                <div class="module">
                    <h3 class="service">Fabric Backdrops</h3>
                    <div class="mini-gallery">
                        <div class="big-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                    </div>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
                    </p>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
                    </p>
                </div>

                <div class="module">
                    <h3 class="service">Photobooths</h3>
                    <div class="mini-gallery">
                        <div class="big-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                    </div>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
                    </p>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
                    </p>
                </div>

                <div class="module">
                    <h3 class="service">Videography</h3>
                    <div class="mini-gallery">
                        <div class="big-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                    </div>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
                    </p>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
                    </p>
                </div>

                <div class="clear"></div>

            </div>

        </div><!-- END TAB A/V RENTALS -->

        <script type="text/javascript">
            $(function(){
                $('#services-container').masonry({
                  itemSelector: '.module',
                });
            });

        </script>

    </div>
4

1 に答える 1

3

私も同じ問題を抱えていました。

タブでクリック イベントをリッスンし、石積み効果を起動します。

var $j = jQuery.noConflict();
    $j(document).ready(function() {
        $j('.services-tabs li a').click(function() {
            var container = $j('.mini-gallery');

            container.imagesLoaded( function(){
            container.masonry({
                itemSelector : '.small-thumb'
              });
            });
        })
});
于 2012-10-23T19:18:55.733 に答える