3

I'm kinda new to jQuery but I do get the basic idea how things work. Now I'm currently using Isotope (fluid/responsive layout) to develop a simple page and has managed to successfully integrate Fancybox into the contents in it. But the problem is, whenever I try to click on a an image link in one of my boxes in Isotope, assuming that the box will enlarge after every click, the box will close back to it's original size, with the image overlayed on top on the whole thing.

I don't really know how to explain it but here's the website sample that I've created in jsfiddle :

1) Somehow I managed to get the boxes to work the way I want so boxes selection isn't a problem. But how to click on the text/video link of an expanded box without the box closing back to it's original size and position? I only want it to close when I click on another new box.

2) And also, if possible, can the window scroll to to the selected box every time it is clicked?

I hope it's not too confusing to anyone. Many thanks in advance! :)

Mynt Morgan
  • 31
  • 1
  • 2
  • See http://stackoverflow.com/a/11617391/963514 for a solution that makes an expanded Isotope element stay open - ready to receive click events on inner elements (links, slideshow pagers, videos, etc.) which won't bubble up to the parent (Isotope element) and close it. This way, you can make any inner element of an Isotope element a separate "maximiser/minimiser". – Systembolaget Jul 23 '12 at 21:23

2 Answers2

1

If you're still looking for a simple variable solution, you can do it like so

$(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();
    });

});

A working example might still be found here. It has links and modals in some of the elements that get maximised on initial click.

Systembolaget
  • 2,514
  • 2
  • 21
  • 37
1

I'm new here, so I apologize for a lack of a thorough response. To get the desired effect you have to unbind the click function from the expanded box and select a different element (perhaps loading it/revealing it upon expand? I would suggest putting the element inside the expanded element.) to run the same effect that is now bound to the expanded box. That way, the box can work with regular text/videos/photos and you can still remove the expand.

JJF
  • 11
  • 1