ajax - 同位素 jQuery 库的 Minima.pl 实现？

Question

我不明白的一件事是 Minima.pl (http://minima.pl/pl) 是如何在 Isotope 库中实现该功能的，其中单击缩略图会打开更大的图像库（单个可单击图像，单击它使它在画廊中的其余图像中循环）同时使用同位素项目？

这是我走了多远-> http://tinyurl.com/cr5kzml

任何人对我所缺少的东西有任何想法，我该如何让它工作？

Answer 1

好吧，我是 minima.pl 网站的作者 ;)。

放大后负责重新定位瓷砖的部分单击一个：

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

它还负责将浏览器窗口滚动到单击磁贴的顶部。

在加载点击的磁贴内容（通过 AJAX）后，我触发了上述操作。诀窍是在放大点击的图块的同时触发它。

我很乐意回答任何其他问题。

Answer 2

通过单击缩略图，ajax 函数返回相同的画廊，但缩略图的替换更大。然后让同位素重新排列画廊。您可以在此处找到示例：http: //www.maxmedia.com或http://www.phpdevpad.de（我自己的站点）。

Answer 3

实际上，这很容易实现。通常，单击一个同位素 .item 可以将其最大化，再次单击可以将其最小化。如果您想在单击的同位素 .item 中进行交互，您只需不将最小化功能附加到它。相反，单击另一个同位素 .item 会最小化先前选择的 = 最大化的项目。通过跟踪先前选择的 .item，在最大化的 .item 内单击不会关闭它。仅通过单击每个同位素 .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 内部的实际交互性可以随心所欲地编码；硬编码或动态...