Isotope filtering does not work on jquery .click call

Question

I am using Isotope filtering on a site that I am in the process of launching and I cannot figure out why nothing happens when I click the links that are supposed to trigger the filtering.

The (test) page can be seen live here: http://www.youngandsmitten.com/pages/frontpage

I have created a jsfiddle here: http://jsfiddle.net/UeBnU/

Am I doing something wrong here? Or can it be the case that there is a conflict somewhere as I am building the site on top of the whole Shopify convolute?

Any help would be really appreciated! Thanks bunches!

The html I use is:

<div class="portfolioFilter p15">Filter: <a class="current" href="#" data-filter="*">All Designs</a> <a href="#" data-filter=".forkids">For Kids</a> <a href="#" data-filter=".animals">Animals</a> <a href="#" data-filter=".food">Food</a> <a href="#" data-filter=".objects">Objects</a></div>
<div class="portfolioContainer">
<div class="objects"><img alt="image" src="http://cdn.shopify.com/s/files/1/0231/2635/files/ZZZ_01.jpg?1869" /></div>
<div class="forkids animals"><img alt="image" src="http://cdn.shopify.com/s/files/1/0231/2635/files/ZZZ_02.jpg?1869" /></div>
<div class="food"><img alt="image" src="http://cdn.shopify.com/s/files/1/0231/2635/files/ZZZ_03.jpg?1869" /></div>
<div class="forkids animals"><img alt="image" src="http://cdn.shopify.com/s/files/1/0231/2635/files/ZZZ_04.jpg?1869" /></div>
<div class="animals objects"><img alt="image" src="http://cdn.shopify.com/s/files/1/0231/2635/files/ZZZ_05.jpg?1869" /></div>
<div class="forkids food objects"><img alt="image" src="http://cdn.shopify.com/s/files/1/0231/2635/files/ZZZ_06.jpg?1869" /></div>
<div class="food objects"><img alt="image" src="http://cdn.shopify.com/s/files/1/0231/2635/files/ZZZ_07.jpg?1869" /></div>
<div class="food"><img alt="image" src="http://cdn.shopify.com/s/files/1/0231/2635/files/ZZZ_09.jpg?1869" /></div>
</div>

The extra CSS is very basic:

.portfolioFilter { padding: 10px 0; border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; text-transform: uppercase; }
.portfolioFilter a { margin-right: 10px; color: #666; text-decoration: none; }
.portfolioFilter a:first-child { margin-left: 50px; }
.portfolioFilter a.current, a:hover { color: #e81c1c; }
.portfolioContainer img { margin: 5px; }

.isotope-item { z-index: 2; }
.isotope-hidden.isotope-item { pointer-events: none; z-index: 1; }
.isotope, .isotope .isotope-item { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; transition-duration: 0.8s; }
.isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; transition-property: height, width; }
.isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; transition-property: transform, opacity; }

The JavaScript:

  <script>
    $(window).load(function(){
        var $container = $('.portfolioContainer');
        $container.isotope({
            filter: '*',
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
        });

        $('.portfolioFilter a').click(function(){
            $('.portfolioFilter .current').removeClass('current');
            $(this).addClass('current');

            var selector = $(this).attr('data-filter');
            $container.isotope({
                filter: selector,
                animationOptions: {
                    duration: 750,
                    easing: 'linear',
                    queue: false
                }
             });
             return false;
        }); 
    });
  </script>

ahh, it is strange; [the fiddle](http://jsfiddle.net/DA3wF/116/) seems to work but on [the live page](http://www.youngandsmitten.com/pages/frontpage) i have two problems: 1) i think i need to preload the images so it loads up the correct size and 2) the links to filter still do nothing! wtf? — alexbrunner, Jun 23 '13 at 19:33
ok, the preload problem is solved - as for the other problem, i really don't know what is going wrong. anz help would be greatly appreciated! — alexbrunner, Jun 23 '13 at 19:40

score 0 · Answer 1 · answered Jun 23 '13 at 17:00

0

As I see it you copied

var selector = $(this).attr('data-filter'); $container.isotope({ filter: selector });

from the official documentation. You will have to give the Isotope items(in your case the images) that data field.

<div data-filter="whatever"> .... </div>

It then will select every attribute that has data-filter="whatever" set.

there also are pretty good jsfiddles from Desandro(the creator of isotope) just google for desandro jsfiddle. But this should give you a Idea on how filtering works in Isotope.

http://jsfiddle.net/desandro/GwBa8/

answered Jun 23 '13 at 17:00

cptnk

2,390
17
29

Could this really be the problem? The way I understand it is that when I say: `var selector = $(this).attr('data-filter'); $container.isotope({ filter: selector, });` it will take the class of the div to make the selection. But in my example (both on the live page and jsfiddle) I cannot even make a selection. The click does not fetch anything. – alexbrunner Jun 23 '13 at 18:22
your not giving the .isotope('filter') any Identifier on what to filter. Try using .isotope('filter', '.objects') etc. as for links. – cptnk Jun 23 '13 at 18:29
thanks for your help! isn't this what the `var selector = $(this).attr('data-filter');` is for? i cannot seem to get the fiddle to work this way. i will look at [this](http://jsfiddle.net/desandro/DA3wF/) now and hopefully learn something. if you have any other pointers, i'd be happy to hear them! – alexbrunner Jun 23 '13 at 18:41
did you include jQuery? Usually items selected by Isotope have the class isotope-item in them. As for the jsFiddle it is not included there. It is on you the example page thou. – cptnk Jun 23 '13 at 18:54
I had it included, yes. I have built it again from the example I linked to above and I have this now: http://jsfiddle.net/DA3wF/116/ -- it seems to work. I still don't know why my originla version would not work, but I guess I'll go with that new version now. Thanks for your comments! – alexbrunner Jun 23 '13 at 19:19
ahh, it is strange; the [fiddle](http://jsfiddle.net/DA3wF/116/) seems to work but on the [live page](http://www.youngandsmitten.com/pages/frontpage) i have two problems: 1) i think i need to preload the images so it loads up the correct size and 2) the links to filter still do nothing! wtf? – alexbrunner Jun 23 '13 at 19:32

score 0 · Accepted Answer · answered Jun 24 '13 at 18:32

0

I have found that there is actually a conflict between two javascript functions. once i omit the scripts.js that comes with the Shopify theme it works like a charm.

answered Jun 24 '13 at 18:32

alexbrunner

17
1
10

Isotope filtering does not work on jquery .click call

2 Answers2