0

我正在使用 jquery Isotope 创建一个投资组合画廊，几乎一切都按预期工作，我唯一想改变的是打开内容的行为。现在，当您单击照片时，内容框会展开并显示带有一些文本的更大图像，问题是当您再次单击内容框（.item）时，内容会恢复到原始大小，我不想要那是因为一些盒子包含不止一个带有颜色框的图像。

最好的解决方案是在“大”容器上添加一个关闭按钮，而不是使用整个盒子区域，但事实证明这超出了我的处理能力。

这是我用来控制框大小和点击检测的代码：

   $(function() {

     var $container = $('#pageWrapper'),
          $items = $('.item');

    $('#filter').find('a').click(function() {
        // get the href attribute
        var filterName = '.' + $(this).attr('href').slice(1);
        filterName = filterName === '.show-all' ? '*' : filterName;
        $container.isotope({
            filter: filterName
        });
        return false;
    });

// change size of clicked element
    $container.find('.item').live('click', function() {
        if ($(this).is('.large')) {
            jQuery('.item-content', this).fadeToggle("fast", "linear");
            jQuery('.thumb', this).fadeToggle("fast", "linear");
            jQuery('h3', this).fadeToggle("fast", "linear");
            $(this).toggleClass('large');
            $container.isotope('reLayout');
        } else {
            jQuery('.large > .item-content');
            jQuery('.large > .thumb');
            jQuery('.large > h3');
            $container.find('.large').removeClass('large');

            jQuery('.item-content', this).fadeToggle("fast", "linear");
            jQuery('.thumb', this).fadeToggle("fast", "linear");
            jQuery('h3', this).fadeToggle("fast", "linear");
            $(this).toggleClass('large');
            $container.isotope('reLayout');

        }
    });

    // switch selected class on buttons
    $('#categories').find('.option-set a').click(function() {
        var $this = $(this);

        // don't proceed if already selected
        if (!$this.hasClass('selected')) {
            $this.parents('.option-set').find('.selected').removeClass('selected');
            $this.addClass('selected');
        }

    });
    // isotope behavior
    $container.isotope({
        itemSelector: '.item',
        masonry: {
            columnWidth: 10
        },

知道如何在单击时阻止“大”框关闭并添加一个按钮来关闭它而不是整个框吗？

提前致谢！！

4

2 回答 2

0

好吧，我终于完成了这项工作，所以我将分享我对代码所做的更改；可能不是最好的，但它有效。它可能对某人有用，所以你去吧。

这段代码将盒子缩小到原来的大小：

if ($(this).is('.large')) {
            jQuery('.item-content', this).fadeToggle("fast", "linear");
            jQuery('.thumb', this).fadeToggle("fast", "linear");
            jQuery('h3', this).fadeToggle("fast", "linear");
            $(this).toggleClass('large');
            $container.isotope('reLayout');

经过几天的努力，我将此代码更改为以下内容：

if ($(this).is('.large')) {
        jQuerycontainer.find('.large').each(function(){
        jQuery(this).toggleClass('large');  });

现在，一旦 .item 扩展为 .item.large，它不会调整大小，直到您单击另一个 .item，无论您单击大框多少次，它都将保持不变！所以现在我可以将多张图片添加到一个盒子中，然后使用 Lightbox 或 Colorbox 打开它们，而我的同位素 .item.large 不会缩小！:D

于 2012-04-10T01:06:09.437 回答
0

我认为这是一个很好的解决方案。基本上，您可以使每个同位素元素内的任何 div 成为可点击的“最大化”或“最小化”元素；比如一个按钮、一个区域、一个图标、一个链接等等。而且，您不必担心会摆弄像 event.stopPropagation() 这样的 jQuery 方法。

于 2012-07-23T22:40:18.227 回答