0

jquery Isotope を使用してポートフォリオ ギャラリーを作成しています。ほとんどすべてが期待どおりに機能しています。変更したいのは、開いているコンテンツの動作だけです。写真をクリックすると、コンテンツ ボックスが展開され、テキスト付きの大きな画像が表示されます。問題は、コンテンツ ボックス (.item) をもう一度クリックすると、コンテンツが元のサイズに戻ることです。これは、ボックスの一部にカラーボックス付きの複数の画像が含まれているためです。

最善の解決策は、ボックス領域全体を使用するのではなく、「大きな」コンテナーに閉じるボタンを追加することですが、それは私が処理できる以上のものであることが証明されています.

ボックスのサイズとクリック検出を制御するために使用しているコードは次のとおりです。

   $(function() {

     var $container = $('#pageWrapper'),
          $items = $('.item');

    $('#filter').find('a').click(function() {
        // get the href attribute
        var filterName = '.' + $(this).attr('href').slice(1);
        filterName = filterName === '.show-all' ? '*' : filterName;
        $container.isotope({
            filter: filterName
        });
        return false;
    });

// change size of clicked element
    $container.find('.item').live('click', function() {
        if ($(this).is('.large')) {
            jQuery('.item-content', this).fadeToggle("fast", "linear");
            jQuery('.thumb', this).fadeToggle("fast", "linear");
            jQuery('h3', this).fadeToggle("fast", "linear");
            $(this).toggleClass('large');
            $container.isotope('reLayout');
        } else {
            jQuery('.large > .item-content');
            jQuery('.large > .thumb');
            jQuery('.large > h3');
            $container.find('.large').removeClass('large');

            jQuery('.item-content', this).fadeToggle("fast", "linear");
            jQuery('.thumb', this).fadeToggle("fast", "linear");
            jQuery('h3', this).fadeToggle("fast", "linear");
            $(this).toggleClass('large');
            $container.isotope('reLayout');

        }
    });

    // switch selected class on buttons
    $('#categories').find('.option-set a').click(function() {
        var $this = $(this);

        // don't proceed if already selected
        if (!$this.hasClass('selected')) {
            $this.parents('.option-set').find('.selected').removeClass('selected');
            $this.addClass('selected');
        }

    });
    // isotope behavior
    $container.isotope({
        itemSelector: '.item',
        masonry: {
            columnWidth: 10
        },

クリックしたときに「大きな」ボックスが閉じないようにし、ボックス全体ではなく閉じるためのボタンを追加するにはどうすればよいですか?

前もって感謝します！！

4

2 に答える 2

0

さて、ようやくこれが機能するようになったので、コードに加えた変更を共有します。おそらく最高ではありませんが、うまくいきました。誰かの役に立つかもしれないので、どうぞ。

このコードは、ボックスを元のサイズに縮小していました。

if ($(this).is('.large')) {
            jQuery('.item-content', this).fadeToggle("fast", "linear");
            jQuery('.thumb', this).fadeToggle("fast", "linear");
            jQuery('h3', this).fadeToggle("fast", "linear");
            $(this).toggleClass('large');
            $container.isotope('reLayout');

数日苦労した後、このコードを次のように変更しました。

if ($(this).is('.large')) {
        jQuerycontainer.find('.large').each(function(){
        jQuery(this).toggleClass('large');  });

.item が .item.large に展開されると、別の .item をクリックするまでサイズが変更されません。大きなボックスを何度クリックしても、同じままです! これで、複数の画像を 1 つのボックスに追加し、Lightbox または Colorbox を使用して、同位体 .item.large が縮小することなくそれらを開くことができます! :D

于 2012-04-10T01:06:09.437 に答える
0

良い解決策は、これだと思います。基本的に、各 Isotope 要素内の任意の div を、クリック可能な「最大化」または「最小化」要素にすることができます。ボタン、領域、アイコン、リンクなどです。また、event.stopPropagation() などの jQuery メソッドをいじることについて心配する必要はありません。

于 2012-07-23T22:40:18.227 に答える