jQuery Isotope-如何在扩展的.item中禁用可点击的内容? [英] jQuery Isotope - How to disable clickable content in expanded .item?

问题描述

我正在使用jquery同位素创建一个投资组合图库，几乎所有功能都按预期工作，我唯一想更改的是打开内容的行为.现在，当您单击照片时，内容框会展开并显示带有某些文本的更大图像，问题是当您再次单击内容框(.item)时，内容会恢复为原始大小，我不希望那是因为其中一些盒子包含不止一张带有colorbox的图像.

I'm using jquery Isotope to create a portfolio gallery, almost everything is working as expected the only thing I would like to change is the behavior of the opened content. Now when you click over a photo the content box expands and reveal a bigger image with some text, the problem is that when you click again on the content box (.item) the content goes back to it's original size and I don't want that because some of the box contains more than one image with colorbox.

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

The best solution would be to add a close button on the 'large' container instead of using the whole box area, but that's proving to be more than I can handle.

这是我用来控制盒子大小并单击检测的代码:

Here is the code I'm using to control the boxes sizes and click detection:

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

有什么主意，如何在单击时停止关闭大"框并添加一个用于关闭它的按钮，而不是整个框?

Any idea how can I stop the 'large' box from closing when clicked and add a button for closing it instead of the whole box?

提前谢谢！

推荐答案

好吧，我终于完成了这项工作，因此我将分享对代码所做的更改.可能不是最好的，但是它起作用了.这可能对某人有用，所以请继续.

Well, I finally got this working so I will share the changes I did to my code; probably not the finest but it worked. It may be useful for someone so here you go.

这段代码将框缩小到原始大小:

This piece of code was shrinking the box to it's original size:

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');

经过几天的苦苦挣扎，我将代码更改为以下内容:

After a few days strugling I changed this code for the following:

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

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

Now once the .item expands to the .item.large it will not resize until you click on another .item, no matter how many times you click on the large box it will remain the same! So now I can add several images to one box and use Lightbox or Colorbox to open them without my isotope .item.large shrinking down! :D

这篇关于jQuery Isotope-如何在扩展的.item中禁用可点击的内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！