playground
/
isotope
mirror of https://github.com/metafizzy/isotope
1
0
Fork 0
Code Issues Releases Activity
Browse Source

fix sandbox examples; update README code 

Ref #775
pull/931/head
David DeSandro 10 years ago
parent
4298d6698d
commit
06b26b2f14
6 changed files with 37 additions and 26 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 25
      README.mdown
  2. 22
      sandbox/bottom-up.html
  3. 3
      sandbox/combination-filters-inclusive.html
  4. 6
      sandbox/combination-filters.html
  5. 2
      sandbox/sorting.html
  6. 5
      sandbox/transition-bug.html

25
README.mdown
Unescape View File

@ -41,40 +41,41 @@ If you are creating an open source application under a license compatible with t
## Initialize
### In JavaScript
With jQuery
``` js
// jQuery
$('#container').isotope({
$('.grid').isotope({
// options...
itemSelector: '.item',
itemSelector: '.grid-item',
masonry: {
columnWidth: 200
}
});
```
With vanilla JavaScript
``` js
// vanilla JS
var container = document.querySelector('#container');
var iso = new Isotope( container, {
var grid = document.querySelector('.grid');
var iso = new Isotope( grid, {
// options...
itemSelector: '.item',
itemSelector: '.grid-item',
masonry: {
columnWidth: 200
}
});
```
### In HTML
With HTML
Add a class of `js-isotope` to your element. Options can be set in JSON in `data-isotope-options`.
``` html
<div id="container" class="js-isotope"
data-isotope-options='{ "itemSelector": ".item", "masonry": { "columnWidth": 200 } }'>
<div class="item"></div>
<div class="item"></div>
<div class="grid js-isotope"
data-isotope-options='{ "itemSelector": ".grid-item", "masonry": { "columnWidth": 200 } }'>
<div class="grid-item"></div>
<div class="grid-item"></div>
...
</div>
```

22
sandbox/bottom-up.html
Unescape View File

@ -78,7 +78,6 @@
<div class="item"></div>
</div>
<script src="../bower_components/classie/classie.js"></script>
<script src="../bower_components/eventEmitter/EventEmitter.js"></script>
<script src="../bower_components/eventEmitter/EventEmitter.min.js"></script>
<script src="../bower_components/eventie/eventie.js"></script>
@ -90,26 +89,35 @@
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
<script src="../bower_components/outlayer/item.js"></script>
<script src="../bower_components/outlayer/outlayer.js"></script>
<script src="../bower_components/masonry/masonry.js"></script>
<script src="../masonry.js"></script>
<script src="../js/item.js"></script>
<script src="../js/layout-mode.js"></script>
<script src="../js/isotope.js"></script>
<script src="../js/layout-modes/masonry.js"></script>
<script src="../js/layout-modes/fit-rows.js"></script>
<script>
docReady( function() {
( function() {
var container = document.querySelector('#basic');
var msnry = new Masonry( container, {
var iso = new Isotope( container, {
isOriginTop: false,
columnWidth: 60
masonry: {
columnWidth: 60
}
});
})();
( function() {
var container = document.querySelector('#stamped');
var msnry = new Masonry( container, {
var iso = new Isotope( container, {
itemSelector: '.item',
isOriginTop: false,
columnWidth: 60,
gutter: 10,
masonry: {
columnWidth: 60,
gutter: 10,
},
stamp: '.stamp'
});
})();

3
sandbox/combination-filters-inclusive.html
Unescape View File

@ -196,7 +196,8 @@
</div>
<script src="../bower_components/jquery/jquery.js"></script>
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/eventEmitter/EventEmitter.js"></script>
<script src="../bower_components/eventie/eventie.js"></script>
<script src="../bower_components/doc-ready/doc-ready.js"></script>

6
sandbox/combination-filters.html
Unescape View File

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<title>masonry</title>
<title>combination filters</title>
<link rel="stylesheet" href="sandbox.css" />
<style>
@ -196,7 +196,8 @@
</div>
<script src="../bower_components/jquery/jquery.js"></script>
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/eventEmitter/EventEmitter.js"></script>
<script src="../bower_components/eventie/eventie.js"></script>
<script src="../bower_components/doc-ready/doc-ready.js"></script>
@ -204,6 +205,7 @@
<script src="../bower_components/get-size/get-size.js"></script>
<script src="../bower_components/jquery-bridget/jquery.bridget.js"></script>
<script src="../bower_components/matches-selector/matches-selector.js"></script>
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
<script src="../bower_components/outlayer/item.js"></script>
<script src="../bower_components/outlayer/outlayer.js"></script>
<script src="../bower_components/masonry/masonry.js"></script>

2
sandbox/sorting.html
Unescape View File

@ -143,9 +143,9 @@
<script src="../bower_components/outlayer/item.js"></script>
<script src="../bower_components/outlayer/outlayer.js"></script>
<script src="../js/layout-mode.js"></script>
<script src="../js/item.js"></script>
<script src="../js/isotope.js"></script>
<script src="../js/layout-mode.js"></script>
<script src="../js/layout-modes/fit-rows.js"></script>
<script>

5
sandbox/transition-bug.html
Unescape View File

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<title>filter sort</title>
<title>transition bug</title>
<link rel="stylesheet" href="sandbox.css" />
<style>
@ -12,7 +12,7 @@
</head>
<body>
<h1>filter sort</h1>
<h1>transition bug</h1>
<div>
<button id="bug-me">Bug me</button>
@ -50,7 +50,6 @@
<script src="../js/layout-mode.js"></script>
<script src="../js/isotope.js"></script>
<script src="../js/layout-modes/fit-rows.js"></script>
<script src="../js/layout-modes/cells-by-row.js"></script>
<script src="../js/layout-modes/vertical.js"></script>
<script>

Write Preview
Loading…
Cancel
Save