Stack Overflow
Stack Overflow

Questions tagged [jquery-isotope]

Isotope is a client-side jQuery plugin that allows masonry-style grid and table layouts, along with data sorting and filtering, to enable dynamic relayout of elements on a page.

Isotope has similarities to Masonry and Packery; in fact, it utilizes both and adds sorting and filtering capabilities.

This library is distributed with two distinct licenses: open source (GPLv3) and commercial.

Useful Links:

1662 questions
11
votes
2 answers

jQuery Isotope - sort data by "group"

Using the Isotope plugin, I am trying to achieve a sorting system where, by clicking an item, groups are formed by positioning items of the same type after the clicked item. Isotope's sort/filter functions don't seem designed for this purpose, so…
Owen Hoskins
  • 130
  • 8
11
votes
1 answer

Lazy Load + Isotope

I've spent considerable amount of time trying to get isotope and lazy loading working together. The issue: lazy loading works if the user scrolls down, however if the user uses the filters, the items show up on top but the images will not load. Here…
David Garcia
  • 3,056
  • 18
  • 55
  • 90
11
votes
2 answers

Jquery Isotope : How to fill empty gaps?

I've tried basically every single hint / tip / advice to achieve that, but still, I got these empty ugly spaces while using Isotope. Here's a demo showing the problem I'm experiencing. You see these blanks? Is there any jquery code to make the…
Adame Doe
  • 331
  • 1
  • 3
  • 12
10
votes
3 answers

jQuery Isotope — Centered and Fluid/Responsive

I am asking a question about Isotope It is a great plugin for jQuery. I have been playing with it for a while now, but I don't know enough about javascript to combine two of the Isotope techniques, responsive Isotope and centered Isotope. I have…
davecave
  • 4,698
  • 6
  • 26
  • 32
10
votes
1 answer

How to edit / remove `show all` view in isotope library?

There are two others topics about this, but they don't help me. I have this html:
10
votes
3 answers

jQuery Isotope RTL

I'm using this code to run Isotope with RTL support $.Isotope.prototype._positionAbs = function( x, y ) { return { right: x, top: y }; }; $('.portfolio-isotope').each(function() { var layoutMode = $(this).attr('data-layoutmode'); …
lior r
  • 2,220
  • 7
  • 43
  • 80
10
votes
2 answers

Filters + Search with Isotopes Breaks Search?

I am using Isotopes (v1) and have created a search field following an example in a Pen. Initially it works, however, if I filter the Isotope gallery then the search field stops working. I believe the search function still runs just doesn't filter…
L84
  • 45,514
  • 58
  • 177
  • 257
10
votes
5 answers

Is there a way to target the first and last element in each row using jQuery isotope?

I have an masonry isotope grid that has n number of rows with two column sizes: 160px by 160px and 320px by 320px and I'd like to assign different styles to the first and last element of each row. My rows could have anywhere from 4 elements to 7…
mike
  • 2,722
  • 6
  • 31
  • 46
9
votes
3 answers

how to deal with large data sets with jquery isotope

I am planning on using the great isotope plugin for displaying a list of contacts and then allowing them to be filtered. The issue I have is that it works great for a small data set but i'm not sure the best way of scaling it up for 1000+ pieces of…
Josh
  • 6,256
  • 2
  • 37
  • 56
9
votes
1 answer

isotope - 'no results' message?

I'm using the Isotope JS plugin (v2.0.1) from Metafizzy to filter a library of publications, and I am using more than one filter (e.g. publisher and industry). Is there a way to check if my combination of filters has resulted in zero results, and…
BellamyStudio
  • 771
  • 2
  • 9
  • 22
9
votes
1 answer

ScrollReveal.js — Reveal All items on Click or Event?

Is there a way to reveal all items with scroll reveal with a click event? Perhaps a reveal all function? Problem: I am using scroll reveal as well as Isotope. The sorting functionality of isotope reacts strange with scroll reveal. When I click a…
Radmation
  • 1,486
  • 1
  • 13
  • 30
9
votes
1 answer

React components lifecycle, state and redux

I would like to use redux to store the state of my whole react application, however I am stuck with a particular case: what to do with redux when the component needs a local state, modified by lifecycle methods like componentDidUpdate or…
mguijarr
  • 7,641
  • 6
  • 45
  • 72
9
votes
3 answers

How to center items inside isotope container?

I have an isotope grid with a non fixed width and I dont know how to center the items inside the isotope container. .box{ width: 40px; height: 40px; background-color: #e74c3c; margin: 0 auto; } that css fails to center the items. here is the link…
Anfa A
  • 313
  • 2
  • 3
  • 9
9
votes
4 answers

Large Isotope Gallery is Very Slow

I have an Isotope gallery (version 2) with almost 400 elements. A typical gallery item looks like this:

H

Name

No Info…

L84
  • 45,514
  • 58
  • 177
  • 257
9
votes
3 answers

jquery Isotope option for auto height on element

So I'm using the isotope masonrylayout $('section').isotope({itemSelector:'article',layoutMode:'masonry',transformsEnabled: false, animationEngine: 'jquery',masonry:{columnWidth:8}}); The problem is that if I don't set the height for the article in…
Uffo
  • 9,628
  • 24
  • 90
  • 154
1
2
3
…
99 100