jQuery Isotope - How to disable clickable content in expanded .item?

Question

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?

Thanks in advance!!

possible duplicate of [Jquery Isotope - Clickable content in expanded .item?](http://stackoverflow.com/questions/8876455/jquery-isotope-clickable-content-in-expanded-item) — Bo Persson, Apr 10 '12 at 19:18

score 0 · Accepted Answer · answered Apr 10 '12 at 01:06

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

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

score 0 · Answer 2 · edited May 23 '17 at 12:28

0

A good solution, I think, is this one here. Basically, you can make any div inside of each Isotope element a clickable "maximise" or "minimise" element; like a button, an area, an icon, a link or whatever. And, you don't just quite have to worry about getting into fiddling with jQuery methods like event.stopPropagation().

edited May 23 '17 at 12:28

Community

1
1

answered Jul 23 '12 at 22:40

Systembolaget

2,514
2
21
37

jQuery Isotope - How to disable clickable content in expanded .item?

2 Answers2

Linked