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

Question

我不明白的一件事是，Minima.pl (http://minima.pl/pl)是如何在同位素库中实现这一功能的，点击缩略图可以打开一个更大的图片库(单个可点击的图片，点击它可以循环浏览图库中的其余图像)，同时重新排序同位素项目？

这是我在-> 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中的"header“区域来最大化和最小化：

$(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

        });

    });

然后，每个同位素.item中的实际交互性可以随心所欲地编码；硬编码或动态...