4

私が理解できないことの 1 つは、Minima.pl (http://minima.pl/pl) が Isotope ライブラリ内にその機能をどのように実装したかということです。サムネイルをクリックすると、画像のより大きなギャラリーが開きます (単一のクリック可能な画像、アイソトープアイテムを再利用しながら、ギャラリー内の残りの画像を循環させますか?

これが私が得た距離です-> http://tinyurl.com/cr5kzml

私が欠けているものについて何かアイデアを持っている人はいますか?どうすればこれを機能させることができますか?

4

3 に答える 3

2

さて、私はminima.plウェブサイトの作者です;）。

クリックしたタイルを拡大した後、タイルの再配置を処理する部分：

$('#mainContent').isotope('reLayout', function(){
  $('html, body').animate({scrollTop: item.offset().top - 10}, 400);
});

また、クリックされたタイルの上部にブラウザウィンドウをスクロールする処理も行います。

クリックされたタイルコンテンツを（AJAXによって）ロードした後、上記のアクションをトリガーしています。秘訣は、クリックしたタイルを拡大すると同時にトリガーすることです。

他にご不明な点がございましたら、お気軽にお問い合わせください。

于 2012-11-27T21:43:53.917 に答える
1

実際、これを達成するのは簡単です。通常、Isotope .item をクリックすると、たとえば最大化され、もう一度クリックすると最小化されます。クリックされた Isotope .item 内で対話性が必要な場合は、最小化機能をそれに関連付けないでください。代わりに、別の Isotope .item をクリックすると、以前に選択した = 最大化されたアイテムが最小化されます。以前に選択した .item を追跡することにより、最大化された .item 内をクリックしても閉じません。各 Isotope .item 内の「ヘッダー」ゾーンをクリックするだけで最大化と最小化を可能にする例の基本的なロジック:

$(document).ready(function () {

var $container = $('#container');

        $container.isotope({
            itemSelector: '.item',
                masonry: {
                columnWidth: 128 // corresponding to .item divs width relationships
                }
        });

        // $container.isotope('shuffle'); // randomise for every new visitor

        $items = $('.item'); // to reference methods on all .item divs later

        $('.header').click(function () { // instead of registering the entire .item div (default use), only its .header div (child div) receives clicks

        var $previousSelected = $('.selected'); // necessary for switching

        if ($(this).parent().hasClass('selected')) { // use $(this).parent() (not $(this)), because the .header div is a child of the .item div

            $(this).parent().removeClass('selected');
            $(this).parent().children('.maximised').hide();
            $(this).parent().children('.minimised').show();

            $items.find('.minimised, .header').removeClass('overlay'); // returns all .minimised divs to previous state after the .item is closed again

            } else {

            $previousSelected.removeClass('selected');
            $previousSelected.children('.minimised').show();
            $previousSelected.children('.maximised').hide();

            $(this).parent().addClass('selected');
            $(this).parent().children('.minimised').hide();
            $(this).parent().children('.maximised').show();

            $items.not('.selected').find('.minimised, .header').addClass('overlay'); // adds .overlay on each .item which is not currently .selected

            }

        $container.isotope('reLayout'); // comment out to mimick old masonry behaviour

        });

    });

各 Isotope .item 内の実際のインタラクティブ性は、好きなようにコーディングできます。ハードコーディングまたは動的...

于 2012-11-10T17:55:13.803 に答える
1

サムネイルをクリックすると、ajax 関数は同じギャラリーを返しますが、サムネイルの代わりに大きな画像が表示されます。次に、同位体でギャラリーを再配置します。ここで例を見つけることができます: http://www.maxmedia.comまたはhttp://www.phpdevpad.de (私のサイト)。

于 2012-11-10T12:11:42.537 に答える