Comments (3)
I'm pretty confident all this can be done with Isotope. See #28 for more details on fluid layouts.
Items 1 and 2 are implementation issues that I can take a look if you purchase a Support or Isotope Commercial License
from isotope.
Commercial License: Purchased. Now haaallp? :D
from isotope.
Take a look: http://meta.metafizzy.co/support/marktauriello.com/portfolio.html
Here's the Isotope code:
$(document).ready(function(){
var $container = $('#content');
$container.imagesLoaded(function(){
// bind isotope to window resize
$(window).smartresize(function(){
// jQuery has issues with percentage widths
// so we'll manually calulate it
var colW = Math.floor( $container.width() * 0.49 );
$container.isotope({
resizable: false,
masonry: {
columnWidth: colW
}
});
// trigger resize so isotope layout is triggered
}).smartresize();
});
// filter buttons
$('#filters a').click(function(){
var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector });
return false;
});
});
Basically, you had the right idea, but some pieces were missing. The trickiest part is seeing that I am first triggering isotope when I call .smartresize()
on the $(window)
. Also note that we're manually calculating the columnWidth.
I had to disable yox view for this demo, as it had a cross-domain request for my own demo. It might be another issue when you enabled it on your side.
If you'd like to follow up but keep this discussion private, please use the email that was provided with the support license.
from isotope.
Related Issues (20)
- Gutter works for columns not rows HOT 1
- error in docs example HOT 1
- filtering twice? HOT 2
- pile ties up when sorting? HOT 7
- Double loading of items when filtering or loading more HOT 1
- Using function and filter at the same time
- Strange spacing with filter active HOT 1
- Site is down HOT 1
- Images Stopped Displaying in Grid and Now in 1 Column. Should be 3 HOT 4
- Trying to filter buttons, search, and hash HOT 2
- Items get correctly displayed on 3 columns when using one filter, but get stacked on a single column if using a different filter HOT 3
- Issue with Icotope tab & Slick Slider HOT 2
- Istotope: CSS transitions/animations HOT 1
- This is a dead project, isn't it? HOT 2
- ignore
- unpkg links no longer working HOT 3
- Isotope Combination filters Dropdown HOT 1
- Sometimes load or reload causes partial or glitchy layout arrangement
- Isotope filter buttons work on localhost but won't work on hosted server HOT 5
- Hiding items until filtering HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from isotope.