Ajax jQuery库的Minima.pl实现？

有一件事我不明白，Minima.pl(http://minima.pl/pl)在同位素库中实现这一功能，点击缩略图可以打开一个更大的图像库（一个可点击的图像，点击它可以循环浏览库中的其余图像），同时恢复同位素项目

这是我走了多远->

---

任何人都知道我遗漏了什么，我如何让它工作？

通过单击缩略图，ajax函数返回相同的图库，只是缩略图有一个更大的替代品。然后让我们重新安排画廊。你可以在这里找到一个例子：或者（我自己的网站）。

实际上，这很容易实现。通常情况下，点击一个同位素。例如，项目可以使其最大化，另一次点击使其最小化。如果您希望在单击的同位素项目中实现交互性，只需不将最小化功能附加到该项目即可。相反，点击另一个同位素。项目最小化之前选择的=最大化项目。通过跟踪以前选择的.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

        });

    });

---

每个同位素内的实际交互作用。然后，项目可以按您喜欢的方式进行编码；硬编码或动态…

嗯，我是minima.pl网站的作者；）

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

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

它还负责将浏览器窗口滚动到单击的平铺顶部

我在加载单击的磁贴内容（通过AJAX）后触发上述操作。诀窍是在放大单击的平铺的同时触发它

---

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

有点道理。。。问题-我可以雇佣你在我的网站上为我工作吗？这是一个非常简单的安排，我只需要模仿这种行为。如果是的话，我如何与你联系？谢谢，但是为了社区的利益，我宁愿在这个论坛上向你展示这个原则。也许明天，我可以做一个jsbin或JSFIDLE来为您解释和更新上面的答案。使用实时代码更容易演示。好吧，现在，我正试图弄清楚如何1）打开一个包含一些图像的图像库部分，2）在这样做的同时制作同位素动画，在大图像库中拖动较小的缩略图。看看我目前正在使用的代码，让我知道你是否能找出我做错了什么/遗漏了什么->你正在给你的同位素容器（在你的例子中是“网格包裹”）一个固定高度的CSS。第一次调整浏览器（如Chrome）大小时，图像无法适应如此有限的高度（380px），因此会堵塞（所有内容都显示在一条垂直线上）。在第二次和进一步调整大小时，它再次工作。现在，当您想要最大化.item时，没有足够的空间容纳它（在#容器上为380px），这会影响您的布局。你可能想看看我设置的这个演示，并从中获得一些想要的功能。嗯，我不是手动添加高度值同位素容器（#网格包装），这必须由同位素JS本身在页面加载时完成。即使看了你的例子，花了一个小时的时间，在我的演示中一点一点地实现，我也不知道在我的实现中有什么巨大的不同，以至于我甚至无法在扩展/收缩上进行重新显示，也无法修复扩展/收缩上的图像重叠。想法？我还有一些时间，我很想帮助你。我的电子邮件在我的签名中。我将尝试在稍后的幻灯片中加载其中一些图像（就像Systembolaget在其网站上实现它的方式），这样我就不需要真正的Ajax实现，但现在我不知道如何重新发布页面上的现有项目，一旦我展开/加载其中一个项目的大图像-我尝试集成你的动画部分，但它只是。。。没有发生。您必须调整整个.item元素的大小，然后应用reLayout，正如我上面引用的那样。刚刚在你的网站上测试过，效果不错。明白了！现在，为什么单击第一个项目会将所有其他项目推到一列中，而单击其他两个项目效果很好？无论单击哪个项目，我如何将最大化的项目推到最右边（占据最后3列）？将

massize:{columnWidth:180}

param添加到同位素初始化代码中，它应该可以顺利工作。这有点有效（为什么是180？）。。。但现在，当我点击第三个项目，例如，然后调整浏览器的大小，以显示4列（或更少），调整大小会在布局中创建一些空白点。。。