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
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 25
      README.mdown
  2. 16
      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 ## Initialize
### In JavaScript With jQuery
``` js ``` js
// jQuery $('.grid').isotope({
$('#container').isotope({
// options... // options...
itemSelector: '.item', itemSelector: '.grid-item',
masonry: { masonry: {
columnWidth: 200 columnWidth: 200
} }
}); });
``` ```
With vanilla JavaScript
``` js ``` js
// vanilla JS // vanilla JS
var container = document.querySelector('#container'); var grid = document.querySelector('.grid');
var iso = new Isotope( container, { var iso = new Isotope( grid, {
// options... // options...
itemSelector: '.item', itemSelector: '.grid-item',
masonry: { masonry: {
columnWidth: 200 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`. Add a class of `js-isotope` to your element. Options can be set in JSON in `data-isotope-options`.
``` html ``` html
<div id="container" class="js-isotope" <div class="grid js-isotope"
data-isotope-options='{ "itemSelector": ".item", "masonry": { "columnWidth": 200 } }'> data-isotope-options='{ "itemSelector": ".grid-item", "masonry": { "columnWidth": 200 } }'>
<div class="item"></div> <div class="grid-item"></div>
<div class="item"></div> <div class="grid-item"></div>
... ...
</div> </div>
``` ```

16
sandbox/bottom-up.html
Unescape View File

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

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

@ -196,7 +196,8 @@
</div> </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/eventEmitter/EventEmitter.js"></script>
<script src="../bower_components/eventie/eventie.js"></script> <script src="../bower_components/eventie/eventie.js"></script>
<script src="../bower_components/doc-ready/doc-ready.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> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>masonry</title> <title>combination filters</title>
<link rel="stylesheet" href="sandbox.css" /> <link rel="stylesheet" href="sandbox.css" />
<style> <style>
@ -196,7 +196,8 @@
</div> </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/eventEmitter/EventEmitter.js"></script>
<script src="../bower_components/eventie/eventie.js"></script> <script src="../bower_components/eventie/eventie.js"></script>
<script src="../bower_components/doc-ready/doc-ready.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/get-size/get-size.js"></script>
<script src="../bower_components/jquery-bridget/jquery.bridget.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/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/item.js"></script>
<script src="../bower_components/outlayer/outlayer.js"></script> <script src="../bower_components/outlayer/outlayer.js"></script>
<script src="../bower_components/masonry/masonry.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/item.js"></script>
<script src="../bower_components/outlayer/outlayer.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/item.js"></script>
<script src="../js/isotope.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 src="../js/layout-modes/fit-rows.js"></script>
<script> <script>

5
sandbox/transition-bug.html
Unescape View File

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

Write Preview
Loading…
Cancel
Save