3

我对 jQuery 有点陌生，但我确实了解事情是如何工作的。现在我正在使用 Isotope（流体/响应式布局）开发一个简单的页面，并成功地将Fancybox集成到其中的内容中。但问题是，每当我尝试在 Isotope 中的一个框中单击图像链接时，假设每次单击后该框都会放大，该框将关闭回其原始大小，图像覆盖在顶部整个东西。

我真的不知道如何解释它，但这是我在 jsfiddle 创建的网站示例：

1）不知何故，我设法让盒子按我想要的方式工作，所以盒子选择不是问题。但是如何单击展开框的文本/视频链接而不使框关闭回其原始大小和位置？我只希望它在我单击另一个新框时关闭。

2）而且，如果可能的话，每次单击时窗口是否可以滚动到选定的框？

我希望这不会让任何人感到困惑。提前谢谢了！:)

4

2 回答 2

1

我是新来的，所以我为缺乏彻底的回应而道歉。要获得所需的效果，您必须从展开的框中取消单击功能并选择不同的元素（也许加载它/在展开时显示它？我建议将元素放在展开的元素内。）以运行相同的效果现在绑定到扩展框。这样，该框可以与常规文本/视频/照片一起使用，您仍然可以删除展开。

于 2012-02-10T21:56:49.547 回答
1

如果您仍在寻找一个简单的变量解决方案，您可以这样做

$(function () {

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

    $container.delay(2500).show().css({
        opacity: 0
    }).animate({
        opacity: 1
    }, 2500).isotope({
        itemSelector: '.element',
        masonry: {
            columnWidth: 288
        },
        getSortData: {
            selected: function ($item) {
                return ($item.hasClass('clicked') ? -1000 : 0) + $item.index();
            }
        },
        sortBy: 'selected'

    });

    $('.maximised, .medium').hide();

    $('.display1, .display2').click(function () {
        var $this = $(this);
        bSelector = $this.hasClass('display1') ? '.maximised' : '.medium';

        var $previousSelected = $('.clicked');
        if (!$this.hasClass('clicked')) {
            $this.addClass('clicked');
            $previousSelected.find('.minimised').toggle();
            $previousSelected.find('.maximised').toggle();
            $previousSelected.find('.medium').toggle();
        }

        $previousSelected.removeClass('clicked');

        $this.find('.minimised').toggle();
        $this.find(bSelector).toggle();

        $container.isotope('updateSortData', $this).isotope('updateSortData', $previousSelected).isotope();
    });

});

可能仍然可以在此处找到一个工作示例。它在某些元素中具有链接和模式，这些元素在初始点击时会最大化。

于 2012-07-11T09:10:05.257 回答