first import
This commit is contained in:
Bachir Soussi Chiadmi
57
sites/all/libraries/isotope-site/README.mdown
Normal file
57
sites/all/libraries/isotope-site/README.mdown
Normal file
@@ -0,0 +1,57 @@
|
||||
Isotope
|
||||
========
|
||||
|
||||
**An exquisite jQuery plugin for magical layouts. Enables filtering, sorting, and dynamic layouts.**
|
||||
|
||||
This package has all the documentation and demos to get you started.
|
||||
|
||||
View this project live at [http://isotope.metafizzy.co](http://isotope.metafizzy.co).
|
||||
|
||||
Licensing
|
||||
---------
|
||||
|
||||
**Commercial use requires purchase of one-time license fee per developer seat.** Commercial use includes any application that makes you money. This includes portfolio sites and premium templates. Commercial licenses may be purchased at [http://metafizzy.co#licenses](http://metafizzy.co#licenses).
|
||||
|
||||
Use in non-commercial and personal applications is free.
|
||||
|
||||
Viewing this project locally
|
||||
----------------------------
|
||||
|
||||
### Via download
|
||||
|
||||
You can download a zip of all the flat HTML files from [http://meta.metafizzy.co/files/isotope-site.zip](http://meta.metafizzy.co/files/isotope-site.zip).
|
||||
|
||||
### Via Jekyll
|
||||
|
||||
The documentation and demo pages are generated using [Jekyll](http://github.com/mojombo/jekyll/wiki). With Jekyll installed, you can clone this repo and run Jekyll from Terminal:
|
||||
|
||||
git clone https://github.com/desandro/isotope.git
|
||||
cd isotope/
|
||||
jekyll --server --auto
|
||||
|
||||
Then view the live site at [http://localhost:4000](http://localhost:4000).
|
||||
|
||||
Changelog
|
||||
---------
|
||||
|
||||
View the [commit history](https://github.com/desandro/isotope/commits/master/jquery.isotope.js) for a complete robust list of changes to the script.
|
||||
|
||||
+ **v1.5**
|
||||
[2011-10-19](https://github.com/desandro/isotope/commit/2c789ecb5ec#jquery.isotope.js)
|
||||
- add proper callback support that trigger after animation/transition
|
||||
+ **v1.4** [2011-06-29](https://github.com/desandro/isotope/commit/8e2f51612eaf20e3031b81b8c5ff5e322cbb7b4f#jquery.isotope.js)
|
||||
- shuffle method added
|
||||
- inserting and appending positions items then reveals them
|
||||
+ **v1.3** [2011-05-23](https://github.com/desandro/isotope/commit/a7cc0be2a0038c13a2955a889a873f63a39eb6c2#jquery.isotope.js)
|
||||
- refactor layout mode API
|
||||
- layoutModeResize -> layoutModeResizeChanged, which returns boolean
|
||||
+ **v1.2** [2011-05-13](https://github.com/desandro/isotope/commit/b3cf6139d7641f282724a7a541b3bfb10d1bbf54#jquery.isotope.js)
|
||||
- add updateOption method, for changing options after initialization
|
||||
+ **v1.1** [2011-04-26](https://github.com/desandro/isotope/commit/3c551406ee1e4cd8345cdbe589c2d8d1e164b259#jquery.isotope.js)
|
||||
- incremental additions, bug fixes, and refactorings
|
||||
+ **v1.0** [2011-02-07](https://github.com/desandro/isotope/commit/78253dfb34808d9a677ae721e97c5afc08aa19b8#jquery.isotope.js)
|
||||
- public release
|
||||
|
||||
* * *
|
||||
|
||||
Copyright (c) 2011 David DeSandro / Metafizzy LLC
|
||||
781
sites/all/libraries/isotope-site/css/style.css
Normal file
781
sites/all/libraries/isotope-site/css/style.css
Normal file
@@ -0,0 +1,781 @@
|
||||
/* Start: Recommended Isotope styles */
|
||||
|
||||
/**** Isotope Filtering ****/
|
||||
|
||||
.isotope-item {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.isotope-hidden.isotope-item {
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/**** Isotope CSS3 transitions ****/
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/**** disabling Isotope CSS3 transitions ****/
|
||||
|
||||
.isotope.no-transition,
|
||||
.isotope.no-transition .isotope-item,
|
||||
.isotope .isotope-item.no-transition {
|
||||
-webkit-transition-duration: 0s;
|
||||
-moz-transition-duration: 0s;
|
||||
transition-duration: 0s;
|
||||
}
|
||||
|
||||
/* End: Recommended Isotope styles */
|
||||
|
||||
|
||||
|
||||
/* disable CSS transitions for containers with infinite scrolling*/
|
||||
.isotope.infinite-scrolling {
|
||||
-webkit-transition: none;
|
||||
-moz-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
|
||||
/**** Base styles ****/
|
||||
|
||||
html, body, div, span, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
|
||||
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
padding: 20px;
|
||||
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;
|
||||
font-size: 13px;
|
||||
line-height: 1.7em;
|
||||
background: #1F1E1D;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
h1, h2, h3, p, ul, ol, pre, dl {
|
||||
margin-bottom: 1.0em;
|
||||
}
|
||||
|
||||
h1, h2, #super-list, .element, .tagline, #index-list,
|
||||
.super-list .link {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
|
||||
h1, h2, h3 { font-weight: bold; }
|
||||
|
||||
h1 {
|
||||
font-size: 32px;
|
||||
line-height: 1.1em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
line-height: 1.1em;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
margin-left: 1.5em;
|
||||
}
|
||||
|
||||
a,
|
||||
a code {
|
||||
color: #FB4;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:hover code {
|
||||
color: #4BF;
|
||||
}
|
||||
|
||||
a:active,
|
||||
a:active code {
|
||||
color: #1FB;
|
||||
background: black;
|
||||
}
|
||||
|
||||
a img { border: none; }
|
||||
|
||||
em { font-style: italic; }
|
||||
strong { font-weight: bold; }
|
||||
|
||||
blockquote {
|
||||
padding-left: 1.0em;
|
||||
margin-left: 1.0em;
|
||||
border-left: 1px solid #333;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/**** Isotope styles ****/
|
||||
|
||||
/* required for containers to inherit vertical size from window */
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#container {
|
||||
border: 1px solid #666;
|
||||
padding: 5px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.element {
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
margin: 5px;
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background: #888;
|
||||
color: #222;
|
||||
-webkit-border-top-right-radius: 1.2em;
|
||||
-moz-border-radius-topright: 1.2em;
|
||||
border-top-right-radius: 1.2em;
|
||||
}
|
||||
|
||||
.element.alkali { background: #F00; background: hsl( 0, 100%, 50%); }
|
||||
.element.alkaline-earth { background: #F80; background: hsl( 36, 100%, 50%); }
|
||||
.element.lanthanoid { background: #FF0; background: hsl( 72, 100%, 50%); }
|
||||
.element.actinoid { background: #0F0; background: hsl( 108, 100%, 50%); }
|
||||
.element.transition { background: #0F8; background: hsl( 144, 100%, 50%); }
|
||||
.element.post-transition { background: #0FF; background: hsl( 180, 100%, 50%); }
|
||||
.element.metalloid { background: #08F; background: hsl( 216, 100%, 50%); }
|
||||
.element.other.nonmetal { background: #00F; background: hsl( 252, 100%, 50%); }
|
||||
.element.halogen { background: #F0F; background: hsl( 288, 100%, 50%); }
|
||||
.element.noble-gas { background: #F08; background: hsl( 324, 100%, 50%); }
|
||||
|
||||
|
||||
.element * {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.element .symbol {
|
||||
left: 0.2em;
|
||||
top: 0.4em;
|
||||
font-size: 3.8em;
|
||||
line-height: 1.0em;
|
||||
color: #FFF;
|
||||
}
|
||||
.element.large .symbol {
|
||||
font-size: 4.5em;
|
||||
}
|
||||
|
||||
.element.fake .symbol {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.element .name {
|
||||
left: 0.5em;
|
||||
bottom: 1.6em;
|
||||
font-size: 1.05em;
|
||||
}
|
||||
|
||||
.element .weight {
|
||||
font-size: 0.9em;
|
||||
left: 0.5em;
|
||||
bottom: 0.5em;
|
||||
}
|
||||
|
||||
.element .number {
|
||||
font-size: 1.25em;
|
||||
font-weight: bold;
|
||||
color: hsla(0,0%,0%,.5);
|
||||
right: 0.5em;
|
||||
top: 0.5em;
|
||||
}
|
||||
|
||||
.variable-sizes .element.width2 { width: 230px; }
|
||||
|
||||
.variable-sizes .element.height2 { height: 230px; }
|
||||
|
||||
.variable-sizes .element.width2.height2 {
|
||||
font-size: 2.0em;
|
||||
}
|
||||
|
||||
.element.large,
|
||||
.variable-sizes .element.large,
|
||||
.variable-sizes .element.large.width2.height2 {
|
||||
font-size: 3.0em;
|
||||
width: 350px;
|
||||
height: 350px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.clickable .element:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.clickable .element:hover h3 {
|
||||
text-shadow:
|
||||
0 0 10px white,
|
||||
0 0 10px white
|
||||
;
|
||||
}
|
||||
|
||||
.clickable .element:hover h2 {
|
||||
color: white;
|
||||
}
|
||||
|
||||
/**** Example Options ****/
|
||||
|
||||
#options {
|
||||
padding-bottom: 1.0em;
|
||||
}
|
||||
|
||||
#options h3 {
|
||||
margin-bottom: 0.2em;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
#options h4 {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#options ul {
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#options ul ul {
|
||||
margin-left: 1.5em;
|
||||
}
|
||||
|
||||
#options li {
|
||||
float: left;
|
||||
margin-bottom: 0.2em;
|
||||
}
|
||||
|
||||
#options li a {
|
||||
display: block;
|
||||
padding: 0.4em 0.5em;
|
||||
background-color: #DDD;
|
||||
color: #222;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 1px hsla( 0, 0%, 100%, 0.5 );
|
||||
background-image: -moz-linear-gradient( -90deg,
|
||||
hsla( 0, 0%, 100%, 0.5 ) ,
|
||||
hsla( 0, 0%, 100%, 0.0 )
|
||||
);
|
||||
background-image: -webkit-gradient(linear, 0 top, 0 bottom,
|
||||
from( hsla( 0, 0%, 100%, 0.5 ) ),
|
||||
to( hsla( 0, 0%, 100%, 0.0 ) )
|
||||
);
|
||||
background-image: -o-linear-gradient( -90deg,
|
||||
hsla( 0, 0%, 100%, 0.5 ) ,
|
||||
hsla( 0, 0%, 100%, 0.0 )
|
||||
);
|
||||
}
|
||||
|
||||
#options li a:hover {
|
||||
background-color: #5BF;
|
||||
}
|
||||
|
||||
#options li a:active {
|
||||
background-color: #39D;
|
||||
-webkit-box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 );
|
||||
-moz-box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 );
|
||||
-o-box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 );
|
||||
box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 );
|
||||
}
|
||||
|
||||
#options li a {
|
||||
border-left: 1px solid hsla( 0, 0%, 100%, 0.3 );
|
||||
border-right: 1px solid hsla( 0, 0%, 0%, 0.2 );
|
||||
}
|
||||
|
||||
#options li:first-child a {
|
||||
border-radius: 7px 0 0 7px;
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
#options li:last-child a {
|
||||
border-radius: 0 7px 7px 0;
|
||||
}
|
||||
|
||||
#options li a.selected {
|
||||
background-color: #13F;
|
||||
text-shadow: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Combination filter options*/
|
||||
|
||||
#options .option-combo {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
#options .option-combo ul {
|
||||
margin-right: 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#options .option-combo h2,
|
||||
#options .option-combo h4 {
|
||||
line-height: 34px;
|
||||
margin-bottom: 0;
|
||||
margin-right: 5px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* Color shapes */
|
||||
|
||||
.color-shape {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin: 5px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.color-shape.round {
|
||||
-webkit-border-radius: 35px;
|
||||
-moz-border-radius: 35px;
|
||||
border-radius: 35px;
|
||||
}
|
||||
|
||||
.color-shape.big.round {
|
||||
-webkit-border-radius: 75px;
|
||||
-moz-border-radius: 75px;
|
||||
border-radius: 75px;
|
||||
}
|
||||
|
||||
.color-shape.red { background: red; }
|
||||
.color-shape.blue { background: blue; }
|
||||
.color-shape.yellow { background: yellow; }
|
||||
|
||||
.color-shape.wide, .color-shape.big { width: 150px; }
|
||||
.color-shape.tall, .color-shape.big { height: 150px; }
|
||||
|
||||
.color-shape a {
|
||||
display: block;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.color-shape a:hover {
|
||||
background: white;
|
||||
background: hsla( 0, 0%, 100%, 0.5 );
|
||||
}
|
||||
|
||||
/**** Horizontal ****/
|
||||
|
||||
.horizontal #container {
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
#copy {
|
||||
max-width: 640px;
|
||||
}
|
||||
|
||||
/**** Photo demo ****/
|
||||
|
||||
.photos .photo {
|
||||
width: 320px;
|
||||
margin: 5px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.photos .photo img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#content {
|
||||
margin-left: 210px;
|
||||
}
|
||||
|
||||
.demos #content {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/**** Docs ****/
|
||||
|
||||
.docs #content {
|
||||
max-width: 640px;
|
||||
}
|
||||
|
||||
.docs #content a:hover {
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
|
||||
/**** Doc page nav ****/
|
||||
|
||||
|
||||
|
||||
#site-nav {
|
||||
width: 200px;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 0px;
|
||||
padding-top: 20px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#site-nav h1 {
|
||||
font-size: 24px;
|
||||
margin-bottom: 0.5em;
|
||||
margin-top: 0;
|
||||
font-weight: bold;
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
|
||||
#site-nav h2 {
|
||||
font-size: 17px;
|
||||
font-weight: normal;
|
||||
margin: 0 0 0.3em;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
#site-nav h1 a { color: #4FB; }
|
||||
#site-nav h1 a:hover { color: #4BF; }
|
||||
|
||||
#site-nav ul {
|
||||
list-style: none;
|
||||
margin: 0 0 1.0em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#site-nav ul ul { margin-bottom: 0; }
|
||||
|
||||
#site-nav ul a {
|
||||
display: block;
|
||||
border: none;
|
||||
padding: 1px 5px;
|
||||
}
|
||||
|
||||
#site-nav ul .current a {
|
||||
background: hsla( 0, 0%, 0%, 0.3 );
|
||||
color: #1BF;
|
||||
}
|
||||
#site-nav ul a:hover,
|
||||
#site-nav ul .current a:hover { color: white; }
|
||||
|
||||
#site-nav ul .current .toc a {
|
||||
font-size: 12px;
|
||||
padding-left: 1.2em;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/**** Doc content ****/
|
||||
|
||||
.docs #content h2 {
|
||||
border-top: 1px solid #333;
|
||||
padding-top: 0.8em;
|
||||
margin-bottom: 0.8em;
|
||||
}
|
||||
|
||||
.docs #content h2:target {
|
||||
padding: 10px;
|
||||
background: white;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.docs #content h3 {
|
||||
color: #FEC;
|
||||
background: hsla( 0, 0%, 75%, 0.05 );
|
||||
padding: 2px 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
font-size: 1.15em;
|
||||
}
|
||||
|
||||
.docs #content h4 {
|
||||
margin-bottom: 0.5em;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
footer {
|
||||
font-size: 12px;
|
||||
font-style: italic;
|
||||
border-top: 1px solid #333;
|
||||
padding: 0.8em 0;
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
pre, code {
|
||||
background: black;
|
||||
color: white;
|
||||
font-family: 'Monaco', monospace, sans-serif;
|
||||
}
|
||||
|
||||
#content code {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#content pre {
|
||||
line-height: 1.6em;
|
||||
}
|
||||
|
||||
h3#options {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.option-def dl dt,
|
||||
.option-def dl dd {
|
||||
float: left;
|
||||
padding: 0 1.2em;;
|
||||
background: #161616;
|
||||
line-height: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.option-def dl.header dt,
|
||||
.option-def dl.header dd {
|
||||
background: #444;
|
||||
}
|
||||
|
||||
.option-def dl .option-type {
|
||||
font-size: 13px;
|
||||
color: #AAA;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.option-def dl dd {
|
||||
border-left: 1px solid #222;
|
||||
}
|
||||
|
||||
/* Tagline */
|
||||
|
||||
.docs .tagline {
|
||||
font-size: 22px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
/* as-is from MIT */
|
||||
|
||||
.docs .as-is {
|
||||
font-size: 95%;
|
||||
}
|
||||
|
||||
/* Commercial license blurb */
|
||||
|
||||
.docs #commercial {
|
||||
background: white;
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
color: #1F1F1D;
|
||||
}
|
||||
|
||||
.docs #commercial a { font-weight: bold;}
|
||||
|
||||
/**** Pygments ****/
|
||||
|
||||
code .s1,
|
||||
code .s { color: #78BD55; } /* string */
|
||||
code .mi, /* integer */
|
||||
code .cp, /* doctype */
|
||||
code .kc { color: #5298D4; } /*boolean*/
|
||||
code .k { color: #E39B79; } /* keyword */
|
||||
code .kd, /* storage */
|
||||
code .na { color: #A9D866; } /* markup attribute */
|
||||
code .p { color: #EDB; } /* punctuation */
|
||||
code .o { color: #F63; } /* operator */
|
||||
code .nb { color: #AA97AC;} /* support */
|
||||
|
||||
/* comment */
|
||||
code .c,
|
||||
code .c1 { color: #666; font-style: italic; }
|
||||
|
||||
code .nt { color: #A0C8FC; } /* Markup open tag */
|
||||
|
||||
code .nf { color: #9EA8B8; } /* css id */
|
||||
code .nc { color: #A78352; } /* CSS class */
|
||||
code .m { color: #DE8E50; } /* CSS value */
|
||||
code .nd { color: #9FAD7E; } /* CSS pseudo selector */
|
||||
|
||||
|
||||
|
||||
/**** Super list ****/
|
||||
|
||||
|
||||
/**** Sites using Isotope ****/
|
||||
|
||||
#sites h2 {
|
||||
display: none;
|
||||
padding: 0.4em;
|
||||
line-height: 32px;
|
||||
margin-bottom: 0.4em;
|
||||
-webkit-transition: background-color 0.8s;
|
||||
-moz-transition: background-color 0.8s;
|
||||
-o-transition: background-color 0.8s;
|
||||
transition: background-color 0.8s;
|
||||
}
|
||||
|
||||
#sites h2 img {
|
||||
display: inline-block;
|
||||
margin-right: 0.4em;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
#sites h2.loading {
|
||||
background: white;
|
||||
color: #222;
|
||||
}
|
||||
#sites h2.error {
|
||||
background: red;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
|
||||
#sites ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.super-list .example {
|
||||
list-style: none;
|
||||
float: left;
|
||||
width: 230px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.super-list .example a,
|
||||
.super-list .example b,
|
||||
.super-list .example img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.super-list .example img { width: 100%; }
|
||||
|
||||
.super-list .example a {
|
||||
background: #1F1E1D;
|
||||
}
|
||||
|
||||
.super-list .example a:hover {
|
||||
background: white;
|
||||
color: #111;
|
||||
}
|
||||
|
||||
.super-list .example b {
|
||||
font-weight: bold;
|
||||
line-height: 1.3em;
|
||||
padding: 3px;
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.super-list .link {
|
||||
float: left;
|
||||
position: relative;
|
||||
font-size: 24px;
|
||||
line-height: 1.2em;
|
||||
font-weight: 300;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.super-list .link {
|
||||
width: 230px;
|
||||
height: 110px;
|
||||
}
|
||||
|
||||
.super-list .link a {
|
||||
display: block;
|
||||
padding: 10px;
|
||||
padding-left: 65px;
|
||||
height: 90px;
|
||||
background: #1F1E1D;
|
||||
color: #FE5;
|
||||
-webkit-border-radius: 14px;
|
||||
-moz-border-radius: 14px;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.super-list .link a:before {
|
||||
content: '➔';
|
||||
font-size: 70px;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: 5px;
|
||||
-webkit-transform: rotate(90deg);
|
||||
-moz-transform: rotate(90deg);
|
||||
-ms-transform: rotate(90deg);
|
||||
-o-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.super-list .link.away a:before {
|
||||
top: 25px;
|
||||
left: 0px;
|
||||
-webkit-transform: rotate(-45deg);
|
||||
-moz-transform: rotate(-45deg);
|
||||
-ms-transform: rotate(-45deg);
|
||||
-o-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.super-list .link a:hover {
|
||||
background: #E58;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.super-list .feature .name {
|
||||
bottom: auto;
|
||||
top: 140px;
|
||||
left: 18px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/**** Infinite Scroll ****/
|
||||
|
||||
#infscr-loading {
|
||||
position: fixed;
|
||||
text-align: center;
|
||||
bottom: 30px;
|
||||
left: 42%;
|
||||
z-index: 100;
|
||||
background: white;
|
||||
background: hsla( 0, 0%, 100%, 0.9 );
|
||||
padding: 20px;
|
||||
color: #222;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
-webkit-border-radius: 10px;
|
||||
-moz-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* The Magnificent Clearfix: nicolasgallagher.com/micro-clearfix-hack/ */
|
||||
.clearfix:before, .clearfix:after { content: ""; display: table; }
|
||||
.clearfix:after { clear: both; }
|
||||
.clearfix { zoom: 1; }
|
||||
@@ -0,0 +1,903 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<title>Category rows · Isotope </title>
|
||||
|
||||
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
|
||||
<!-- scripts at bottom of page -->
|
||||
|
||||
</head>
|
||||
<body class="custom-layout-modes ">
|
||||
|
||||
<nav id="site-nav">
|
||||
<h1><a href="../index.html">Isotope</a></h1>
|
||||
|
||||
<h2>Docs</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../docs/introduction.html">Introduction</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/options.html">Options</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/methods.html">Methods</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/animating.html">Animating</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/extending-isotope.html">Extending Isotope</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/hash-history-jquery-bbq.html">Hash history with jQuery BBQ</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/help.html">Help</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/license.html">License</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Demos</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../demos/basic.html">Basic</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-complete.html">Elements Complete</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-partial.html">Elements Partial</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/relayout.html">reLayout</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/infinite-scroll.html">Infinite Scroll</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/images.html">Images</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/combination-filters.html">Combination filters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/hash-history.html">Hash history</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/fluid-responsive.html">Fluid / responsive</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Custom layout modes</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/centered-masonry.html">Centered Masonry</a>
|
||||
|
||||
|
||||
|
||||
<li class="current"><a href="#content">Category rows</a></li>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-corner-stamp.html">Masonry corner stamp</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-gutters.html">Masonry gutters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/spine-align.html">Spine align</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2><a href="../tests/index.html">Tests</a></h2>
|
||||
|
||||
</nav> <!-- #site-nav -->
|
||||
|
||||
<section id="content">
|
||||
|
||||
<h1>Category rows</h1>
|
||||
|
||||
|
||||
<section id="copy">
|
||||
<p>This demo uses a <a href="../docs/extending-isotope.html">custom layout mode</a>, <code>categoryRows</code> that arranges elements into rows based on their category. The layout mode logic relies on sorting to define rows.</p>
|
||||
</section>
|
||||
|
||||
<section id="options" class="clearfix">
|
||||
|
||||
|
||||
<h3>Filters</h3>
|
||||
|
||||
<ul id="filters" class="option-set clearfix" data-option-key="filter">
|
||||
<li><a href="#filter" data-option-value="*" class="selected">show all</a></li>
|
||||
<li><a href="#filter" data-option-value=".metal">metal</a></li>
|
||||
<li><a href="#filter" data-option-value=".transition">transition</a></li>
|
||||
<li><a href="#filter" data-option-value=".post-transition">post-transition</a></li>
|
||||
<li><a href="#filter" data-option-value=".nonmetal">nonmetal</a></li>
|
||||
<li><a href="#filter" data-option-value=".inner-transition">inner-transition</a></li>
|
||||
<li><a href="#filter" data-option-value=".alkali, .alkaline-earth">alkali and alkaline-earth</a></li>
|
||||
<li><a href="#filter" data-option-value=":not(.transition)">not transition</a></li>
|
||||
<li><a href="#filter" data-option-value=".metal:not(.transition)">metal but not transition</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h3>Etc</h3>
|
||||
|
||||
<ul id="etc" class="clearfix">
|
||||
<li id="toggle-sizes"><a href="#toggle-sizes">Toggle variable sizes</a></li>
|
||||
<li id="insert"><a href="#insert">Insert new elements</a></li>
|
||||
</ul>
|
||||
</section> <!-- #options -->
|
||||
|
||||
<div id="container" class="clearfix">
|
||||
|
||||
|
||||
|
||||
<div class="element alkaline-earth metal " data-symbol="Mg" data-category="alkaline-earth">
|
||||
<p class="number">12</p>
|
||||
<h3 class="symbol">Mg</h3>
|
||||
<h2 class="name">Magnesium</h2>
|
||||
<p class="weight">24.305</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element actinoid metal inner-transition " data-symbol="U" data-category="actinoid">
|
||||
<p class="number">92</p>
|
||||
<h3 class="symbol">U</h3>
|
||||
<h2 class="name">Uranium</h2>
|
||||
<p class="weight">238.02891</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element lanthanoid metal inner-transition " data-symbol="Gd" data-category="lanthanoid">
|
||||
<p class="number">64</p>
|
||||
<h3 class="symbol">Gd</h3>
|
||||
<h2 class="name">Gadolinium</h2>
|
||||
<p class="weight">157.25</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Y" data-category="transition">
|
||||
<p class="number">39</p>
|
||||
<h3 class="symbol">Y</h3>
|
||||
<h2 class="name">Yttrium</h2>
|
||||
<p class="weight">88.90585</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element metalloid " data-symbol="B" data-category="metalloid">
|
||||
<p class="number">5</p>
|
||||
<h3 class="symbol">B</h3>
|
||||
<h2 class="name">Boron</h2>
|
||||
<p class="weight">10.811</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Fe" data-category="transition">
|
||||
<p class="number">26</p>
|
||||
<h3 class="symbol">Fe</h3>
|
||||
<h2 class="name">Iron</h2>
|
||||
<p class="weight">55.845</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element actinoid metal inner-transition " data-symbol="Am" data-category="actinoid">
|
||||
<p class="number">95</p>
|
||||
<h3 class="symbol">Am</h3>
|
||||
<h2 class="name">Americium</h2>
|
||||
<p class="weight">(243)</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Zn" data-category="transition">
|
||||
<p class="number">30</p>
|
||||
<h3 class="symbol">Zn</h3>
|
||||
<h2 class="name">Zinc</h2>
|
||||
<p class="weight">65.38</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element lanthanoid metal inner-transition " data-symbol="Pm" data-category="lanthanoid">
|
||||
<p class="number">61</p>
|
||||
<h3 class="symbol">Pm</h3>
|
||||
<h2 class="name">Promethium</h2>
|
||||
<p class="weight">(145)</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element post-transition metal " data-symbol="In" data-category="post-transition">
|
||||
<p class="number">49</p>
|
||||
<h3 class="symbol">In</h3>
|
||||
<h2 class="name">Indium</h2>
|
||||
<p class="weight">114.818</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element metalloid " data-symbol="As" data-category="metalloid">
|
||||
<p class="number">33</p>
|
||||
<h3 class="symbol">As</h3>
|
||||
<h2 class="name">Arsenic</h2>
|
||||
<p class="weight">74.9216</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element lanthanoid metal inner-transition " data-symbol="Er" data-category="lanthanoid">
|
||||
<p class="number">68</p>
|
||||
<h3 class="symbol">Er</h3>
|
||||
<h2 class="name">Erbium</h2>
|
||||
<p class="weight">167.259</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="Se" data-category="other">
|
||||
<p class="number">34</p>
|
||||
<h3 class="symbol">Se</h3>
|
||||
<h2 class="name">Selenium</h2>
|
||||
<p class="weight">78.96</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element alkaline-earth metal " data-symbol="Sr" data-category="alkaline-earth">
|
||||
<p class="number">38</p>
|
||||
<h3 class="symbol">Sr</h3>
|
||||
<h2 class="name">Strontium</h2>
|
||||
<p class="weight">87.62</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Zr" data-category="transition">
|
||||
<p class="number">40</p>
|
||||
<h3 class="symbol">Zr</h3>
|
||||
<h2 class="name">Zirconium</h2>
|
||||
<p class="weight">91.224</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element halogen nonmetal " data-symbol="At" data-category="halogen">
|
||||
<p class="number">85</p>
|
||||
<h3 class="symbol">At</h3>
|
||||
<h2 class="name">Astatine</h2>
|
||||
<p class="weight">(210)</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Nb" data-category="transition">
|
||||
<p class="number">41</p>
|
||||
<h3 class="symbol">Nb</h3>
|
||||
<h2 class="name">Niobium</h2>
|
||||
<p class="weight">92.90638</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="O" data-category="other">
|
||||
<p class="number">8</p>
|
||||
<h3 class="symbol">O</h3>
|
||||
<h2 class="name">Oxygen</h2>
|
||||
<p class="weight">15.9994</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element actinoid metal inner-transition " data-symbol="Bk" data-category="actinoid">
|
||||
<p class="number">97</p>
|
||||
<h3 class="symbol">Bk</h3>
|
||||
<h2 class="name">Berkelium</h2>
|
||||
<p class="weight">(247)</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element halogen nonmetal " data-symbol="F" data-category="halogen">
|
||||
<p class="number">9</p>
|
||||
<h3 class="symbol">F</h3>
|
||||
<h2 class="name">Fluorine</h2>
|
||||
<p class="weight">18.9984032</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element actinoid metal inner-transition " data-symbol="Cf" data-category="actinoid">
|
||||
<p class="number">98</p>
|
||||
<h3 class="symbol">Cf</h3>
|
||||
<h2 class="name">Californium</h2>
|
||||
<p class="weight">(251)</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element noble-gas nonmetal " data-symbol="Ne" data-category="noble-gas">
|
||||
<p class="number">10</p>
|
||||
<h3 class="symbol">Ne</h3>
|
||||
<h2 class="name">Neon</h2>
|
||||
<p class="weight">20.1797</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="P" data-category="other">
|
||||
<p class="number">15</p>
|
||||
<h3 class="symbol">P</h3>
|
||||
<h2 class="name">Phosphorus</h2>
|
||||
<p class="weight">30.973762</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element actinoid metal inner-transition " data-symbol="Fm" data-category="actinoid">
|
||||
<p class="number">100</p>
|
||||
<h3 class="symbol">Fm</h3>
|
||||
<h2 class="name">Fermium</h2>
|
||||
<p class="weight">(257)</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="S" data-category="other">
|
||||
<p class="number">16</p>
|
||||
<h3 class="symbol">S</h3>
|
||||
<h2 class="name">Sulfur</h2>
|
||||
<p class="weight">32.065</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element alkaline-earth metal " data-symbol="Ca" data-category="alkaline-earth">
|
||||
<p class="number">20</p>
|
||||
<h3 class="symbol">Ca</h3>
|
||||
<h2 class="name">Calcium</h2>
|
||||
<p class="weight">40.078</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="C" data-category="other">
|
||||
<p class="number">6</p>
|
||||
<h3 class="symbol">C</h3>
|
||||
<h2 class="name">Carbon</h2>
|
||||
<p class="weight">12.0107</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element alkali metal " data-symbol="Rb" data-category="alkali">
|
||||
<p class="number">37</p>
|
||||
<h3 class="symbol">Rb</h3>
|
||||
<h2 class="name">Rubidium</h2>
|
||||
<p class="weight">85.4678</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element post-transition metal " data-symbol="Uup" data-category="post-transition">
|
||||
<p class="number">115</p>
|
||||
<h3 class="symbol">Uup</h3>
|
||||
<h2 class="name">Ununpentium</h2>
|
||||
<p class="weight">(288)</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Sc" data-category="transition">
|
||||
<p class="number">21</p>
|
||||
<h3 class="symbol">Sc</h3>
|
||||
<h2 class="name">Scandium</h2>
|
||||
<p class="weight">44.955912</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element post-transition metal " data-symbol="Ga" data-category="post-transition">
|
||||
<p class="number">31</p>
|
||||
<h3 class="symbol">Ga</h3>
|
||||
<h2 class="name">Gallium</h2>
|
||||
<p class="weight">69.723</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element post-transition metal " data-symbol="Tl" data-category="post-transition">
|
||||
<p class="number">81</p>
|
||||
<h3 class="symbol">Tl</h3>
|
||||
<h2 class="name">Thallium</h2>
|
||||
<p class="weight">204.3833</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element metalloid " data-symbol="Si" data-category="metalloid">
|
||||
<p class="number">14</p>
|
||||
<h3 class="symbol">Si</h3>
|
||||
<h2 class="name">Silicon</h2>
|
||||
<p class="weight">28.0855</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Cd" data-category="transition">
|
||||
<p class="number">48</p>
|
||||
<h3 class="symbol">Cd</h3>
|
||||
<h2 class="name">Cadmium</h2>
|
||||
<p class="weight">112.411</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Ti" data-category="transition">
|
||||
<p class="number">22</p>
|
||||
<h3 class="symbol">Ti</h3>
|
||||
<h2 class="name">Titanium</h2>
|
||||
<p class="weight">47.867</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element alkaline-earth metal " data-symbol="Be" data-category="alkaline-earth">
|
||||
<p class="number">4</p>
|
||||
<h3 class="symbol">Be</h3>
|
||||
<h2 class="name">Beryllium</h2>
|
||||
<p class="weight">9.012182</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="V" data-category="transition">
|
||||
<p class="number">23</p>
|
||||
<h3 class="symbol">V</h3>
|
||||
<h2 class="name">Vanadium</h2>
|
||||
<p class="weight">50.9415</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element metalloid " data-symbol="Ge" data-category="metalloid">
|
||||
<p class="number">32</p>
|
||||
<h3 class="symbol">Ge</h3>
|
||||
<h2 class="name">Germanium</h2>
|
||||
<p class="weight">72.64</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element alkali metal " data-symbol="Cs" data-category="alkali">
|
||||
<p class="number">55</p>
|
||||
<h3 class="symbol">Cs</h3>
|
||||
<h2 class="name">Caesium</h2>
|
||||
<p class="weight">132.9054519</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element lanthanoid metal inner-transition " data-symbol="Ho" data-category="lanthanoid">
|
||||
<p class="number">67</p>
|
||||
<h3 class="symbol">Ho</h3>
|
||||
<h2 class="name">Holmium</h2>
|
||||
<p class="weight">164.93032</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element alkaline-earth metal " data-symbol="Ba" data-category="alkaline-earth">
|
||||
<p class="number">56</p>
|
||||
<h3 class="symbol">Ba</h3>
|
||||
<h2 class="name">Barium</h2>
|
||||
<p class="weight">137.327</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Hf" data-category="transition">
|
||||
<p class="number">72</p>
|
||||
<h3 class="symbol">Hf</h3>
|
||||
<h2 class="name">Hafnium</h2>
|
||||
<p class="weight">178.49</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element noble-gas nonmetal " data-symbol="He" data-category="noble-gas">
|
||||
<p class="number">2</p>
|
||||
<h3 class="symbol">He</h3>
|
||||
<h2 class="name">Helium</h2>
|
||||
<p class="weight">4.002602</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Cr" data-category="transition">
|
||||
<p class="number">24</p>
|
||||
<h3 class="symbol">Cr</h3>
|
||||
<h2 class="name">Chromium</h2>
|
||||
<p class="weight">51.9961</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Mo" data-category="transition">
|
||||
<p class="number">42</p>
|
||||
<h3 class="symbol">Mo</h3>
|
||||
<h2 class="name">Molybdenum</h2>
|
||||
<p class="weight">95.96</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element lanthanoid metal inner-transition " data-symbol="Lu" data-category="lanthanoid">
|
||||
<p class="number">71</p>
|
||||
<h3 class="symbol">Lu</h3>
|
||||
<h2 class="name">Lutetium</h2>
|
||||
<p class="weight">174.9668</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element alkali metal " data-symbol="Li" data-category="alkali">
|
||||
<p class="number">3</p>
|
||||
<h3 class="symbol">Li</h3>
|
||||
<h2 class="name">Lithium</h2>
|
||||
<p class="weight">6.941</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Pt" data-category="transition">
|
||||
<p class="number">78</p>
|
||||
<h3 class="symbol">Pt</h3>
|
||||
<h2 class="name">Platinum</h2>
|
||||
<p class="weight">195.084</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element noble-gas nonmetal " data-symbol="Uuo" data-category="noble-gas">
|
||||
<p class="number">118</p>
|
||||
<h3 class="symbol">Uuo</h3>
|
||||
<h2 class="name">Ununoctium</h2>
|
||||
<p class="weight">(294)</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Hg" data-category="transition">
|
||||
<p class="number">80</p>
|
||||
<h3 class="symbol">Hg</h3>
|
||||
<h2 class="name">Mercury</h2>
|
||||
<p class="weight">200.59</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Tc" data-category="transition">
|
||||
<p class="number">43</p>
|
||||
<h3 class="symbol">Tc</h3>
|
||||
<h2 class="name">Technetium</h2>
|
||||
<p class="weight">(98)</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element actinoid metal inner-transition " data-symbol="Cm" data-category="actinoid">
|
||||
<p class="number">96</p>
|
||||
<h3 class="symbol">Cm</h3>
|
||||
<h2 class="name">Curium</h2>
|
||||
<p class="weight">(247)</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Ag" data-category="transition">
|
||||
<p class="number">47</p>
|
||||
<h3 class="symbol">Ag</h3>
|
||||
<h2 class="name">Silver</h2>
|
||||
<p class="weight">107.8682</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element metalloid " data-symbol="Sb" data-category="metalloid">
|
||||
<p class="number">51</p>
|
||||
<h3 class="symbol">Sb</h3>
|
||||
<h2 class="name">Antimony</h2>
|
||||
<p class="weight">121.76</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element lanthanoid metal inner-transition " data-symbol="Yb" data-category="lanthanoid">
|
||||
<p class="number">70</p>
|
||||
<h3 class="symbol">Yb</h3>
|
||||
<h2 class="name">Ytterbium</h2>
|
||||
<p class="weight">173.054</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element noble-gas nonmetal " data-symbol="Xe" data-category="noble-gas">
|
||||
<p class="number">54</p>
|
||||
<h3 class="symbol">Xe</h3>
|
||||
<h2 class="name">Xenon</h2>
|
||||
<p class="weight">131.293</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element lanthanoid metal inner-transition " data-symbol="La" data-category="lanthanoid">
|
||||
<p class="number">57</p>
|
||||
<h3 class="symbol">La</h3>
|
||||
<h2 class="name">Lanthanum</h2>
|
||||
<p class="weight">138.90547</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Ta" data-category="transition">
|
||||
<p class="number">73</p>
|
||||
<h3 class="symbol">Ta</h3>
|
||||
<h2 class="name">Tantalum</h2>
|
||||
<p class="weight">180.94788</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element metalloid " data-symbol="Te" data-category="metalloid">
|
||||
<p class="number">52</p>
|
||||
<h3 class="symbol">Te</h3>
|
||||
<h2 class="name">Tellurium</h2>
|
||||
<p class="weight">127.6</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="W" data-category="transition">
|
||||
<p class="number">74</p>
|
||||
<h3 class="symbol">W</h3>
|
||||
<h2 class="name">Tungsten</h2>
|
||||
<p class="weight">183.84</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="../js/jquery-1.6.4.min.js"></script>
|
||||
<script src="../jquery.isotope.min.js"></script>
|
||||
<script src="../js/fake-element.js"></script>
|
||||
<script>
|
||||
|
||||
// categoryRows custom layout mode
|
||||
$.extend( $.Isotope.prototype, {
|
||||
|
||||
_categoryRowsReset : function() {
|
||||
this.categoryRows = {
|
||||
x : 0,
|
||||
y : 0,
|
||||
height : 0,
|
||||
currentCategory : null
|
||||
};
|
||||
},
|
||||
|
||||
_categoryRowsLayout : function( $elems ) {
|
||||
var instance = this,
|
||||
containerWidth = this.element.width(),
|
||||
sortBy = this.options.sortBy,
|
||||
props = this.categoryRows;
|
||||
|
||||
$elems.each( function() {
|
||||
var $this = $(this),
|
||||
atomW = $this.outerWidth(true),
|
||||
atomH = $this.outerHeight(true),
|
||||
category = $.data( this, 'isotope-sort-data' )[ sortBy ],
|
||||
x, y;
|
||||
|
||||
if ( category !== props.currentCategory ) {
|
||||
// new category, new row
|
||||
props.x = 0;
|
||||
props.height += props.currentCategory ? instance.options.categoryRows.gutter : 0;
|
||||
props.y = props.height;
|
||||
props.currentCategory = category;
|
||||
} else if ( props.x !== 0 && atomW + props.x > containerWidth ) {
|
||||
// if this element cannot fit in the current row
|
||||
props.x = 0;
|
||||
props.y = props.height;
|
||||
}
|
||||
|
||||
// position the atom
|
||||
instance._pushPosition( $this, props.x, props.y );
|
||||
|
||||
props.height = Math.max( props.y + atomH, props.height );
|
||||
props.x += atomW;
|
||||
|
||||
});
|
||||
},
|
||||
|
||||
_categoryRowsGetContainerSize : function () {
|
||||
return { height : this.categoryRows.height };
|
||||
},
|
||||
|
||||
_categoryRowsResizeChanged : function() {
|
||||
return true;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
$(function(){
|
||||
|
||||
var $container = $('#container');
|
||||
|
||||
|
||||
// add randomish size classes
|
||||
$container.find('.element').each(function(){
|
||||
var $this = $(this),
|
||||
number = parseInt( $this.find('.number').text(), 10 );
|
||||
if ( number % 7 % 2 === 1 ) {
|
||||
$this.addClass('width2');
|
||||
}
|
||||
if ( number % 3 === 0 ) {
|
||||
$this.addClass('height2');
|
||||
}
|
||||
});
|
||||
|
||||
$container.isotope({
|
||||
itemSelector : '.element',
|
||||
layoutMode : 'categoryRows',
|
||||
categoryRows : {
|
||||
gutter : 20
|
||||
},
|
||||
getSortData : {
|
||||
category : function( $elem ) {
|
||||
return $elem.attr('data-category');
|
||||
}
|
||||
},
|
||||
sortBy: 'category'
|
||||
});
|
||||
|
||||
|
||||
var $optionSets = $('#options .option-set'),
|
||||
$optionLinks = $optionSets.find('a');
|
||||
|
||||
$optionLinks.click(function(){
|
||||
var $this = $(this);
|
||||
// don't proceed if already selected
|
||||
if ( $this.hasClass('selected') ) {
|
||||
return false;
|
||||
}
|
||||
var $optionSet = $this.parents('.option-set');
|
||||
$optionSet.find('.selected').removeClass('selected');
|
||||
$this.addClass('selected');
|
||||
|
||||
// make option object dynamically, i.e. { filter: '.my-filter-class' }
|
||||
var options = {},
|
||||
key = $optionSet.attr('data-option-key'),
|
||||
value = $this.attr('data-option-value');
|
||||
// parse 'false' as false boolean
|
||||
value = value === 'false' ? false : value;
|
||||
options[ key ] = value;
|
||||
if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
|
||||
// changes in layout modes need extra logic
|
||||
changeLayoutMode( $this, options )
|
||||
} else {
|
||||
// otherwise, apply new options
|
||||
$container.isotope( options );
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
|
||||
$('#insert a').click(function(){
|
||||
var $newEls = $( fakeElement.getGroup() );
|
||||
$container.isotope( 'insert', $newEls );
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
$('#append a').click(function(){
|
||||
var $newEls = $( fakeElement.getGroup() );
|
||||
$container.append( $newEls ).isotope( 'appended', $newEls );
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
// toggle variable sizes of all elements
|
||||
$('#toggle-sizes').find('a').click(function(){
|
||||
$container
|
||||
.toggleClass('variable-sizes')
|
||||
.isotope('reLayout');
|
||||
return false;
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<footer>
|
||||
Isotope by <a href="http://desandro.com">David DeSandro</a> / <a href="http://metafizzy.co">Metafizzy</a>
|
||||
</footer>
|
||||
|
||||
</section> <!-- #content -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,556 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<title>Centered Masonry · Isotope </title>
|
||||
|
||||
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
|
||||
<!-- scripts at bottom of page -->
|
||||
|
||||
</head>
|
||||
<body class="custom-layout-modes ">
|
||||
|
||||
<nav id="site-nav">
|
||||
<h1><a href="../index.html">Isotope</a></h1>
|
||||
|
||||
<h2>Docs</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../docs/introduction.html">Introduction</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/options.html">Options</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/methods.html">Methods</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/animating.html">Animating</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/extending-isotope.html">Extending Isotope</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/hash-history-jquery-bbq.html">Hash history with jQuery BBQ</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/help.html">Help</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/license.html">License</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Demos</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../demos/basic.html">Basic</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-complete.html">Elements Complete</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-partial.html">Elements Partial</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/relayout.html">reLayout</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/infinite-scroll.html">Infinite Scroll</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/images.html">Images</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/combination-filters.html">Combination filters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/hash-history.html">Hash history</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/fluid-responsive.html">Fluid / responsive</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Custom layout modes</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li class="current"><a href="#content">Centered Masonry</a></li>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/category-rows.html">Category rows</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-corner-stamp.html">Masonry corner stamp</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-gutters.html">Masonry gutters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/spine-align.html">Spine align</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2><a href="../tests/index.html">Tests</a></h2>
|
||||
|
||||
</nav> <!-- #site-nav -->
|
||||
|
||||
<section id="content">
|
||||
|
||||
<h1>Centered Masonry</h1>
|
||||
|
||||
|
||||
<style>
|
||||
#container {
|
||||
margin: 0 auto 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<section id="copy">
|
||||
<p><a href="../docs/layout-modes.html#modified_layout_modes">Modified masonry layout mode</a> for centered container.</p>
|
||||
</section>
|
||||
|
||||
<section id="options" class="clearfix">
|
||||
|
||||
|
||||
<h3>Filters</h3>
|
||||
|
||||
<ul id="filters" class="option-set clearfix" data-option-key="filter">
|
||||
<li><a href="#filter" data-option-value="*" class="selected">show all</a></li>
|
||||
<li><a href="#filter" data-option-value=".metal">metal</a></li>
|
||||
<li><a href="#filter" data-option-value=".transition">transition</a></li>
|
||||
<li><a href="#filter" data-option-value=".post-transition">post-transition</a></li>
|
||||
<li><a href="#filter" data-option-value=".nonmetal">nonmetal</a></li>
|
||||
<li><a href="#filter" data-option-value=".inner-transition">inner-transition</a></li>
|
||||
<li><a href="#filter" data-option-value=".alkali, .alkaline-earth">alkali and alkaline-earth</a></li>
|
||||
<li><a href="#filter" data-option-value=":not(.transition)">not transition</a></li>
|
||||
<li><a href="#filter" data-option-value=".metal:not(.transition)">metal but not transition</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<h3>Sort</h3>
|
||||
|
||||
<ul id="sort-by" class="option-set clearfix" data-option-key="sortBy">
|
||||
<li><a href="#sortBy=original-order" data-option-value="original-order" class="selected" data>original-order</a></li>
|
||||
<li><a href="#sortBy=name" data-option-value="name">name</a></li>
|
||||
<li><a href="#sortBy=symbol" data-option-value="symbol">symbol</a></li>
|
||||
<li><a href="#sortBy=number" data-option-value="number">number</a></li>
|
||||
<li><a href="#sortBy=weight" data-option-value="weight">weight</a></li>
|
||||
<li><a href="#sortBy=category" data-option-value="category">category</a></li>
|
||||
<li><a href="#sortBy=random" data-option-value="random">random</a></li>
|
||||
</ul>
|
||||
|
||||
<h3>Sort direction</h3>
|
||||
|
||||
<ul id="sort-direction" class="option-set clearfix" data-option-key="sortAscending">
|
||||
<li><a href="#sortAscending=true" data-option-value="true" class="selected">sort ascending</a></li>
|
||||
<li><a href="#sortAscending=false" data-option-value="false">sort descending</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h3>Etc</h3>
|
||||
|
||||
<ul id="etc" class="clearfix">
|
||||
<li id="toggle-sizes"><a href="#toggle-sizes">Toggle variable sizes</a></li>
|
||||
<li id="insert"><a href="#insert">Insert new elements</a></li>
|
||||
<li id="append"><a href='#append'>Append new elements</a></li>
|
||||
<li id="shuffle"><a href='#shuffle'>Shuffle</a></li>
|
||||
</ul>
|
||||
|
||||
</section> <!-- #options -->
|
||||
|
||||
<div id="container" class="clickable clearfix">
|
||||
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Hg" data-category="transition">
|
||||
<p class="number">80</p>
|
||||
<h3 class="symbol">Hg</h3>
|
||||
<h2 class="name">Mercury</h2>
|
||||
<p class="weight">200.59</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element metalloid " data-symbol="Te" data-category="metalloid">
|
||||
<p class="number">52</p>
|
||||
<h3 class="symbol">Te</h3>
|
||||
<h2 class="name">Tellurium</h2>
|
||||
<p class="weight">127.6</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element post-transition metal " data-symbol="Bi" data-category="post-transition">
|
||||
<p class="number">83</p>
|
||||
<h3 class="symbol">Bi</h3>
|
||||
<h2 class="name">Bismuth</h2>
|
||||
<p class="weight">208.9804</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Cd" data-category="transition">
|
||||
<p class="number">48</p>
|
||||
<h3 class="symbol">Cd</h3>
|
||||
<h2 class="name">Cadmium</h2>
|
||||
<p class="weight">112.411</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element alkaline-earth metal " data-symbol="Ca" data-category="alkaline-earth">
|
||||
<p class="number">20</p>
|
||||
<h3 class="symbol">Ca</h3>
|
||||
<h2 class="name">Calcium</h2>
|
||||
<p class="weight">40.078</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Re" data-category="transition">
|
||||
<p class="number">75</p>
|
||||
<h3 class="symbol">Re</h3>
|
||||
<h2 class="name">Rhenium</h2>
|
||||
<p class="weight">186.207</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element post-transition metal " data-symbol="Tl" data-category="post-transition">
|
||||
<p class="number">81</p>
|
||||
<h3 class="symbol">Tl</h3>
|
||||
<h2 class="name">Thallium</h2>
|
||||
<p class="weight">204.3833</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element metalloid " data-symbol="Sb" data-category="metalloid">
|
||||
<p class="number">51</p>
|
||||
<h3 class="symbol">Sb</h3>
|
||||
<h2 class="name">Antimony</h2>
|
||||
<p class="weight">121.76</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Co" data-category="transition">
|
||||
<p class="number">27</p>
|
||||
<h3 class="symbol">Co</h3>
|
||||
<h2 class="name">Cobalt</h2>
|
||||
<p class="weight">58.933195</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element lanthanoid metal inner-transition " data-symbol="Lu" data-category="lanthanoid">
|
||||
<p class="number">71</p>
|
||||
<h3 class="symbol">Lu</h3>
|
||||
<h2 class="name">Lutetium</h2>
|
||||
<p class="weight">174.9668</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element noble-gas nonmetal " data-symbol="Ar" data-category="noble-gas">
|
||||
<p class="number">18</p>
|
||||
<h3 class="symbol">Ar</h3>
|
||||
<h2 class="name">Argon</h2>
|
||||
<p class="weight">39.948</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element alkali metal " data-symbol="Rb" data-category="alkali">
|
||||
<p class="number">37</p>
|
||||
<h3 class="symbol">Rb</h3>
|
||||
<h2 class="name">Rubidium</h2>
|
||||
<p class="weight">85.4678</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="N" data-category="other">
|
||||
<p class="number">7</p>
|
||||
<h3 class="symbol">N</h3>
|
||||
<h2 class="name">Nitrogen</h2>
|
||||
<p class="weight">14.0067</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element actinoid metal inner-transition " data-symbol="Np" data-category="actinoid">
|
||||
<p class="number">93</p>
|
||||
<h3 class="symbol">Np</h3>
|
||||
<h2 class="name">Neptunium</h2>
|
||||
<p class="weight">(237)</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element actinoid metal inner-transition " data-symbol="Ac" data-category="actinoid">
|
||||
<p class="number">89</p>
|
||||
<h3 class="symbol">Ac</h3>
|
||||
<h2 class="name">Actinium</h2>
|
||||
<p class="weight">(227)</p>
|
||||
</div>
|
||||
|
||||
</div> <!-- #container -->
|
||||
|
||||
|
||||
<script src="../js/jquery-1.6.4.min.js"></script>
|
||||
<script src="../jquery.isotope.min.js"></script>
|
||||
<script src="../js/fake-element.js"></script>
|
||||
<script>
|
||||
|
||||
$.Isotope.prototype._getCenteredMasonryColumns = function() {
|
||||
this.width = this.element.width();
|
||||
|
||||
var parentWidth = this.element.parent().width();
|
||||
|
||||
// i.e. options.masonry && options.masonry.columnWidth
|
||||
var colW = this.options.masonry && this.options.masonry.columnWidth ||
|
||||
// or use the size of the first item
|
||||
this.$filteredAtoms.outerWidth(true) ||
|
||||
// if there's no items, use size of container
|
||||
parentWidth;
|
||||
|
||||
var cols = Math.floor( parentWidth / colW );
|
||||
cols = Math.max( cols, 1 );
|
||||
|
||||
// i.e. this.masonry.cols = ....
|
||||
this.masonry.cols = cols;
|
||||
// i.e. this.masonry.columnWidth = ...
|
||||
this.masonry.columnWidth = colW;
|
||||
};
|
||||
|
||||
$.Isotope.prototype._masonryReset = function() {
|
||||
// layout-specific props
|
||||
this.masonry = {};
|
||||
// FIXME shouldn't have to call this again
|
||||
this._getCenteredMasonryColumns();
|
||||
var i = this.masonry.cols;
|
||||
this.masonry.colYs = [];
|
||||
while (i--) {
|
||||
this.masonry.colYs.push( 0 );
|
||||
}
|
||||
};
|
||||
|
||||
$.Isotope.prototype._masonryResizeChanged = function() {
|
||||
var prevColCount = this.masonry.cols;
|
||||
// get updated colCount
|
||||
this._getCenteredMasonryColumns();
|
||||
return ( this.masonry.cols !== prevColCount );
|
||||
};
|
||||
|
||||
$.Isotope.prototype._masonryGetContainerSize = function() {
|
||||
var unusedCols = 0,
|
||||
i = this.masonry.cols;
|
||||
// count unused columns
|
||||
while ( --i ) {
|
||||
if ( this.masonry.colYs[i] !== 0 ) {
|
||||
break;
|
||||
}
|
||||
unusedCols++;
|
||||
}
|
||||
|
||||
return {
|
||||
height : Math.max.apply( Math, this.masonry.colYs ),
|
||||
// fit container to columns that have been used;
|
||||
width : (this.masonry.cols - unusedCols) * this.masonry.columnWidth
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
$(function(){
|
||||
|
||||
var $container = $('#container');
|
||||
|
||||
|
||||
// add randomish size classes
|
||||
$container.find('.element').each(function(){
|
||||
var $this = $(this),
|
||||
number = parseInt( $this.find('.number').text(), 10 );
|
||||
if ( number % 7 % 2 === 1 ) {
|
||||
$this.addClass('width2');
|
||||
}
|
||||
if ( number % 3 === 0 ) {
|
||||
$this.addClass('height2');
|
||||
}
|
||||
});
|
||||
|
||||
$container.isotope({
|
||||
itemSelector : '.element',
|
||||
masonry : {
|
||||
columnWidth : 120
|
||||
},
|
||||
getSortData : {
|
||||
symbol : function( $elem ) {
|
||||
return $elem.attr('data-symbol');
|
||||
},
|
||||
category : function( $elem ) {
|
||||
return $elem.attr('data-category');
|
||||
},
|
||||
number : function( $elem ) {
|
||||
return parseInt( $elem.find('.number').text(), 10 );
|
||||
},
|
||||
weight : function( $elem ) {
|
||||
return parseFloat( $elem.find('.weight').text().replace( /[\(\)]/g, '') );
|
||||
},
|
||||
name : function ( $elem ) {
|
||||
return $elem.find('.name').text();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
var $optionSets = $('#options .option-set'),
|
||||
$optionLinks = $optionSets.find('a');
|
||||
|
||||
$optionLinks.click(function(){
|
||||
var $this = $(this);
|
||||
// don't proceed if already selected
|
||||
if ( $this.hasClass('selected') ) {
|
||||
return false;
|
||||
}
|
||||
var $optionSet = $this.parents('.option-set');
|
||||
$optionSet.find('.selected').removeClass('selected');
|
||||
$this.addClass('selected');
|
||||
|
||||
// make option object dynamically, i.e. { filter: '.my-filter-class' }
|
||||
var options = {},
|
||||
key = $optionSet.attr('data-option-key'),
|
||||
value = $this.attr('data-option-value');
|
||||
// parse 'false' as false boolean
|
||||
value = value === 'false' ? false : value;
|
||||
options[ key ] = value;
|
||||
if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
|
||||
// changes in layout modes need extra logic
|
||||
changeLayoutMode( $this, options )
|
||||
} else {
|
||||
// otherwise, apply new options
|
||||
$container.isotope( options );
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
|
||||
$('#insert a').click(function(){
|
||||
var $newEls = $( fakeElement.getGroup() );
|
||||
$container.isotope( 'insert', $newEls );
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
$('#append a').click(function(){
|
||||
var $newEls = $( fakeElement.getGroup() );
|
||||
$container.append( $newEls ).isotope( 'appended', $newEls );
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
|
||||
// change size of clicked element
|
||||
$container.delegate( '.element', 'click', function(){
|
||||
$(this).toggleClass('large');
|
||||
$container.isotope('reLayout');
|
||||
});
|
||||
|
||||
// toggle variable sizes of all elements
|
||||
$('#toggle-sizes').find('a').click(function(){
|
||||
$container
|
||||
.toggleClass('variable-sizes')
|
||||
.isotope('reLayout');
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
var $sortBy = $('#sort-by');
|
||||
$('#shuffle a').click(function(){
|
||||
$container.isotope('shuffle');
|
||||
$sortBy.find('.selected').removeClass('selected');
|
||||
$sortBy.find('[data-option-value="random"]').addClass('selected');
|
||||
return false;
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<footer>
|
||||
Isotope by <a href="http://desandro.com">David DeSandro</a> / <a href="http://metafizzy.co">Metafizzy</a>
|
||||
</footer>
|
||||
|
||||
</section> <!-- #content -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,549 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<title>Masonry corner stamp · Isotope </title>
|
||||
|
||||
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
|
||||
<!-- scripts at bottom of page -->
|
||||
|
||||
</head>
|
||||
<body class="custom-layout-modes ">
|
||||
|
||||
<nav id="site-nav">
|
||||
<h1><a href="../index.html">Isotope</a></h1>
|
||||
|
||||
<h2>Docs</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../docs/introduction.html">Introduction</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/options.html">Options</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/methods.html">Methods</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/animating.html">Animating</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/extending-isotope.html">Extending Isotope</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/hash-history-jquery-bbq.html">Hash history with jQuery BBQ</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/help.html">Help</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/license.html">License</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Demos</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../demos/basic.html">Basic</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-complete.html">Elements Complete</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-partial.html">Elements Partial</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/relayout.html">reLayout</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/infinite-scroll.html">Infinite Scroll</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/images.html">Images</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/combination-filters.html">Combination filters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/hash-history.html">Hash history</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/fluid-responsive.html">Fluid / responsive</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Custom layout modes</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/centered-masonry.html">Centered Masonry</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/category-rows.html">Category rows</a>
|
||||
|
||||
|
||||
|
||||
<li class="current"><a href="#content">Masonry corner stamp</a></li>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-gutters.html">Masonry gutters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/spine-align.html">Spine align</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2><a href="../tests/index.html">Tests</a></h2>
|
||||
|
||||
</nav> <!-- #site-nav -->
|
||||
|
||||
<section id="content">
|
||||
|
||||
<h1>Masonry corner stamp</h1>
|
||||
|
||||
|
||||
<style>
|
||||
.corner-stamp {
|
||||
width: 280px;
|
||||
height: 340px;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
float: right;
|
||||
background: red;
|
||||
color: white;
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<section id="copy">
|
||||
<p><a href="../docs/layout-modes.html#modified_layout_modes">Modified masonry layout mode</a> for corner stamp. An element can be "stamped" in the right top corner.</p>
|
||||
<p>Set <code>cornerStampSelector</code> within <code>masonry</code> options. <code>itemSelector</code> needs to be set as well.</p>
|
||||
|
||||
<div class="highlight"><pre><code class="javascript"><span class="nx">$</span><span class="p">(</span><span class="s1">'#container'</span><span class="p">).</span><span class="nx">isotope</span><span class="p">({</span>
|
||||
<span class="nx">itemSelector</span><span class="o">:</span> <span class="s1">'.item'</span><span class="p">,</span>
|
||||
<span class="nx">masonry</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">columnWidth</span><span class="o">:</span> <span class="mi">120</span><span class="p">,</span>
|
||||
<span class="nx">cornerStampSelector</span><span class="o">:</span> <span class="s1">'.corner-stamp'</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
<section id="options" class="clearfix">
|
||||
|
||||
|
||||
<h3>Filters</h3>
|
||||
|
||||
<ul id="filters" class="option-set clearfix" data-option-key="filter">
|
||||
<li><a href="#filter" data-option-value="*" class="selected">show all</a></li>
|
||||
<li><a href="#filter" data-option-value=".metal">metal</a></li>
|
||||
<li><a href="#filter" data-option-value=".transition">transition</a></li>
|
||||
<li><a href="#filter" data-option-value=".post-transition">post-transition</a></li>
|
||||
<li><a href="#filter" data-option-value=".nonmetal">nonmetal</a></li>
|
||||
<li><a href="#filter" data-option-value=".inner-transition">inner-transition</a></li>
|
||||
<li><a href="#filter" data-option-value=".alkali, .alkaline-earth">alkali and alkaline-earth</a></li>
|
||||
<li><a href="#filter" data-option-value=":not(.transition)">not transition</a></li>
|
||||
<li><a href="#filter" data-option-value=".metal:not(.transition)">metal but not transition</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<h3>Sort</h3>
|
||||
|
||||
<ul id="sort-by" class="option-set clearfix" data-option-key="sortBy">
|
||||
<li><a href="#sortBy=original-order" data-option-value="original-order" class="selected" data>original-order</a></li>
|
||||
<li><a href="#sortBy=name" data-option-value="name">name</a></li>
|
||||
<li><a href="#sortBy=symbol" data-option-value="symbol">symbol</a></li>
|
||||
<li><a href="#sortBy=number" data-option-value="number">number</a></li>
|
||||
<li><a href="#sortBy=weight" data-option-value="weight">weight</a></li>
|
||||
<li><a href="#sortBy=category" data-option-value="category">category</a></li>
|
||||
<li><a href="#sortBy=random" data-option-value="random">random</a></li>
|
||||
</ul>
|
||||
|
||||
<h3>Sort direction</h3>
|
||||
|
||||
<ul id="sort-direction" class="option-set clearfix" data-option-key="sortAscending">
|
||||
<li><a href="#sortAscending=true" data-option-value="true" class="selected">sort ascending</a></li>
|
||||
<li><a href="#sortAscending=false" data-option-value="false">sort descending</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h3>Etc</h3>
|
||||
|
||||
<ul id="etc" class="clearfix">
|
||||
<li id="toggle-sizes"><a href="#toggle-sizes">Toggle variable sizes</a></li>
|
||||
<li id="insert"><a href="#insert">Insert new elements</a></li>
|
||||
<li id="append"><a href='#append'>Append new elements</a></li>
|
||||
<li id="shuffle"><a href='#shuffle'>Shuffle</a></li>
|
||||
</ul>
|
||||
|
||||
</section> <!-- #options -->
|
||||
|
||||
<div id="container" class="clickable clearfix">
|
||||
|
||||
<div class="corner-stamp">corner stamp here.</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Hg" data-category="transition">
|
||||
<p class="number">80</p>
|
||||
<h3 class="symbol">Hg</h3>
|
||||
<h2 class="name">Mercury</h2>
|
||||
<p class="weight">200.59</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element metalloid " data-symbol="Te" data-category="metalloid">
|
||||
<p class="number">52</p>
|
||||
<h3 class="symbol">Te</h3>
|
||||
<h2 class="name">Tellurium</h2>
|
||||
<p class="weight">127.6</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element post-transition metal " data-symbol="Bi" data-category="post-transition">
|
||||
<p class="number">83</p>
|
||||
<h3 class="symbol">Bi</h3>
|
||||
<h2 class="name">Bismuth</h2>
|
||||
<p class="weight">208.9804</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Cd" data-category="transition">
|
||||
<p class="number">48</p>
|
||||
<h3 class="symbol">Cd</h3>
|
||||
<h2 class="name">Cadmium</h2>
|
||||
<p class="weight">112.411</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element alkaline-earth metal " data-symbol="Ca" data-category="alkaline-earth">
|
||||
<p class="number">20</p>
|
||||
<h3 class="symbol">Ca</h3>
|
||||
<h2 class="name">Calcium</h2>
|
||||
<p class="weight">40.078</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Re" data-category="transition">
|
||||
<p class="number">75</p>
|
||||
<h3 class="symbol">Re</h3>
|
||||
<h2 class="name">Rhenium</h2>
|
||||
<p class="weight">186.207</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element post-transition metal " data-symbol="Tl" data-category="post-transition">
|
||||
<p class="number">81</p>
|
||||
<h3 class="symbol">Tl</h3>
|
||||
<h2 class="name">Thallium</h2>
|
||||
<p class="weight">204.3833</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element metalloid " data-symbol="Sb" data-category="metalloid">
|
||||
<p class="number">51</p>
|
||||
<h3 class="symbol">Sb</h3>
|
||||
<h2 class="name">Antimony</h2>
|
||||
<p class="weight">121.76</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Co" data-category="transition">
|
||||
<p class="number">27</p>
|
||||
<h3 class="symbol">Co</h3>
|
||||
<h2 class="name">Cobalt</h2>
|
||||
<p class="weight">58.933195</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element lanthanoid metal inner-transition " data-symbol="Lu" data-category="lanthanoid">
|
||||
<p class="number">71</p>
|
||||
<h3 class="symbol">Lu</h3>
|
||||
<h2 class="name">Lutetium</h2>
|
||||
<p class="weight">174.9668</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element noble-gas nonmetal " data-symbol="Ar" data-category="noble-gas">
|
||||
<p class="number">18</p>
|
||||
<h3 class="symbol">Ar</h3>
|
||||
<h2 class="name">Argon</h2>
|
||||
<p class="weight">39.948</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element alkali metal " data-symbol="Rb" data-category="alkali">
|
||||
<p class="number">37</p>
|
||||
<h3 class="symbol">Rb</h3>
|
||||
<h2 class="name">Rubidium</h2>
|
||||
<p class="weight">85.4678</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="N" data-category="other">
|
||||
<p class="number">7</p>
|
||||
<h3 class="symbol">N</h3>
|
||||
<h2 class="name">Nitrogen</h2>
|
||||
<p class="weight">14.0067</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element actinoid metal inner-transition " data-symbol="Np" data-category="actinoid">
|
||||
<p class="number">93</p>
|
||||
<h3 class="symbol">Np</h3>
|
||||
<h2 class="name">Neptunium</h2>
|
||||
<p class="weight">(237)</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element actinoid metal inner-transition " data-symbol="Ac" data-category="actinoid">
|
||||
<p class="number">89</p>
|
||||
<h3 class="symbol">Ac</h3>
|
||||
<h2 class="name">Actinium</h2>
|
||||
<p class="weight">(227)</p>
|
||||
</div>
|
||||
|
||||
</div> <!-- #container -->
|
||||
|
||||
|
||||
<script src="../js/jquery-1.6.4.min.js"></script>
|
||||
<script src="../jquery.isotope.min.js"></script>
|
||||
<script src="../js/fake-element.js"></script>
|
||||
<script>
|
||||
|
||||
$.Isotope.prototype._masonryResizeChanged = function() {
|
||||
return true;
|
||||
};
|
||||
|
||||
$.Isotope.prototype._masonryReset = function() {
|
||||
// layout-specific props
|
||||
this.masonry = {};
|
||||
this._getSegments();
|
||||
var i = this.masonry.cols;
|
||||
this.masonry.colYs = [];
|
||||
while (i--) {
|
||||
this.masonry.colYs.push( 0 );
|
||||
}
|
||||
|
||||
if ( this.options.masonry.cornerStampSelector ) {
|
||||
var $cornerStamp = this.element.find( this.options.masonry.cornerStampSelector ),
|
||||
stampWidth = $cornerStamp.outerWidth(true) - ( this.element.width() % this.masonry.columnWidth ),
|
||||
cornerCols = Math.ceil( stampWidth / this.masonry.columnWidth ),
|
||||
cornerStampHeight = $cornerStamp.outerHeight(true);
|
||||
for ( i = Math.max( this.masonry.cols - cornerCols, cornerCols ); i < this.masonry.cols; i++ ) {
|
||||
this.masonry.colYs[i] = cornerStampHeight;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
$(function(){
|
||||
|
||||
var $container = $('#container');
|
||||
|
||||
|
||||
// add randomish size classes
|
||||
$container.find('.element').each(function(){
|
||||
var $this = $(this),
|
||||
number = parseInt( $this.find('.number').text(), 10 );
|
||||
if ( number % 7 % 2 === 1 ) {
|
||||
$this.addClass('width2');
|
||||
}
|
||||
if ( number % 3 === 0 ) {
|
||||
$this.addClass('height2');
|
||||
}
|
||||
});
|
||||
|
||||
$container.isotope({
|
||||
itemSelector : '.element',
|
||||
masonry : {
|
||||
columnWidth : 120,
|
||||
cornerStampSelector: '.corner-stamp'
|
||||
},
|
||||
getSortData : {
|
||||
symbol : function( $elem ) {
|
||||
return $elem.attr('data-symbol');
|
||||
},
|
||||
category : function( $elem ) {
|
||||
return $elem.attr('data-category');
|
||||
},
|
||||
number : function( $elem ) {
|
||||
return parseInt( $elem.find('.number').text(), 10 );
|
||||
},
|
||||
weight : function( $elem ) {
|
||||
return parseFloat( $elem.find('.weight').text().replace( /[\(\)]/g, '') );
|
||||
},
|
||||
name : function ( $elem ) {
|
||||
return $elem.find('.name').text();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
var $optionSets = $('#options .option-set'),
|
||||
$optionLinks = $optionSets.find('a');
|
||||
|
||||
$optionLinks.click(function(){
|
||||
var $this = $(this);
|
||||
// don't proceed if already selected
|
||||
if ( $this.hasClass('selected') ) {
|
||||
return false;
|
||||
}
|
||||
var $optionSet = $this.parents('.option-set');
|
||||
$optionSet.find('.selected').removeClass('selected');
|
||||
$this.addClass('selected');
|
||||
|
||||
// make option object dynamically, i.e. { filter: '.my-filter-class' }
|
||||
var options = {},
|
||||
key = $optionSet.attr('data-option-key'),
|
||||
value = $this.attr('data-option-value');
|
||||
// parse 'false' as false boolean
|
||||
value = value === 'false' ? false : value;
|
||||
options[ key ] = value;
|
||||
if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
|
||||
// changes in layout modes need extra logic
|
||||
changeLayoutMode( $this, options )
|
||||
} else {
|
||||
// otherwise, apply new options
|
||||
$container.isotope( options );
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
|
||||
$('#insert a').click(function(){
|
||||
var $newEls = $( fakeElement.getGroup() );
|
||||
$container.isotope( 'insert', $newEls );
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
$('#append a').click(function(){
|
||||
var $newEls = $( fakeElement.getGroup() );
|
||||
$container.append( $newEls ).isotope( 'appended', $newEls );
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
|
||||
// change size of clicked element
|
||||
$container.delegate( '.element', 'click', function(){
|
||||
$(this).toggleClass('large');
|
||||
$container.isotope('reLayout');
|
||||
});
|
||||
|
||||
// toggle variable sizes of all elements
|
||||
$('#toggle-sizes').find('a').click(function(){
|
||||
$container
|
||||
.toggleClass('variable-sizes')
|
||||
.isotope('reLayout');
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
var $sortBy = $('#sort-by');
|
||||
$('#shuffle a').click(function(){
|
||||
$container.isotope('shuffle');
|
||||
$sortBy.find('.selected').removeClass('selected');
|
||||
$sortBy.find('[data-option-value="random"]').addClass('selected');
|
||||
return false;
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<footer>
|
||||
Isotope by <a href="http://desandro.com">David DeSandro</a> / <a href="http://metafizzy.co">Metafizzy</a>
|
||||
</footer>
|
||||
|
||||
</section> <!-- #content -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,552 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<title>Masonry gutters · Isotope </title>
|
||||
|
||||
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
|
||||
<!-- scripts at bottom of page -->
|
||||
|
||||
</head>
|
||||
<body class="custom-layout-modes ">
|
||||
|
||||
<nav id="site-nav">
|
||||
<h1><a href="../index.html">Isotope</a></h1>
|
||||
|
||||
<h2>Docs</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../docs/introduction.html">Introduction</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/options.html">Options</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/methods.html">Methods</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/animating.html">Animating</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/extending-isotope.html">Extending Isotope</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/hash-history-jquery-bbq.html">Hash history with jQuery BBQ</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/help.html">Help</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/license.html">License</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Demos</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../demos/basic.html">Basic</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-complete.html">Elements Complete</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-partial.html">Elements Partial</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/relayout.html">reLayout</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/infinite-scroll.html">Infinite Scroll</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/images.html">Images</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/combination-filters.html">Combination filters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/hash-history.html">Hash history</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/fluid-responsive.html">Fluid / responsive</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Custom layout modes</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/centered-masonry.html">Centered Masonry</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/category-rows.html">Category rows</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-corner-stamp.html">Masonry corner stamp</a>
|
||||
|
||||
|
||||
|
||||
<li class="current"><a href="#content">Masonry gutters</a></li>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/spine-align.html">Spine align</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2><a href="../tests/index.html">Tests</a></h2>
|
||||
|
||||
</nav> <!-- #site-nav -->
|
||||
|
||||
<section id="content">
|
||||
|
||||
<h1>Masonry gutters</h1>
|
||||
|
||||
|
||||
<style>
|
||||
.element {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
#container {
|
||||
padding: 5px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<section id="copy">
|
||||
<p><a href="../docs/layout-modes.html#modified_layout_modes">Modified masonry layout mode</a> for gutterWidth. The items have no padding, so they can be lined-up horizontally adjacent to the container.</p>
|
||||
<p>Set <code>gutterWidth</code> within <code>masonry</code> options.</p>
|
||||
|
||||
<div class="highlight"><pre><code class="javascript"><span class="nx">$</span><span class="p">(</span><span class="s1">'#container'</span><span class="p">).</span><span class="nx">isotope</span><span class="p">({</span>
|
||||
<span class="nx">masonry</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">columnWidth</span><span class="o">:</span> <span class="mi">110</span><span class="p">,</span>
|
||||
<span class="nx">gutterWidth</span><span class="o">:</span> <span class="mi">10</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
<section id="options" class="clearfix">
|
||||
|
||||
|
||||
<h3>Filters</h3>
|
||||
|
||||
<ul id="filters" class="option-set clearfix" data-option-key="filter">
|
||||
<li><a href="#filter" data-option-value="*" class="selected">show all</a></li>
|
||||
<li><a href="#filter" data-option-value=".metal">metal</a></li>
|
||||
<li><a href="#filter" data-option-value=".transition">transition</a></li>
|
||||
<li><a href="#filter" data-option-value=".post-transition">post-transition</a></li>
|
||||
<li><a href="#filter" data-option-value=".nonmetal">nonmetal</a></li>
|
||||
<li><a href="#filter" data-option-value=".inner-transition">inner-transition</a></li>
|
||||
<li><a href="#filter" data-option-value=".alkali, .alkaline-earth">alkali and alkaline-earth</a></li>
|
||||
<li><a href="#filter" data-option-value=":not(.transition)">not transition</a></li>
|
||||
<li><a href="#filter" data-option-value=".metal:not(.transition)">metal but not transition</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<h3>Sort</h3>
|
||||
|
||||
<ul id="sort-by" class="option-set clearfix" data-option-key="sortBy">
|
||||
<li><a href="#sortBy=original-order" data-option-value="original-order" class="selected" data>original-order</a></li>
|
||||
<li><a href="#sortBy=name" data-option-value="name">name</a></li>
|
||||
<li><a href="#sortBy=symbol" data-option-value="symbol">symbol</a></li>
|
||||
<li><a href="#sortBy=number" data-option-value="number">number</a></li>
|
||||
<li><a href="#sortBy=weight" data-option-value="weight">weight</a></li>
|
||||
<li><a href="#sortBy=category" data-option-value="category">category</a></li>
|
||||
<li><a href="#sortBy=random" data-option-value="random">random</a></li>
|
||||
</ul>
|
||||
|
||||
<h3>Sort direction</h3>
|
||||
|
||||
<ul id="sort-direction" class="option-set clearfix" data-option-key="sortAscending">
|
||||
<li><a href="#sortAscending=true" data-option-value="true" class="selected">sort ascending</a></li>
|
||||
<li><a href="#sortAscending=false" data-option-value="false">sort descending</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h3>Etc</h3>
|
||||
|
||||
<ul id="etc" class="clearfix">
|
||||
<li id="toggle-sizes"><a href="#toggle-sizes">Toggle variable sizes</a></li>
|
||||
<li id="insert"><a href="#insert">Insert new elements</a></li>
|
||||
<li id="append"><a href='#append'>Append new elements</a></li>
|
||||
<li id="shuffle"><a href='#shuffle'>Shuffle</a></li>
|
||||
</ul>
|
||||
|
||||
</section> <!-- #options -->
|
||||
|
||||
<div id="container" class="clickable clearfix">
|
||||
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Hg" data-category="transition">
|
||||
<p class="number">80</p>
|
||||
<h3 class="symbol">Hg</h3>
|
||||
<h2 class="name">Mercury</h2>
|
||||
<p class="weight">200.59</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element metalloid " data-symbol="Te" data-category="metalloid">
|
||||
<p class="number">52</p>
|
||||
<h3 class="symbol">Te</h3>
|
||||
<h2 class="name">Tellurium</h2>
|
||||
<p class="weight">127.6</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element post-transition metal " data-symbol="Bi" data-category="post-transition">
|
||||
<p class="number">83</p>
|
||||
<h3 class="symbol">Bi</h3>
|
||||
<h2 class="name">Bismuth</h2>
|
||||
<p class="weight">208.9804</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Cd" data-category="transition">
|
||||
<p class="number">48</p>
|
||||
<h3 class="symbol">Cd</h3>
|
||||
<h2 class="name">Cadmium</h2>
|
||||
<p class="weight">112.411</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element alkaline-earth metal " data-symbol="Ca" data-category="alkaline-earth">
|
||||
<p class="number">20</p>
|
||||
<h3 class="symbol">Ca</h3>
|
||||
<h2 class="name">Calcium</h2>
|
||||
<p class="weight">40.078</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Re" data-category="transition">
|
||||
<p class="number">75</p>
|
||||
<h3 class="symbol">Re</h3>
|
||||
<h2 class="name">Rhenium</h2>
|
||||
<p class="weight">186.207</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element post-transition metal " data-symbol="Tl" data-category="post-transition">
|
||||
<p class="number">81</p>
|
||||
<h3 class="symbol">Tl</h3>
|
||||
<h2 class="name">Thallium</h2>
|
||||
<p class="weight">204.3833</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element metalloid " data-symbol="Sb" data-category="metalloid">
|
||||
<p class="number">51</p>
|
||||
<h3 class="symbol">Sb</h3>
|
||||
<h2 class="name">Antimony</h2>
|
||||
<p class="weight">121.76</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Co" data-category="transition">
|
||||
<p class="number">27</p>
|
||||
<h3 class="symbol">Co</h3>
|
||||
<h2 class="name">Cobalt</h2>
|
||||
<p class="weight">58.933195</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element lanthanoid metal inner-transition " data-symbol="Lu" data-category="lanthanoid">
|
||||
<p class="number">71</p>
|
||||
<h3 class="symbol">Lu</h3>
|
||||
<h2 class="name">Lutetium</h2>
|
||||
<p class="weight">174.9668</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element noble-gas nonmetal " data-symbol="Ar" data-category="noble-gas">
|
||||
<p class="number">18</p>
|
||||
<h3 class="symbol">Ar</h3>
|
||||
<h2 class="name">Argon</h2>
|
||||
<p class="weight">39.948</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element alkali metal " data-symbol="Rb" data-category="alkali">
|
||||
<p class="number">37</p>
|
||||
<h3 class="symbol">Rb</h3>
|
||||
<h2 class="name">Rubidium</h2>
|
||||
<p class="weight">85.4678</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="N" data-category="other">
|
||||
<p class="number">7</p>
|
||||
<h3 class="symbol">N</h3>
|
||||
<h2 class="name">Nitrogen</h2>
|
||||
<p class="weight">14.0067</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element actinoid metal inner-transition " data-symbol="Np" data-category="actinoid">
|
||||
<p class="number">93</p>
|
||||
<h3 class="symbol">Np</h3>
|
||||
<h2 class="name">Neptunium</h2>
|
||||
<p class="weight">(237)</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element actinoid metal inner-transition " data-symbol="Ac" data-category="actinoid">
|
||||
<p class="number">89</p>
|
||||
<h3 class="symbol">Ac</h3>
|
||||
<h2 class="name">Actinium</h2>
|
||||
<p class="weight">(227)</p>
|
||||
</div>
|
||||
|
||||
</div> <!-- #container -->
|
||||
|
||||
|
||||
<script src="../js/jquery-1.6.4.min.js"></script>
|
||||
<script src="../jquery.isotope.min.js"></script>
|
||||
<script src="../js/fake-element.js"></script>
|
||||
<script>
|
||||
|
||||
// modified Isotope methods for gutters in masonry
|
||||
$.Isotope.prototype._getMasonryGutterColumns = function() {
|
||||
var gutter = this.options.masonry && this.options.masonry.gutterWidth || 0;
|
||||
containerWidth = this.element.width();
|
||||
|
||||
this.masonry.columnWidth = this.options.masonry && this.options.masonry.columnWidth ||
|
||||
// or use the size of the first item
|
||||
this.$filteredAtoms.outerWidth(true) ||
|
||||
// if there's no items, use size of container
|
||||
containerWidth;
|
||||
|
||||
this.masonry.columnWidth += gutter;
|
||||
|
||||
this.masonry.cols = Math.floor( ( containerWidth + gutter ) / this.masonry.columnWidth );
|
||||
this.masonry.cols = Math.max( this.masonry.cols, 1 );
|
||||
};
|
||||
|
||||
$.Isotope.prototype._masonryReset = function() {
|
||||
// layout-specific props
|
||||
this.masonry = {};
|
||||
// FIXME shouldn't have to call this again
|
||||
this._getMasonryGutterColumns();
|
||||
var i = this.masonry.cols;
|
||||
this.masonry.colYs = [];
|
||||
while (i--) {
|
||||
this.masonry.colYs.push( 0 );
|
||||
}
|
||||
};
|
||||
|
||||
$.Isotope.prototype._masonryResizeChanged = function() {
|
||||
var prevSegments = this.masonry.cols;
|
||||
// update cols/rows
|
||||
this._getMasonryGutterColumns();
|
||||
// return if updated cols/rows is not equal to previous
|
||||
return ( this.masonry.cols !== prevSegments );
|
||||
};
|
||||
|
||||
|
||||
$(function(){
|
||||
|
||||
var $container = $('#container');
|
||||
|
||||
|
||||
// add randomish size classes
|
||||
$container.find('.element').each(function(){
|
||||
var $this = $(this),
|
||||
number = parseInt( $this.find('.number').text(), 10 );
|
||||
if ( number % 7 % 2 === 1 ) {
|
||||
$this.addClass('width2');
|
||||
}
|
||||
if ( number % 3 === 0 ) {
|
||||
$this.addClass('height2');
|
||||
}
|
||||
});
|
||||
|
||||
$container.isotope({
|
||||
itemSelector : '.element',
|
||||
masonry : {
|
||||
columnWidth : 110,
|
||||
gutterWidth : 10
|
||||
},
|
||||
getSortData : {
|
||||
symbol : function( $elem ) {
|
||||
return $elem.attr('data-symbol');
|
||||
},
|
||||
category : function( $elem ) {
|
||||
return $elem.attr('data-category');
|
||||
},
|
||||
number : function( $elem ) {
|
||||
return parseInt( $elem.find('.number').text(), 10 );
|
||||
},
|
||||
weight : function( $elem ) {
|
||||
return parseFloat( $elem.find('.weight').text().replace( /[\(\)]/g, '') );
|
||||
},
|
||||
name : function ( $elem ) {
|
||||
return $elem.find('.name').text();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
var $optionSets = $('#options .option-set'),
|
||||
$optionLinks = $optionSets.find('a');
|
||||
|
||||
$optionLinks.click(function(){
|
||||
var $this = $(this);
|
||||
// don't proceed if already selected
|
||||
if ( $this.hasClass('selected') ) {
|
||||
return false;
|
||||
}
|
||||
var $optionSet = $this.parents('.option-set');
|
||||
$optionSet.find('.selected').removeClass('selected');
|
||||
$this.addClass('selected');
|
||||
|
||||
// make option object dynamically, i.e. { filter: '.my-filter-class' }
|
||||
var options = {},
|
||||
key = $optionSet.attr('data-option-key'),
|
||||
value = $this.attr('data-option-value');
|
||||
// parse 'false' as false boolean
|
||||
value = value === 'false' ? false : value;
|
||||
options[ key ] = value;
|
||||
if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
|
||||
// changes in layout modes need extra logic
|
||||
changeLayoutMode( $this, options )
|
||||
} else {
|
||||
// otherwise, apply new options
|
||||
$container.isotope( options );
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
|
||||
$('#insert a').click(function(){
|
||||
var $newEls = $( fakeElement.getGroup() );
|
||||
$container.isotope( 'insert', $newEls );
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
$('#append a').click(function(){
|
||||
var $newEls = $( fakeElement.getGroup() );
|
||||
$container.append( $newEls ).isotope( 'appended', $newEls );
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
|
||||
// change size of clicked element
|
||||
$container.delegate( '.element', 'click', function(){
|
||||
$(this).toggleClass('large');
|
||||
$container.isotope('reLayout');
|
||||
});
|
||||
|
||||
// toggle variable sizes of all elements
|
||||
$('#toggle-sizes').find('a').click(function(){
|
||||
$container
|
||||
.toggleClass('variable-sizes')
|
||||
.isotope('reLayout');
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
var $sortBy = $('#sort-by');
|
||||
$('#shuffle a').click(function(){
|
||||
$container.isotope('shuffle');
|
||||
$sortBy.find('.selected').removeClass('selected');
|
||||
$sortBy.find('[data-option-value="random"]').addClass('selected');
|
||||
return false;
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<footer>
|
||||
Isotope by <a href="http://desandro.com">David DeSandro</a> / <a href="http://metafizzy.co">Metafizzy</a>
|
||||
</footer>
|
||||
|
||||
</section> <!-- #content -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,543 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<title>Spine align · Isotope </title>
|
||||
|
||||
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
|
||||
<!-- scripts at bottom of page -->
|
||||
|
||||
</head>
|
||||
<body class="custom-layout-modes ">
|
||||
|
||||
<nav id="site-nav">
|
||||
<h1><a href="../index.html">Isotope</a></h1>
|
||||
|
||||
<h2>Docs</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../docs/introduction.html">Introduction</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/options.html">Options</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/methods.html">Methods</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/animating.html">Animating</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/extending-isotope.html">Extending Isotope</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/hash-history-jquery-bbq.html">Hash history with jQuery BBQ</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/help.html">Help</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/license.html">License</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Demos</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../demos/basic.html">Basic</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-complete.html">Elements Complete</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-partial.html">Elements Partial</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/relayout.html">reLayout</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/infinite-scroll.html">Infinite Scroll</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/images.html">Images</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/combination-filters.html">Combination filters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/hash-history.html">Hash history</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/fluid-responsive.html">Fluid / responsive</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Custom layout modes</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/centered-masonry.html">Centered Masonry</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/category-rows.html">Category rows</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-corner-stamp.html">Masonry corner stamp</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-gutters.html">Masonry gutters</a>
|
||||
|
||||
|
||||
|
||||
<li class="current"><a href="#content">Spine align</a></li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2><a href="../tests/index.html">Tests</a></h2>
|
||||
|
||||
</nav> <!-- #site-nav -->
|
||||
|
||||
<section id="content">
|
||||
|
||||
<h1>Spine align</h1>
|
||||
|
||||
|
||||
<section id="copy">
|
||||
<p><a href="../docs/extending-isotope.html">Custom layout mode</a> that aligns items to the center, placing them either left or right of the spine. <code>gutterWidth</code> option available.</p>
|
||||
|
||||
<div class="highlight"><pre><code class="javascript"><span class="nx">$container</span><span class="p">.</span><span class="nx">isotope</span><span class="p">({</span>
|
||||
<span class="nx">layoutMode</span><span class="o">:</span> <span class="s1">'spineAlign'</span><span class="p">,</span>
|
||||
<span class="nx">spineAlign</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">gutterWidth</span><span class="o">:</span> <span class="mi">20</span>
|
||||
<span class="p">},</span>
|
||||
<span class="c1">// options...</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
|
||||
<p>To use this layout mode, grab the <code>$.Isotope.prototype</code> methods from the script at the bottom of this page's source.</p>
|
||||
|
||||
</section>
|
||||
|
||||
<section id="options" class="clearfix">
|
||||
|
||||
|
||||
<h3>Filters</h3>
|
||||
|
||||
<ul id="filters" class="option-set clearfix" data-option-key="filter">
|
||||
<li><a href="#filter" data-option-value="*" class="selected">show all</a></li>
|
||||
<li><a href="#filter" data-option-value=".metal">metal</a></li>
|
||||
<li><a href="#filter" data-option-value=".transition">transition</a></li>
|
||||
<li><a href="#filter" data-option-value=".post-transition">post-transition</a></li>
|
||||
<li><a href="#filter" data-option-value=".nonmetal">nonmetal</a></li>
|
||||
<li><a href="#filter" data-option-value=".inner-transition">inner-transition</a></li>
|
||||
<li><a href="#filter" data-option-value=".alkali, .alkaline-earth">alkali and alkaline-earth</a></li>
|
||||
<li><a href="#filter" data-option-value=":not(.transition)">not transition</a></li>
|
||||
<li><a href="#filter" data-option-value=".metal:not(.transition)">metal but not transition</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<h3>Sort</h3>
|
||||
|
||||
<ul id="sort-by" class="option-set clearfix" data-option-key="sortBy">
|
||||
<li><a href="#sortBy=original-order" data-option-value="original-order" class="selected" data>original-order</a></li>
|
||||
<li><a href="#sortBy=name" data-option-value="name">name</a></li>
|
||||
<li><a href="#sortBy=symbol" data-option-value="symbol">symbol</a></li>
|
||||
<li><a href="#sortBy=number" data-option-value="number">number</a></li>
|
||||
<li><a href="#sortBy=weight" data-option-value="weight">weight</a></li>
|
||||
<li><a href="#sortBy=category" data-option-value="category">category</a></li>
|
||||
<li><a href="#sortBy=random" data-option-value="random">random</a></li>
|
||||
</ul>
|
||||
|
||||
<h3>Sort direction</h3>
|
||||
|
||||
<ul id="sort-direction" class="option-set clearfix" data-option-key="sortAscending">
|
||||
<li><a href="#sortAscending=true" data-option-value="true" class="selected">sort ascending</a></li>
|
||||
<li><a href="#sortAscending=false" data-option-value="false">sort descending</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h3>Etc</h3>
|
||||
|
||||
<ul id="etc" class="clearfix">
|
||||
<li id="toggle-sizes"><a href="#toggle-sizes">Toggle variable sizes</a></li>
|
||||
<li id="insert"><a href="#insert">Insert new elements</a></li>
|
||||
<li id="append"><a href='#append'>Append new elements</a></li>
|
||||
<li id="shuffle"><a href='#shuffle'>Shuffle</a></li>
|
||||
</ul>
|
||||
|
||||
</section> <!-- #options -->
|
||||
|
||||
<div id="container" class="clickable variable-sizes clearfix">
|
||||
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Hg" data-category="transition">
|
||||
<p class="number">80</p>
|
||||
<h3 class="symbol">Hg</h3>
|
||||
<h2 class="name">Mercury</h2>
|
||||
<p class="weight">200.59</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element metalloid " data-symbol="Te" data-category="metalloid">
|
||||
<p class="number">52</p>
|
||||
<h3 class="symbol">Te</h3>
|
||||
<h2 class="name">Tellurium</h2>
|
||||
<p class="weight">127.6</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element post-transition metal " data-symbol="Bi" data-category="post-transition">
|
||||
<p class="number">83</p>
|
||||
<h3 class="symbol">Bi</h3>
|
||||
<h2 class="name">Bismuth</h2>
|
||||
<p class="weight">208.9804</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Cd" data-category="transition">
|
||||
<p class="number">48</p>
|
||||
<h3 class="symbol">Cd</h3>
|
||||
<h2 class="name">Cadmium</h2>
|
||||
<p class="weight">112.411</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element alkaline-earth metal " data-symbol="Ca" data-category="alkaline-earth">
|
||||
<p class="number">20</p>
|
||||
<h3 class="symbol">Ca</h3>
|
||||
<h2 class="name">Calcium</h2>
|
||||
<p class="weight">40.078</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Re" data-category="transition">
|
||||
<p class="number">75</p>
|
||||
<h3 class="symbol">Re</h3>
|
||||
<h2 class="name">Rhenium</h2>
|
||||
<p class="weight">186.207</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element post-transition metal " data-symbol="Tl" data-category="post-transition">
|
||||
<p class="number">81</p>
|
||||
<h3 class="symbol">Tl</h3>
|
||||
<h2 class="name">Thallium</h2>
|
||||
<p class="weight">204.3833</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element metalloid " data-symbol="Sb" data-category="metalloid">
|
||||
<p class="number">51</p>
|
||||
<h3 class="symbol">Sb</h3>
|
||||
<h2 class="name">Antimony</h2>
|
||||
<p class="weight">121.76</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Co" data-category="transition">
|
||||
<p class="number">27</p>
|
||||
<h3 class="symbol">Co</h3>
|
||||
<h2 class="name">Cobalt</h2>
|
||||
<p class="weight">58.933195</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element lanthanoid metal inner-transition " data-symbol="Lu" data-category="lanthanoid">
|
||||
<p class="number">71</p>
|
||||
<h3 class="symbol">Lu</h3>
|
||||
<h2 class="name">Lutetium</h2>
|
||||
<p class="weight">174.9668</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element noble-gas nonmetal " data-symbol="Ar" data-category="noble-gas">
|
||||
<p class="number">18</p>
|
||||
<h3 class="symbol">Ar</h3>
|
||||
<h2 class="name">Argon</h2>
|
||||
<p class="weight">39.948</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element alkali metal " data-symbol="Rb" data-category="alkali">
|
||||
<p class="number">37</p>
|
||||
<h3 class="symbol">Rb</h3>
|
||||
<h2 class="name">Rubidium</h2>
|
||||
<p class="weight">85.4678</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="N" data-category="other">
|
||||
<p class="number">7</p>
|
||||
<h3 class="symbol">N</h3>
|
||||
<h2 class="name">Nitrogen</h2>
|
||||
<p class="weight">14.0067</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element actinoid metal inner-transition " data-symbol="Np" data-category="actinoid">
|
||||
<p class="number">93</p>
|
||||
<h3 class="symbol">Np</h3>
|
||||
<h2 class="name">Neptunium</h2>
|
||||
<p class="weight">(237)</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element actinoid metal inner-transition " data-symbol="Ac" data-category="actinoid">
|
||||
<p class="number">89</p>
|
||||
<h3 class="symbol">Ac</h3>
|
||||
<h2 class="name">Actinium</h2>
|
||||
<p class="weight">(227)</p>
|
||||
</div>
|
||||
|
||||
</div> <!-- #container -->
|
||||
|
||||
|
||||
<script src="../js/jquery-1.6.4.min.js"></script>
|
||||
<script src="../jquery.isotope.min.js"></script>
|
||||
<script src="../js/fake-element.js"></script>
|
||||
<script>
|
||||
|
||||
// custom layout mode spineAlign
|
||||
$.Isotope.prototype._spineAlignReset = function() {
|
||||
this.spineAlign = {
|
||||
colA: 0,
|
||||
colB: 0
|
||||
};
|
||||
};
|
||||
|
||||
$.Isotope.prototype._spineAlignLayout = function( $elems ) {
|
||||
var instance = this,
|
||||
props = this.spineAlign,
|
||||
gutterWidth = Math.round( this.options.spineAlign && this.options.spineAlign.gutterWidth ) || 0,
|
||||
centerX = Math.round(this.element.width() / 2);
|
||||
|
||||
$elems.each(function(){
|
||||
var $this = $(this),
|
||||
isColA = props.colB > props.colA,
|
||||
x = isColA ?
|
||||
centerX - ( $this.outerWidth(true) + gutterWidth / 2 ) : // left side
|
||||
centerX + gutterWidth / 2, // right side
|
||||
y = isColA ? props.colA : props.colB;
|
||||
instance._pushPosition( $this, x, y );
|
||||
props[( isColA ? 'colA' : 'colB' )] += $this.outerHeight(true);
|
||||
});
|
||||
};
|
||||
|
||||
$.Isotope.prototype._spineAlignGetContainerSize = function() {
|
||||
var size = {};
|
||||
size.height = this.spineAlign[( this.spineAlign.colB > this.spineAlign.colA ? 'colB' : 'colA' )];
|
||||
return size;
|
||||
};
|
||||
|
||||
$.Isotope.prototype._spineAlignResizeChanged = function() {
|
||||
return true;
|
||||
};
|
||||
|
||||
|
||||
$(function(){
|
||||
|
||||
var $container = $('#container');
|
||||
|
||||
|
||||
// add randomish size classes
|
||||
$container.find('.element').each(function(){
|
||||
var $this = $(this),
|
||||
number = parseInt( $this.find('.number').text(), 10 );
|
||||
if ( number % 7 % 2 === 1 ) {
|
||||
$this.addClass('width2');
|
||||
}
|
||||
if ( number % 3 === 0 ) {
|
||||
$this.addClass('height2');
|
||||
}
|
||||
});
|
||||
|
||||
$container.isotope({
|
||||
itemSelector : '.element',
|
||||
layoutMode: 'spineAlign',
|
||||
spineAlign: {
|
||||
gutterWidth: 20
|
||||
},
|
||||
getSortData : {
|
||||
symbol : function( $elem ) {
|
||||
return $elem.attr('data-symbol');
|
||||
},
|
||||
category : function( $elem ) {
|
||||
return $elem.attr('data-category');
|
||||
},
|
||||
number : function( $elem ) {
|
||||
return parseInt( $elem.find('.number').text(), 10 );
|
||||
},
|
||||
weight : function( $elem ) {
|
||||
return parseFloat( $elem.find('.weight').text().replace( /[\(\)]/g, '') );
|
||||
},
|
||||
name : function ( $elem ) {
|
||||
return $elem.find('.name').text();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
var $optionSets = $('#options .option-set'),
|
||||
$optionLinks = $optionSets.find('a');
|
||||
|
||||
$optionLinks.click(function(){
|
||||
var $this = $(this);
|
||||
// don't proceed if already selected
|
||||
if ( $this.hasClass('selected') ) {
|
||||
return false;
|
||||
}
|
||||
var $optionSet = $this.parents('.option-set');
|
||||
$optionSet.find('.selected').removeClass('selected');
|
||||
$this.addClass('selected');
|
||||
|
||||
// make option object dynamically, i.e. { filter: '.my-filter-class' }
|
||||
var options = {},
|
||||
key = $optionSet.attr('data-option-key'),
|
||||
value = $this.attr('data-option-value');
|
||||
// parse 'false' as false boolean
|
||||
value = value === 'false' ? false : value;
|
||||
options[ key ] = value;
|
||||
if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
|
||||
// changes in layout modes need extra logic
|
||||
changeLayoutMode( $this, options )
|
||||
} else {
|
||||
// otherwise, apply new options
|
||||
$container.isotope( options );
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
|
||||
$('#insert a').click(function(){
|
||||
var $newEls = $( fakeElement.getGroup() );
|
||||
$container.isotope( 'insert', $newEls );
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
$('#append a').click(function(){
|
||||
var $newEls = $( fakeElement.getGroup() );
|
||||
$container.append( $newEls ).isotope( 'appended', $newEls );
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
|
||||
// change size of clicked element
|
||||
$container.delegate( '.element', 'click', function(){
|
||||
$(this).toggleClass('large');
|
||||
$container.isotope('reLayout');
|
||||
});
|
||||
|
||||
// toggle variable sizes of all elements
|
||||
$('#toggle-sizes').find('a').click(function(){
|
||||
$container
|
||||
.toggleClass('variable-sizes')
|
||||
.isotope('reLayout');
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
var $sortBy = $('#sort-by');
|
||||
$('#shuffle a').click(function(){
|
||||
$container.isotope('shuffle');
|
||||
$sortBy.find('.selected').removeClass('selected');
|
||||
$sortBy.find('[data-option-value="random"]').addClass('selected');
|
||||
return false;
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<footer>
|
||||
Isotope by <a href="http://desandro.com">David DeSandro</a> / <a href="http://metafizzy.co">Metafizzy</a>
|
||||
</footer>
|
||||
|
||||
</section> <!-- #content -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
238
sites/all/libraries/isotope-site/docs/adding-items.html
Normal file
238
sites/all/libraries/isotope-site/docs/adding-items.html
Normal file
@@ -0,0 +1,238 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<title>Adding items · Isotope Docs</title>
|
||||
|
||||
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
|
||||
<!-- scripts at bottom of page -->
|
||||
|
||||
</head>
|
||||
<body class="docs ">
|
||||
|
||||
<nav id="site-nav">
|
||||
<h1><a href="../index.html">Isotope</a></h1>
|
||||
|
||||
<h2>Docs</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../docs/introduction.html">Introduction</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/options.html">Options</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/methods.html">Methods</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/animating.html">Animating</a>
|
||||
|
||||
|
||||
|
||||
<li class="current"><a href="#content">Adding items</a>
|
||||
<ul class="toc">
|
||||
|
||||
<li><a href="#additems_method">addItems method</a></li>
|
||||
|
||||
<li><a href="#insert_method">insert method</a></li>
|
||||
|
||||
<li><a href="#appended_method">appended method</a></li>
|
||||
|
||||
<li><a href="#prepending">Prepending</a></li>
|
||||
|
||||
<li><a href="#recommended_css">Recommended CSS</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/extending-isotope.html">Extending Isotope</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/hash-history-jquery-bbq.html">Hash history with jQuery BBQ</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/help.html">Help</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/license.html">License</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Demos</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../demos/basic.html">Basic</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-complete.html">Elements Complete</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-partial.html">Elements Partial</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/relayout.html">reLayout</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/infinite-scroll.html">Infinite Scroll</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/images.html">Images</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/combination-filters.html">Combination filters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/hash-history.html">Hash history</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/fluid-responsive.html">Fluid / responsive</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Custom layout modes</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/centered-masonry.html">Centered Masonry</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/category-rows.html">Category rows</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-corner-stamp.html">Masonry corner stamp</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-gutters.html">Masonry gutters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/spine-align.html">Spine align</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2><a href="../tests/index.html">Tests</a></h2>
|
||||
|
||||
</nav> <!-- #site-nav -->
|
||||
|
||||
<section id="content">
|
||||
|
||||
<h1>Adding items</h1>
|
||||
|
||||
|
||||
<p>If your application dynamically adds new content, Isotope provides several methods to add items.</p>
|
||||
|
||||
<p><a href='../demos/adding-items.html'><strong>See Demo: Adding items</strong></a>.</p>
|
||||
|
||||
<h2 id='additems_method'>addItems method</h2>
|
||||
|
||||
<p>The <a href='methods.html#additems'><code>addItems</code> method</a> adds new content to an Isotope container. This applies the proper styles to the items so they can be positioned and any sorting data is retrieved. But that’s it. The new content will <em>not</em> be filtered, sorted, or positioned properly, nor will it be appended to the container element.</p>
|
||||
<div class='highlight'><pre><code class='javascript'><span class='kd'>var</span> <span class='nx'>$newItems</span> <span class='o'>=</span> <span class='nx'>$</span><span class='p'>(</span><span class='s1'>'<div class="item" /><div class="item" /><div class="item" />'</span><span class='p'>);</span>
|
||||
<span class='nx'>$</span><span class='p'>(</span><span class='s1'>'#container'</span><span class='p'>).</span><span class='nx'>append</span><span class='p'>(</span> <span class='nx'>$newItems</span> <span class='p'>).</span><span class='nx'>isotope</span><span class='p'>(</span> <span class='s1'>'addItems'</span><span class='p'>,</span> <span class='nx'>$newItems</span> <span class='p'>);</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<h2 id='insert_method'>insert method</h2>
|
||||
|
||||
<p>More likely, you want to use the <a href='methods.html#insert'><code>insert</code> method</a>, which does everything that <code>addItems</code> misses. <code>insert</code> will append the content to the container, filter the new content, sort all the content, then trigger a <code>reLayout</code> so all item elements are properly laid out.</p>
|
||||
<div class='highlight'><pre><code class='javascript'><span class='kd'>var</span> <span class='nx'>$newItems</span> <span class='o'>=</span> <span class='nx'>$</span><span class='p'>(</span><span class='s1'>'<div class="item" /><div class="item" /><div class="item" />'</span><span class='p'>);</span>
|
||||
<span class='nx'>$</span><span class='p'>(</span><span class='s1'>'#container'</span><span class='p'>).</span><span class='nx'>isotope</span><span class='p'>(</span> <span class='s1'>'insert'</span><span class='p'>,</span> <span class='nx'>$newItems</span> <span class='p'>);</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<h2 id='appended_method'>appended method</h2>
|
||||
|
||||
<p>The <a href='methods.html#appended'><code>appended</code> method</a> is a convenience method triggers <code>addItems</code> on new content, then lays out <em>only the new content</em> at the end of the layout. This method is useful if you know you only want to add new content to the end, and <strong>not</strong> use filtering or sorting. <code>appended</code> is the best method to use with Infinite Scroll.</p>
|
||||
|
||||
<p><a href='../demos/infinite-scroll.html'><strong>See Demo: Infinite Scroll</strong></a>.</p>
|
||||
|
||||
<p>See also <a href='help.html#infinite_scroll_with_filtering_or_sorting'>Infinite Scroll with filtering or sorting</a></p>
|
||||
|
||||
<h2 id='prepending'>Prepending</h2>
|
||||
|
||||
<p>Because of Isotope’s sorting functionality, prepending isn’t as straight forward as might expect. However, it can be replicated fairly easy. After prepending new content to the container, you can re-collect all the item elements and update their sorting order with the <a href='methods.html#reloaditems'><code>reloadItems</code> method</a>. Then trigger a re-layout, with the original DOM order.</p>
|
||||
<div class='highlight'><pre><code class='javascript'><span class='kd'>var</span> <span class='nx'>$newItems</span> <span class='o'>=</span> <span class='nx'>$</span><span class='p'>(</span><span class='s1'>'<div class="item" /><div class="item" /><div class="item" />'</span><span class='p'>);</span>
|
||||
<span class='nx'>$</span><span class='p'>(</span><span class='s1'>'#container'</span><span class='p'>).</span><span class='nx'>prepend</span><span class='p'>(</span> <span class='nx'>$newItems</span><span class='p'>)</span>
|
||||
<span class='p'>.</span><span class='nx'>isotope</span><span class='p'>(</span> <span class='s1'>'reloadItems'</span> <span class='p'>).</span><span class='nx'>isotope</span><span class='p'>({</span> <span class='nx'>sortBy</span><span class='o'>:</span> <span class='s1'>'original-order'</span> <span class='p'>});</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<h2 id='recommended_css'>Recommended CSS</h2>
|
||||
|
||||
<p>You’ll need these styles in your CSS for the reveal animation when adding items.</p>
|
||||
<div class='highlight'><pre><code class='css'><span class='c'>/**** disabling Isotope CSS3 transitions ****/</span>
|
||||
|
||||
<span class='nc'>.isotope.no-transition</span><span class='o'>,</span>
|
||||
<span class='nc'>.isotope.no-transition</span> <span class='nc'>.isotope-item</span><span class='o'>,</span>
|
||||
<span class='nc'>.isotope</span> <span class='nc'>.isotope-item.no-transition</span> <span class='p'>{</span>
|
||||
<span class='o'>-</span><span class='n'>webkit</span><span class='o'>-</span><span class='n'>transition</span><span class='o'>-</span><span class='n'>duration</span><span class='o'>:</span> <span class='m'>0s</span><span class='p'>;</span>
|
||||
<span class='o'>-</span><span class='n'>moz</span><span class='o'>-</span><span class='n'>transition</span><span class='o'>-</span><span class='n'>duration</span><span class='o'>:</span> <span class='m'>0s</span><span class='p'>;</span>
|
||||
<span class='n'>transition</span><span class='o'>-</span><span class='n'>duration</span><span class='o'>:</span> <span class='m'>0s</span><span class='p'>;</span>
|
||||
<span class='p'>}</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
Isotope by <a href="http://desandro.com">David DeSandro</a> / <a href="http://metafizzy.co">Metafizzy</a>
|
||||
</footer>
|
||||
|
||||
</section> <!-- #content -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
265
sites/all/libraries/isotope-site/docs/animating.html
Normal file
265
sites/all/libraries/isotope-site/docs/animating.html
Normal file
@@ -0,0 +1,265 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<title>Animating · Isotope Docs</title>
|
||||
|
||||
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
|
||||
<!-- scripts at bottom of page -->
|
||||
|
||||
</head>
|
||||
<body class="docs ">
|
||||
|
||||
<nav id="site-nav">
|
||||
<h1><a href="../index.html">Isotope</a></h1>
|
||||
|
||||
<h2>Docs</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../docs/introduction.html">Introduction</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/options.html">Options</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/methods.html">Methods</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li class="current"><a href="#content">Animating</a>
|
||||
<ul class="toc">
|
||||
|
||||
<li><a href="#animationengine_option">animationEngine option</a></li>
|
||||
|
||||
<li><a href="#css_transitions">CSS transitions</a></li>
|
||||
|
||||
<li><a href="#variations">Variations</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/extending-isotope.html">Extending Isotope</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/hash-history-jquery-bbq.html">Hash history with jQuery BBQ</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/help.html">Help</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/license.html">License</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Demos</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../demos/basic.html">Basic</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-complete.html">Elements Complete</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-partial.html">Elements Partial</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/relayout.html">reLayout</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/infinite-scroll.html">Infinite Scroll</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/images.html">Images</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/combination-filters.html">Combination filters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/hash-history.html">Hash history</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/fluid-responsive.html">Fluid / responsive</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Custom layout modes</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/centered-masonry.html">Centered Masonry</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/category-rows.html">Category rows</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-corner-stamp.html">Masonry corner stamp</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-gutters.html">Masonry gutters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/spine-align.html">Spine align</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2><a href="../tests/index.html">Tests</a></h2>
|
||||
|
||||
</nav> <!-- #site-nav -->
|
||||
|
||||
<section id="content">
|
||||
|
||||
<h1>Animating</h1>
|
||||
|
||||
|
||||
<p>Isotope was developed to take advantage of the best browser features available. For animations, you can use CSS3 transitions and transforms in capable browsers. Isotope provides Javascript animation fall back for lesser browsers.</p>
|
||||
|
||||
<h2 id='animationengine_option'>animationEngine option</h2>
|
||||
|
||||
<p>You can control how Isotope handles animation with the <a href='options.html#animationengine'><code>animationEngine</code></a> option. This option has three values which control whether jQuery applies styles with<code>.css()</code> or <code>.animate()</code>.</p>
|
||||
|
||||
<ul>
|
||||
<li><code>'best-available'</code>: if browser supports CSS transitions, Isotope uses <code>.css()</code>. If not, falls back to using <code>.animate()</code>.</li>
|
||||
|
||||
<li><code>'css'</code>: Isotope uses <code>.css()</code></li>
|
||||
|
||||
<li><code>'jquery'</code>: Isotope uses <code>.animate()</code></li>
|
||||
</ul>
|
||||
|
||||
<h2 id='css_transitions'>CSS transitions</h2>
|
||||
|
||||
<p>To enable animation with CSS transitions, you’ll need the following code in your CSS:</p>
|
||||
<div class='highlight'><pre><code class='css'><span class='nc'>.isotope</span><span class='o'>,</span>
|
||||
<span class='nc'>.isotope</span> <span class='nc'>.isotope-item</span> <span class='p'>{</span>
|
||||
<span class='c'>/* change duration value to whatever you like */</span>
|
||||
<span class='o'>-</span><span class='n'>webkit</span><span class='o'>-</span><span class='n'>transition</span><span class='o'>-</span><span class='n'>duration</span><span class='o'>:</span> <span class='m'>0.8s</span><span class='p'>;</span>
|
||||
<span class='o'>-</span><span class='n'>moz</span><span class='o'>-</span><span class='n'>transition</span><span class='o'>-</span><span class='n'>duration</span><span class='o'>:</span> <span class='m'>0.8s</span><span class='p'>;</span>
|
||||
<span class='n'>transition</span><span class='o'>-</span><span class='n'>duration</span><span class='o'>:</span> <span class='m'>0.8s</span><span class='p'>;</span>
|
||||
<span class='p'>}</span>
|
||||
|
||||
<span class='nc'>.isotope</span> <span class='p'>{</span>
|
||||
<span class='o'>-</span><span class='n'>webkit</span><span class='o'>-</span><span class='n'>transition</span><span class='o'>-</span><span class='n'>property</span><span class='o'>:</span> <span class='k'>height</span><span class='o'>,</span> <span class='k'>width</span><span class='p'>;</span>
|
||||
<span class='o'>-</span><span class='n'>moz</span><span class='o'>-</span><span class='n'>transition</span><span class='o'>-</span><span class='n'>property</span><span class='o'>:</span> <span class='k'>height</span><span class='o'>,</span> <span class='k'>width</span><span class='p'>;</span>
|
||||
<span class='n'>transition</span><span class='o'>-</span><span class='n'>property</span><span class='o'>:</span> <span class='k'>height</span><span class='o'>,</span> <span class='k'>width</span><span class='p'>;</span>
|
||||
<span class='p'>}</span>
|
||||
|
||||
<span class='nc'>.isotope</span> <span class='nc'>.isotope-item</span> <span class='p'>{</span>
|
||||
<span class='o'>-</span><span class='n'>webkit</span><span class='o'>-</span><span class='n'>transition</span><span class='o'>-</span><span class='n'>property</span><span class='o'>:</span> <span class='o'>-</span><span class='n'>webkit</span><span class='o'>-</span><span class='n'>transform</span><span class='o'>,</span> <span class='k'>opacity</span><span class='p'>;</span>
|
||||
<span class='o'>-</span><span class='n'>moz</span><span class='o'>-</span><span class='n'>transition</span><span class='o'>-</span><span class='n'>property</span><span class='o'>:</span> <span class='o'>-</span><span class='n'>moz</span><span class='o'>-</span><span class='n'>transform</span><span class='o'>,</span> <span class='k'>opacity</span><span class='p'>;</span>
|
||||
<span class='n'>transition</span><span class='o'>-</span><span class='n'>property</span><span class='o'>:</span> <span class='n'>transform</span><span class='o'>,</span> <span class='k'>opacity</span><span class='p'>;</span>
|
||||
<span class='p'>}</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<h2 id='variations'>Variations</h2>
|
||||
|
||||
<p>With these two options you can finely control how animation is handled across browsers.</p>
|
||||
|
||||
<h3 id='best_available_recommended'>Best available (recommended)</h3>
|
||||
|
||||
<p>Browsers that support CSS transitions will use them. Other browsers will fall back to using jQuery animation.</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>Add</strong> CSS transition declarations</li>
|
||||
</ul>
|
||||
|
||||
<h3 id='always_use_jquery'>Always use jQuery</h3>
|
||||
|
||||
<p>All browsers will use jQuery animation, regardless of their CSS transition support.</p>
|
||||
|
||||
<ul>
|
||||
<li><code>animationEngine : 'jquery'</code></li>
|
||||
|
||||
<li><strong>No</strong> CSS transition declarations</li>
|
||||
</ul>
|
||||
|
||||
<p>Never set <code>animationEngine : 'jquery'</code> AND add CSS transition declarations. This will cause double-animation in browser that support CSS transitions — which is a bad thing.</p>
|
||||
|
||||
<h3 id='only_css_transitions'>Only CSS transitions</h3>
|
||||
|
||||
<ul>
|
||||
<li><code>animationEngine: 'css'</code></li>
|
||||
|
||||
<li><strong>Add</strong> CSS transition declarations</li>
|
||||
</ul>
|
||||
|
||||
<h3 id='none'>None</h3>
|
||||
|
||||
<p>Animation is not enabled in any browser</p>
|
||||
|
||||
<ul>
|
||||
<li><code>animationEngine : 'css'</code></li>
|
||||
|
||||
<li><strong>No</strong> CSS transition declarations</li>
|
||||
</ul>
|
||||
|
||||
<footer>
|
||||
Isotope by <a href="http://desandro.com">David DeSandro</a> / <a href="http://metafizzy.co">Metafizzy</a>
|
||||
</footer>
|
||||
|
||||
</section> <!-- #content -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
312
sites/all/libraries/isotope-site/docs/extending-isotope.html
Normal file
312
sites/all/libraries/isotope-site/docs/extending-isotope.html
Normal file
@@ -0,0 +1,312 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<title>Extending Isotope · Isotope Docs</title>
|
||||
|
||||
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
|
||||
<!-- scripts at bottom of page -->
|
||||
|
||||
</head>
|
||||
<body class="docs ">
|
||||
|
||||
<nav id="site-nav">
|
||||
<h1><a href="../index.html">Isotope</a></h1>
|
||||
|
||||
<h2>Docs</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../docs/introduction.html">Introduction</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/options.html">Options</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/methods.html">Methods</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/animating.html">Animating</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li class="current"><a href="#content">Extending Isotope</a>
|
||||
<ul class="toc">
|
||||
|
||||
<li><a href="#custom_layout_modes">Custom layout modes</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/hash-history-jquery-bbq.html">Hash history with jQuery BBQ</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/help.html">Help</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/license.html">License</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Demos</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../demos/basic.html">Basic</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-complete.html">Elements Complete</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-partial.html">Elements Partial</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/relayout.html">reLayout</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/infinite-scroll.html">Infinite Scroll</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/images.html">Images</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/combination-filters.html">Combination filters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/hash-history.html">Hash history</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/fluid-responsive.html">Fluid / responsive</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Custom layout modes</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/centered-masonry.html">Centered Masonry</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/category-rows.html">Category rows</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-corner-stamp.html">Masonry corner stamp</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-gutters.html">Masonry gutters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/spine-align.html">Spine align</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2><a href="../tests/index.html">Tests</a></h2>
|
||||
|
||||
</nav> <!-- #site-nav -->
|
||||
|
||||
<section id="content">
|
||||
|
||||
<h1>Extending Isotope</h1>
|
||||
|
||||
|
||||
<p>Isotope uses a constructor pattern, <code>$.Isotope</code>. To extend Isotope, you need only to add a method to <code>$.Isotope.prototype</code>.</p>
|
||||
<div class='highlight'><pre><code class='javascript'><span class='nx'>$</span><span class='p'>.</span><span class='nx'>Isotope</span><span class='p'>.</span><span class='nx'>prototype</span><span class='p'>.</span><span class='nx'>myMethod</span> <span class='o'>=</span> <span class='kd'>function</span><span class='p'>()</span> <span class='p'>{</span> <span class='p'>...</span> <span class='p'>};</span>
|
||||
|
||||
<span class='c1'>// or, using jQuery extend utility</span>
|
||||
<span class='nx'>$</span><span class='p'>.</span><span class='nx'>extend</span><span class='p'>(</span> <span class='nx'>$</span><span class='p'>.</span><span class='nx'>Isotope</span><span class='p'>.</span><span class='nx'>prototype</span><span class='p'>,</span> <span class='p'>{</span>
|
||||
<span class='nx'>myMethod</span> <span class='o'>:</span> <span class='kd'>function</span><span class='p'>()</span> <span class='p'>{</span> <span class='p'>...</span> <span class='p'>}</span>
|
||||
<span class='p'>});</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<p>Before diving in, try <a href='../jquery.isotope.js'>looking over the source</a> to get a better understand of the internal logic behind Isotope.</p>
|
||||
|
||||
<h2 id='custom_layout_modes'>Custom layout modes</h2>
|
||||
|
||||
<p>Isotope’s layout modes are built around four methods: <code>Reset</code>, <code>Layout</code>, <code>GetContainerSize</code>, and <code>ResizeChanged</code>. These methods are the hooks that allow you to develop your own custom layout mode, without getting your hands dirty dealing with sorting, filtering, or other functionality. These layout mode methods need to be prefixed with an underscore and the name of the layout mode.</p>
|
||||
<div class='highlight'><pre><code class='javascript'><span class='c1'>// adding layout mode methods for 'customMode'</span>
|
||||
<span class='nx'>$</span><span class='p'>.</span><span class='nx'>extend</span><span class='p'>(</span> <span class='nx'>$</span><span class='p'>.</span><span class='nx'>Isotope</span><span class='p'>.</span><span class='nx'>prototype</span><span class='p'>,</span> <span class='p'>{</span>
|
||||
<span class='nx'>_customModeReset</span> <span class='o'>:</span> <span class='kd'>function</span><span class='p'>()</span> <span class='p'>{</span> <span class='p'>...</span> <span class='p'>},</span>
|
||||
<span class='nx'>_customModeLayout</span> <span class='o'>:</span> <span class='kd'>function</span><span class='p'>(</span> <span class='nx'>$elems</span> <span class='p'>)</span> <span class='p'>{</span> <span class='p'>...</span> <span class='p'>},</span>
|
||||
<span class='nx'>_customModeGetContainerSize</span> <span class='o'>:</span> <span class='kd'>function</span><span class='p'>()</span> <span class='p'>{</span> <span class='p'>...</span> <span class='p'>},</span>
|
||||
<span class='nx'>_customModeResizeChanged</span> <span class='o'>:</span> <span class='kd'>function</span><span class='p'>()</span> <span class='p'>{</span> <span class='p'>...</span> <span class='p'>}</span>
|
||||
<span class='p'>});</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<p><a href='../custom-layout-modes/category-rows.html'><strong>See Custom layout mode: Category Rows</strong></a> <a href='../custom-layout-modes/spine-align.html'><strong>See Custom layout mode: Spine align</strong></a></p>
|
||||
|
||||
<p>All of the <a href='../docs/layout-modes.html'>default layout modes</a> follow this pattern. We’ll look at the code behind the <em>fitRows</em> layout mode.</p>
|
||||
|
||||
<h3 id='reset'>Reset</h3>
|
||||
|
||||
<p>Each layout mode should have its own set of properties that only it can use and not be affected by other layout modes. These properties can be accessed in the instance as an object whose value matches the layout mode name (i.e. <code>this.fitRows</code> for <em>fitRows</em>).</p>
|
||||
|
||||
<p>The <code>Reset</code> layout mode method is called with every <code>reLayout</code>, where Isotope will go through each item element and position it. This method resets layout mode properties.</p>
|
||||
|
||||
<p>The <em>fitRows</em> layout mode keeps track of x and y position, as well as the height of the container. These properties are set back to zero in <code>Reset</code>.</p>
|
||||
<div class='highlight'><pre><code class='javascript'><span class='nx'>_fitRowsReset</span> <span class='o'>:</span> <span class='kd'>function</span><span class='p'>()</span> <span class='p'>{</span>
|
||||
<span class='k'>this</span><span class='p'>.</span><span class='nx'>fitRows</span> <span class='o'>=</span> <span class='p'>{</span>
|
||||
<span class='nx'>x</span> <span class='o'>:</span> <span class='mi'>0</span><span class='p'>,</span>
|
||||
<span class='nx'>y</span> <span class='o'>:</span> <span class='mi'>0</span><span class='p'>,</span>
|
||||
<span class='nx'>height</span> <span class='o'>:</span> <span class='mi'>0</span>
|
||||
<span class='p'>};</span>
|
||||
<span class='p'>},</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<h3 id='layout'>Layout</h3>
|
||||
|
||||
<p>The <code>Layout</code> layout mode method is where items are positioned. Most of your layout logic happens here. This method provides one argument <code>$elems</code> – a jQuery object with the item elements that need to be positioned.</p>
|
||||
|
||||
<p><code>$elems.each</code> is the principle loop, iterating over each item element and positioning it. Items are positioned with the <code>_pushPosition</code> method (see below). The layout modes properties are</p>
|
||||
|
||||
<p>For <em>fitRows</em>, items are placed with the <code>this.fitRows.x</code> and <code>this.fitRows.y</code> values. This position is determined by if the item can fit in the current row, or if a new row needs to be started.</p>
|
||||
<div class='highlight'><pre><code class='javascript'><span class='nx'>_fitRowsLayout</span> <span class='o'>:</span> <span class='kd'>function</span><span class='p'>(</span> <span class='nx'>$elems</span> <span class='p'>)</span> <span class='p'>{</span>
|
||||
<span class='kd'>var</span> <span class='nx'>instance</span> <span class='o'>=</span> <span class='k'>this</span><span class='p'>,</span>
|
||||
<span class='nx'>containerWidth</span> <span class='o'>=</span> <span class='k'>this</span><span class='p'>.</span><span class='nx'>element</span><span class='p'>.</span><span class='nx'>width</span><span class='p'>(),</span>
|
||||
<span class='nx'>props</span> <span class='o'>=</span> <span class='k'>this</span><span class='p'>.</span><span class='nx'>fitRows</span><span class='p'>;</span>
|
||||
|
||||
<span class='nx'>$elems</span><span class='p'>.</span><span class='nx'>each</span><span class='p'>(</span> <span class='kd'>function</span><span class='p'>()</span> <span class='p'>{</span>
|
||||
<span class='kd'>var</span> <span class='nx'>$this</span> <span class='o'>=</span> <span class='nx'>$</span><span class='p'>(</span><span class='k'>this</span><span class='p'>),</span>
|
||||
<span class='nx'>atomW</span> <span class='o'>=</span> <span class='nx'>$this</span><span class='p'>.</span><span class='nx'>outerWidth</span><span class='p'>(</span><span class='kc'>true</span><span class='p'>),</span>
|
||||
<span class='nx'>atomH</span> <span class='o'>=</span> <span class='nx'>$this</span><span class='p'>.</span><span class='nx'>outerHeight</span><span class='p'>(</span><span class='kc'>true</span><span class='p'>);</span>
|
||||
|
||||
<span class='k'>if</span> <span class='p'>(</span> <span class='nx'>props</span><span class='p'>.</span><span class='nx'>x</span> <span class='o'>!==</span> <span class='mi'>0</span> <span class='o'>&&</span> <span class='nx'>atomW</span> <span class='o'>+</span> <span class='nx'>props</span><span class='p'>.</span><span class='nx'>x</span> <span class='o'>></span> <span class='nx'>containerWidth</span> <span class='p'>)</span> <span class='p'>{</span>
|
||||
<span class='c1'>// if this element cannot fit in the current row</span>
|
||||
<span class='nx'>props</span><span class='p'>.</span><span class='nx'>x</span> <span class='o'>=</span> <span class='mi'>0</span><span class='p'>;</span>
|
||||
<span class='nx'>props</span><span class='p'>.</span><span class='nx'>y</span> <span class='o'>=</span> <span class='nx'>props</span><span class='p'>.</span><span class='nx'>height</span><span class='p'>;</span>
|
||||
<span class='p'>}</span>
|
||||
|
||||
<span class='c1'>// position the atom</span>
|
||||
<span class='nx'>instance</span><span class='p'>.</span><span class='nx'>_pushPosition</span><span class='p'>(</span> <span class='nx'>$this</span><span class='p'>,</span> <span class='nx'>props</span><span class='p'>.</span><span class='nx'>x</span><span class='p'>,</span> <span class='nx'>props</span><span class='p'>.</span><span class='nx'>y</span> <span class='p'>);</span>
|
||||
|
||||
<span class='nx'>props</span><span class='p'>.</span><span class='nx'>height</span> <span class='o'>=</span> <span class='nb'>Math</span><span class='p'>.</span><span class='nx'>max</span><span class='p'>(</span> <span class='nx'>props</span><span class='p'>.</span><span class='nx'>y</span> <span class='o'>+</span> <span class='nx'>atomH</span><span class='p'>,</span> <span class='nx'>props</span><span class='p'>.</span><span class='nx'>height</span> <span class='p'>);</span>
|
||||
<span class='nx'>props</span><span class='p'>.</span><span class='nx'>x</span> <span class='o'>+=</span> <span class='nx'>atomW</span><span class='p'>;</span>
|
||||
|
||||
<span class='p'>});</span>
|
||||
<span class='p'>},</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<h3 id='getcontainersize'>GetContainerSize</h3>
|
||||
|
||||
<p>After the script goes through positioning each item, it needs to resize the container. <code>GetContainerSize</code> returns the style for the size of the container.</p>
|
||||
|
||||
<p>In <em>fitRows</em>, the height property is returned as the value for height.</p>
|
||||
<div class='highlight'><pre><code class='javascript'><span class='nx'>_fitRowsGetContainerSize</span> <span class='o'>:</span> <span class='kd'>function</span> <span class='p'>()</span> <span class='p'>{</span>
|
||||
<span class='k'>return</span> <span class='p'>{</span> <span class='nx'>height</span> <span class='o'>:</span> <span class='k'>this</span><span class='p'>.</span><span class='nx'>fitRows</span><span class='p'>.</span><span class='nx'>height</span> <span class='p'>};</span>
|
||||
<span class='p'>},</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<h3 id='resizechanged'>ResizeChanged</h3>
|
||||
|
||||
<p><code>ResizeChanged</code> is triggered whenever the browser window is resized. Before Isotope adjusts the layout, this method is triggered to determine if the layout has actually changed. The methods return a boolean.</p>
|
||||
<div class='highlight'><pre><code class='javascript'><span class='nx'>_fitRowsResizeChanged</span> <span class='o'>:</span> <span class='kd'>function</span><span class='p'>()</span> <span class='p'>{</span>
|
||||
<span class='k'>return</span> <span class='kc'>true</span><span class='p'>;</span>
|
||||
<span class='p'>},</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<h3 id='helper_methods'>Helper methods</h3>
|
||||
|
||||
<p>The <code>_pushPosition</code> method is used within a layout mode’s <code>Layout</code> method. It takes 3 arguments: the item element currently being positioned, the x position, and the y position.</p>
|
||||
<div class='highlight'><pre><code class='javascript'><span class='nx'>_pushPosition</span><span class='p'>(</span> <span class='nx'>$item</span><span class='p'>,</span> <span class='nx'>x</span><span class='p'>,</span> <span class='nx'>y</span> <span class='p'>)</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<p><code>_getSegments</code> is used within the layout mode’s <code>Reset</code> method. It performs several utilities:</p>
|
||||
|
||||
<ul>
|
||||
<li>Determines the <code>columnWidth</code> for the layout mode (<code>rowHeight</code> for horizontal layout modes). This is either passed in as an option (i.e. <code>masonry { columnWidth: 90 }</code>), or the width of the first item element. This property is then set for the layout mode, i.e. <code>this.masonry.columnWidth</code>.</li>
|
||||
|
||||
<li>Calculates the number of number of columns (or rows, if horizontal) given the size of the container. This property is then set for the layout mode, i.e. <code>this.masonry.cols</code>.</li>
|
||||
</ul>
|
||||
<div class='highlight'><pre><code class='javascript'><span class='nx'>_getSegments</span><span class='p'>(</span> <span class='nx'>isHorizontal</span> <span class='p'>)</span>
|
||||
|
||||
<span class='c1'>// for example</span>
|
||||
<span class='nx'>_cellsByRowReset</span> <span class='o'>:</span> <span class='kd'>function</span><span class='p'>()</span> <span class='p'>{</span>
|
||||
<span class='k'>this</span><span class='p'>.</span><span class='nx'>cellsByRow</span> <span class='o'>=</span> <span class='p'>{</span>
|
||||
<span class='nx'>index</span> <span class='o'>:</span> <span class='mi'>0</span>
|
||||
<span class='p'>};</span>
|
||||
<span class='c1'>// get this.cellsByRow.columnWidth</span>
|
||||
<span class='k'>this</span><span class='p'>.</span><span class='nx'>_getSegments</span><span class='p'>();</span>
|
||||
<span class='c1'>// get this.cellsByRow.rowHeight</span>
|
||||
<span class='k'>this</span><span class='p'>.</span><span class='nx'>_getSegments</span><span class='p'>(</span><span class='kc'>true</span><span class='p'>);</span>
|
||||
<span class='p'>},</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<p>Similarly, <code>_checkIfSegmentsChanged</code> is used within <code>ResizeChanged</code>. It returns a boolean indicating whether or not the number of columns or rows has changed since the window has been resized.</p>
|
||||
<div class='highlight'><pre><code class='javascript'><span class='nx'>_checkIfSegmentsChanged</span><span class='p'>(</span> <span class='nx'>isHorizontal</span> <span class='p'>)</span>
|
||||
|
||||
<span class='c1'>// for example</span>
|
||||
<span class='nx'>_masonryResizeChanged</span> <span class='o'>:</span> <span class='kd'>function</span><span class='p'>()</span> <span class='p'>{</span>
|
||||
<span class='k'>return</span> <span class='k'>this</span><span class='p'>.</span><span class='nx'>_checkIfSegmentsChanged</span><span class='p'>();</span>
|
||||
<span class='p'>},</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
Isotope by <a href="http://desandro.com">David DeSandro</a> / <a href="http://metafizzy.co">Metafizzy</a>
|
||||
</footer>
|
||||
|
||||
</section> <!-- #content -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
268
sites/all/libraries/isotope-site/docs/filtering.html
Normal file
268
sites/all/libraries/isotope-site/docs/filtering.html
Normal file
@@ -0,0 +1,268 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<title>Filtering · Isotope Docs</title>
|
||||
|
||||
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
|
||||
<!-- scripts at bottom of page -->
|
||||
|
||||
</head>
|
||||
<body class="docs ">
|
||||
|
||||
<nav id="site-nav">
|
||||
<h1><a href="../index.html">Isotope</a></h1>
|
||||
|
||||
<h2>Docs</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../docs/introduction.html">Introduction</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/options.html">Options</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/methods.html">Methods</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li class="current"><a href="#content">Filtering</a>
|
||||
<ul class="toc">
|
||||
|
||||
<li><a href="#markup">Markup</a></li>
|
||||
|
||||
<li><a href="#jquery_script">jQuery script</a></li>
|
||||
|
||||
<li><a href="#creating_interactive_buttons">Creating interactive buttons</a></li>
|
||||
|
||||
<li><a href="#recommended_css">Recommended CSS</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/animating.html">Animating</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/extending-isotope.html">Extending Isotope</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/hash-history-jquery-bbq.html">Hash history with jQuery BBQ</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/help.html">Help</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/license.html">License</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Demos</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../demos/basic.html">Basic</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-complete.html">Elements Complete</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-partial.html">Elements Partial</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/relayout.html">reLayout</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/infinite-scroll.html">Infinite Scroll</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/images.html">Images</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/combination-filters.html">Combination filters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/hash-history.html">Hash history</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/fluid-responsive.html">Fluid / responsive</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Custom layout modes</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/centered-masonry.html">Centered Masonry</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/category-rows.html">Category rows</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-corner-stamp.html">Masonry corner stamp</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-gutters.html">Masonry gutters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/spine-align.html">Spine align</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2><a href="../tests/index.html">Tests</a></h2>
|
||||
|
||||
</nav> <!-- #site-nav -->
|
||||
|
||||
<section id="content">
|
||||
|
||||
<h1>Filtering</h1>
|
||||
|
||||
|
||||
<p>Isotope can hide and show item elements via the <a href='options.html#filter'><code>filter</code> option</a>. <code>filter</code> accepts a jQuery selector. Items that match that selector will be shown. Items that do not match will be hidden.</p>
|
||||
|
||||
<p><a href='../demos/filtering.html'><strong>See Demo: Filtering</strong></a></p>
|
||||
|
||||
<h2 id='markup'>Markup</h2>
|
||||
|
||||
<p>Each item element has several identifying classes. In this case, <code>transition</code>, <code>metal</code>, <code>lanthanoid</code>, <code>alkali</code>, etc.</p>
|
||||
<div class='highlight'><pre><code class='html'><span class='nt'><div</span> <span class='na'>id=</span><span class='s'>"container"</span><span class='nt'>></span>
|
||||
<span class='nt'><div</span> <span class='na'>class=</span><span class='s'>"element transition metal"</span><span class='nt'>></span>...<span class='nt'></div></span>
|
||||
<span class='nt'><div</span> <span class='na'>class=</span><span class='s'>"element post-transition metal"</span><span class='nt'>></span>...<span class='nt'></div></span>
|
||||
<span class='nt'><div</span> <span class='na'>class=</span><span class='s'>"element alkali metal"</span><span class='nt'>></span>...<span class='nt'></div></span>
|
||||
<span class='nt'><div</span> <span class='na'>class=</span><span class='s'>"element transition metal"</span><span class='nt'>></span>...<span class='nt'></div></span>
|
||||
<span class='nt'><div</span> <span class='na'>class=</span><span class='s'>"element lanthanoid metal inner-transition"</span><span class='nt'>></span>...<span class='nt'></div></span>
|
||||
<span class='nt'><div</span> <span class='na'>class=</span><span class='s'>"element halogen nonmetal"</span><span class='nt'>></span>...<span class='nt'></div></span>
|
||||
<span class='nt'><div</span> <span class='na'>class=</span><span class='s'>"element alkaline-earth metal"</span><span class='nt'>></span>...<span class='nt'></div></span>
|
||||
...
|
||||
<span class='nt'></div></span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<h2 id='jquery_script'>jQuery script</h2>
|
||||
|
||||
<p>To show only <code>.metal</code> items, the jQuery script would be:</p>
|
||||
<div class='highlight'><pre><code class='javascript'><span class='nx'>$</span><span class='p'>(</span><span class='s1'>'#container'</span><span class='p'>).</span><span class='nx'>isotope</span><span class='p'>({</span> <span class='nx'>filter</span><span class='o'>:</span> <span class='s1'>'.metal'</span> <span class='p'>});</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<p>The <code>filter</code> option uses a <a href='http://api.jquery.com/category/selectors/'>jQuery selector</a> to show item elements that match a selector, and hide all others that do not. For example:</p>
|
||||
|
||||
<ul>
|
||||
<li><code>.alkali, .alkaline-earth</code> will show <code>.alkali</code> AND <code> .alkaline-earth</code> item elements.</li>
|
||||
|
||||
<li><code>.metal.transition</code> will show item elements that have BOTH <code>.metal</code> and <code>.transition</code> classes.</li>
|
||||
|
||||
<li><code>.metal:not(.transition)</code> will show <code>.metal</code> item elements that are NOT <code>.transition</code>.</li>
|
||||
</ul>
|
||||
|
||||
<h2 id='creating_interactive_buttons'>Creating interactive buttons</h2>
|
||||
|
||||
<p>Let’s use a basic list for our buttons</p>
|
||||
<div class='highlight'><pre><code class='html'><span class='nt'><ul</span> <span class='na'>id=</span><span class='s'>"filters"</span><span class='nt'>></span>
|
||||
<span class='nt'><li><a</span> <span class='na'>href=</span><span class='s'>"#"</span> <span class='na'>data-filter=</span><span class='s'>"*"</span><span class='nt'>></span>show all<span class='nt'></a></li></span>
|
||||
<span class='nt'><li><a</span> <span class='na'>href=</span><span class='s'>"#"</span> <span class='na'>data-filter=</span><span class='s'>".metal"</span><span class='nt'>></span>metal<span class='nt'></a></li></span>
|
||||
<span class='nt'><li><a</span> <span class='na'>href=</span><span class='s'>"#"</span> <span class='na'>data-filter=</span><span class='s'>".transition"</span><span class='nt'>></span>transition<span class='nt'></a></li></span>
|
||||
<span class='nt'><li><a</span> <span class='na'>href=</span><span class='s'>"#"</span> <span class='na'>data-filter=</span><span class='s'>".alkali, .alkaline-earth"</span><span class='nt'>></span>alkali and alkaline-earth<span class='nt'></a></li></span>
|
||||
<span class='nt'><li><a</span> <span class='na'>href=</span><span class='s'>"#"</span> <span class='na'>data-filter=</span><span class='s'>":not(.transition)"</span><span class='nt'>></span>not transition<span class='nt'></a></li></span>
|
||||
<span class='nt'><li><a</span> <span class='na'>href=</span><span class='s'>"#"</span> <span class='na'>data-filter=</span><span class='s'>".metal:not(.transition)"</span><span class='nt'>></span>metal but not transition<span class='nt'></a></li></span>
|
||||
<span class='nt'></ul></span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<p>Here we set the filter for each link with a <code>data-filter</code> attribute. In our jQuery script, whenever a link is clicked, we’ll use this attribute as the filter selector.</p>
|
||||
<div class='highlight'><pre><code class='javascript'><span class='c1'>// cache container</span>
|
||||
<span class='kd'>var</span> <span class='nx'>$container</span> <span class='o'>=</span> <span class='nx'>$</span><span class='p'>(</span><span class='s1'>'#container'</span><span class='p'>);</span>
|
||||
<span class='c1'>// initialize isotope</span>
|
||||
<span class='nx'>$container</span><span class='p'>.</span><span class='nx'>isotope</span><span class='p'>({</span>
|
||||
<span class='c1'>// options...</span>
|
||||
<span class='p'>});</span>
|
||||
|
||||
<span class='c1'>// filter items when filter link is clicked</span>
|
||||
<span class='nx'>$</span><span class='p'>(</span><span class='s1'>'#filters a'</span><span class='p'>).</span><span class='nx'>click</span><span class='p'>(</span><span class='kd'>function</span><span class='p'>(){</span>
|
||||
<span class='kd'>var</span> <span class='nx'>selector</span> <span class='o'>=</span> <span class='nx'>$</span><span class='p'>(</span><span class='k'>this</span><span class='p'>).</span><span class='nx'>attr</span><span class='p'>(</span><span class='s1'>'data-filter'</span><span class='p'>);</span>
|
||||
<span class='nx'>$container</span><span class='p'>.</span><span class='nx'>isotope</span><span class='p'>({</span> <span class='nx'>filter</span><span class='o'>:</span> <span class='nx'>selector</span> <span class='p'>});</span>
|
||||
<span class='k'>return</span> <span class='kc'>false</span><span class='p'>;</span>
|
||||
<span class='p'>});</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<h2 id='recommended_css'>Recommended CSS</h2>
|
||||
|
||||
<p>If you choose to use the filtering functionality, add the following CSS to your stylesheet:</p>
|
||||
<div class='highlight'><pre><code class='css'><span class='c'>/**** Isotope filtering ****/</span>
|
||||
|
||||
<span class='nc'>.isotope-item</span> <span class='p'>{</span>
|
||||
<span class='k'>z-index</span><span class='o'>:</span> <span class='m'>2</span><span class='p'>;</span>
|
||||
<span class='p'>}</span>
|
||||
|
||||
<span class='nc'>.isotope-hidden.isotope-item</span> <span class='p'>{</span>
|
||||
<span class='k'>pointer</span><span class='o'>-</span><span class='n'>events</span><span class='o'>:</span> <span class='k'>none</span><span class='p'>;</span>
|
||||
<span class='k'>z-index</span><span class='o'>:</span> <span class='m'>1</span><span class='p'>;</span>
|
||||
<span class='p'>}</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<p>These styles ensure that hidden items will not interfere with interactions.</p>
|
||||
|
||||
<footer>
|
||||
Isotope by <a href="http://desandro.com">David DeSandro</a> / <a href="http://metafizzy.co">Metafizzy</a>
|
||||
</footer>
|
||||
|
||||
</section> <!-- #content -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,245 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<title>Hash history with jQuery BBQ · Isotope Docs</title>
|
||||
|
||||
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
|
||||
<!-- scripts at bottom of page -->
|
||||
|
||||
</head>
|
||||
<body class="docs ">
|
||||
|
||||
<nav id="site-nav">
|
||||
<h1><a href="../index.html">Isotope</a></h1>
|
||||
|
||||
<h2>Docs</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../docs/introduction.html">Introduction</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/options.html">Options</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/methods.html">Methods</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/animating.html">Animating</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/extending-isotope.html">Extending Isotope</a>
|
||||
|
||||
|
||||
|
||||
<li class="current"><a href="#content">Hash history with jQuery BBQ</a>
|
||||
<ul class="toc">
|
||||
|
||||
<li><a href="#markup">Markup</a></li>
|
||||
|
||||
<li><a href="#jquery_script">jQuery script</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/help.html">Help</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/license.html">License</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Demos</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../demos/basic.html">Basic</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-complete.html">Elements Complete</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-partial.html">Elements Partial</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/relayout.html">reLayout</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/infinite-scroll.html">Infinite Scroll</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/images.html">Images</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/combination-filters.html">Combination filters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/hash-history.html">Hash history</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/fluid-responsive.html">Fluid / responsive</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Custom layout modes</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/centered-masonry.html">Centered Masonry</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/category-rows.html">Category rows</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-corner-stamp.html">Masonry corner stamp</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-gutters.html">Masonry gutters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/spine-align.html">Spine align</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2><a href="../tests/index.html">Tests</a></h2>
|
||||
|
||||
</nav> <!-- #site-nav -->
|
||||
|
||||
<section id="content">
|
||||
|
||||
<h1>Hash history with jQuery BBQ</h1>
|
||||
|
||||
|
||||
<p>As cool as Isotope is, the only thing that could make it even cooler would be adding bookmark-able URL hashes. Ben Alman’s <a href='http://benalman.com/projects/jquery-bbq-plugin/'>jQuery BBQ</a> allows us to do just that.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>jQuery BBQ leverages the HTML5 hashchange event to allow simple, yet powerful bookmarkable #hash history.</p>
|
||||
</blockquote>
|
||||
|
||||
<p><a href='../demos/hash-history.html'><strong>See Demo: Hash history</strong></a></p>
|
||||
|
||||
<p>BBQ is a marvelous plugin that provides for a lot more functionality. The <a href='../demos/hash-history.html'>hash history demo</a> uses multiple options (<code>sortBy</code>, <code>sortAscending</code>, and <code>layoutMode</code> in addition to <code>filter</code>), the ability to use back-button history, and properly highlights selected links.</p>
|
||||
|
||||
<p>Given BBQ’s tremendous capabilities, the code can grow to be a bit complex. Be sure to read through <a href='http://benalman.com/code/projects/jquery-bbq/docs/files/jquery-ba-bbq-js.html'>BBQ’s docs</a> and take look at <a href='http://benalman.com/code/projects/jquery-bbq/examples/'>its examples</a> before you dive in and code up your own solution.</p>
|
||||
|
||||
<h2 id='markup'>Markup</h2>
|
||||
|
||||
<p>Instead of setting the option values and keys with <code>data</code> attributes, we can add the option in the <code>href</code> for each link.</p>
|
||||
<div class='highlight'><pre><code class='html'><span class='nt'><ul</span> <span class='na'>class=</span><span class='s'>"option-set"</span><span class='nt'>></span>
|
||||
<span class='nt'><li><a</span> <span class='na'>href=</span><span class='s'>"#filter=*"</span> <span class='na'>class=</span><span class='s'>"selected"</span><span class='nt'>></span>show all<span class='nt'></a></li></span>
|
||||
<span class='nt'><li><a</span> <span class='na'>href=</span><span class='s'>"#filter=.metal"</span><span class='nt'>></span>metal<span class='nt'></a></li></span>
|
||||
<span class='nt'><li><a</span> <span class='na'>href=</span><span class='s'>"#filter=.transition"</span><span class='nt'>></span>transition<span class='nt'></a></li></span>
|
||||
<span class='nt'><li><a</span> <span class='na'>href=</span><span class='s'>"#filter=.alkali%2C+.alkaline-earth"</span><span class='nt'>></span>alkali and alkaline-earth<span class='nt'></a></li></span>
|
||||
<span class='nt'><li><a</span> <span class='na'>href=</span><span class='s'>"#filter=%3Anot(.transition)"</span><span class='nt'>></span>not transition<span class='nt'></a></li></span>
|
||||
<span class='nt'><li><a</span> <span class='na'>href=</span><span class='s'>"#filter=.metal%3Anot(.transition)"</span><span class='nt'>></span>metal but not transition<span class='nt'></a></li></span>
|
||||
<span class='nt'></ul></span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<p>The <code>href</code> value is a serialized string, suitable for a URL. These values can be created with <a href='http://api.jquery.com/jQuery.param/'>jQuery.param()</a>.</p>
|
||||
<div class='highlight'><pre><code class='javascript'><span class='nx'>$</span><span class='p'>.</span><span class='nx'>param</span><span class='p'>({</span> <span class='nx'>filter</span><span class='o'>:</span> <span class='s1'>'.metal'</span> <span class='p'>})</span>
|
||||
<span class='c1'>// >> "filter=.metal"</span>
|
||||
<span class='nx'>$</span><span class='p'>.</span><span class='nx'>param</span><span class='p'>({</span> <span class='nx'>filter</span><span class='o'>:</span> <span class='s1'>'.alkali, alkaline-earth'</span> <span class='p'>})</span>
|
||||
<span class='c1'>// >> "filter=.alkali%2C+alkaline-earth"</span>
|
||||
<span class='nx'>$</span><span class='p'>.</span><span class='nx'>param</span><span class='p'>({</span> <span class='nx'>filter</span><span class='o'>:</span> <span class='s1'>':not(.transition)'</span> <span class='p'>})</span>
|
||||
<span class='c1'>// >> "#filter=%3Anot(.transition)"</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<h2 id='jquery_script'>jQuery script</h2>
|
||||
|
||||
<p>These serialized <code>href</code> values can be converted into their proper jQuery object form when clicked using <a href='http://benalman.com/code/projects/jquery-bbq/docs/files/jquery-ba-bbq-js.html#jQuery.deparam'>jQuery.deparam()</a> from jQuery BBQ.</p>
|
||||
<div class='highlight'><pre><code class='javascript'><span class='nx'>$</span><span class='p'>(</span><span class='s1'>'.option-set a'</span><span class='p'>).</span><span class='nx'>click</span><span class='p'>(</span><span class='kd'>function</span><span class='p'>(){</span>
|
||||
<span class='c1'>// get href attr, remove leading #</span>
|
||||
<span class='kd'>var</span> <span class='nx'>href</span> <span class='o'>=</span> <span class='nx'>$</span><span class='p'>(</span><span class='k'>this</span><span class='p'>).</span><span class='nx'>attr</span><span class='p'>(</span><span class='s1'>'href'</span><span class='p'>).</span><span class='nx'>replace</span><span class='p'>(</span> <span class='sr'>/^#/</span><span class='p'>,</span> <span class='s1'>''</span> <span class='p'>),</span>
|
||||
<span class='c1'>// convert href into object</span>
|
||||
<span class='c1'>// i.e. 'filter=.inner-transition' -> { filter: '.inner-transition' }</span>
|
||||
<span class='nx'>option</span> <span class='o'>=</span> <span class='nx'>$</span><span class='p'>.</span><span class='nx'>deparam</span><span class='p'>(</span> <span class='nx'>href</span><span class='p'>,</span> <span class='kc'>true</span> <span class='p'>);</span>
|
||||
<span class='c1'>// set hash, triggers hashchange on window</span>
|
||||
<span class='nx'>$</span><span class='p'>.</span><span class='nx'>bbq</span><span class='p'>.</span><span class='nx'>pushState</span><span class='p'>(</span> <span class='nx'>option</span> <span class='p'>);</span>
|
||||
<span class='k'>return</span> <span class='kc'>false</span><span class='p'>;</span>
|
||||
<span class='p'>});</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<p>Calling <a href='http://benalman.com/code/projects/jquery-bbq/docs/files/jquery-ba-bbq-js.html#jQuery.bbq.pushState'>$.bbq.pushState()</a> will trigger the <code>hashchange</code> event. At that point, we can parse the hash from the URL and use it to trigger the proper change in the Isotope instance.</p>
|
||||
<div class='highlight'><pre><code class='javascript'><span class='nx'>$</span><span class='p'>(</span><span class='nb'>window</span><span class='p'>).</span><span class='nx'>bind</span><span class='p'>(</span> <span class='s1'>'hashchange'</span><span class='p'>,</span> <span class='kd'>function</span><span class='p'>(</span> <span class='nx'>event</span> <span class='p'>){</span>
|
||||
<span class='c1'>// get options object from hash</span>
|
||||
<span class='kd'>var</span> <span class='nx'>hashOptions</span> <span class='o'>=</span> <span class='nx'>$</span><span class='p'>.</span><span class='nx'>deparam</span><span class='p'>.</span><span class='nx'>fragment</span><span class='p'>();</span>
|
||||
<span class='c1'>// apply options from hash</span>
|
||||
<span class='nx'>$container</span><span class='p'>.</span><span class='nx'>isotope</span><span class='p'>(</span> <span class='nx'>hashOptions</span> <span class='p'>);</span>
|
||||
<span class='p'>})</span>
|
||||
<span class='c1'>// trigger hashchange to capture any hash data on init</span>
|
||||
<span class='p'>.</span><span class='nx'>trigger</span><span class='p'>(</span><span class='s1'>'hashchange'</span><span class='p'>);</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<p>Now any filter buttons that are clicked will update the URL hash, so these options can be bookmarked.</p>
|
||||
|
||||
<footer>
|
||||
Isotope by <a href="http://desandro.com">David DeSandro</a> / <a href="http://metafizzy.co">Metafizzy</a>
|
||||
</footer>
|
||||
|
||||
</section> <!-- #content -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
390
sites/all/libraries/isotope-site/docs/help.html
Normal file
390
sites/all/libraries/isotope-site/docs/help.html
Normal file
@@ -0,0 +1,390 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<title>Help · Isotope Docs</title>
|
||||
|
||||
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
|
||||
<!-- scripts at bottom of page -->
|
||||
|
||||
</head>
|
||||
<body class="docs ">
|
||||
|
||||
<nav id="site-nav">
|
||||
<h1><a href="../index.html">Isotope</a></h1>
|
||||
|
||||
<h2>Docs</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../docs/introduction.html">Introduction</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/options.html">Options</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/methods.html">Methods</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/animating.html">Animating</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/extending-isotope.html">Extending Isotope</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/hash-history-jquery-bbq.html">Hash history with jQuery BBQ</a>
|
||||
|
||||
|
||||
|
||||
<li class="current"><a href="#content">Help</a>
|
||||
<ul class="toc">
|
||||
|
||||
<li><a href="#reporting_bugs_and_issues">Reporting bugs and issues</a></li>
|
||||
|
||||
<li><a href="#support_license">Support license</a></li>
|
||||
|
||||
<li><a href="#additional_resources">Additional resources</a></li>
|
||||
|
||||
<li><a href="#unloaded_media">Unloaded media</a></li>
|
||||
|
||||
<li><a href="#images">Images</a></li>
|
||||
|
||||
<li><a href="#fontface_fonts">@font-face fonts</a></li>
|
||||
|
||||
<li><a href="#accessing_the_instance">Accessing the instance</a></li>
|
||||
|
||||
<li><a href="#css_transforms_in_opera">CSS transforms in Opera</a></li>
|
||||
|
||||
<li><a href="#infinite_scroll_with_filtering_or_sorting">Infinite Scroll with filtering or sorting</a></li>
|
||||
|
||||
<li><a href="#flash">Flash</a></li>
|
||||
|
||||
<li><a href="#poor_type_rendering_in_webkit">Poor type rendering in WebKit</a></li>
|
||||
|
||||
<li><a href="#righttoleft_layouts">Right-to-left layouts</a></li>
|
||||
|
||||
<li><a href="#unclickable-filtered">Preventing clicks on filtered items</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/license.html">License</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Demos</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../demos/basic.html">Basic</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-complete.html">Elements Complete</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-partial.html">Elements Partial</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/relayout.html">reLayout</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/infinite-scroll.html">Infinite Scroll</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/images.html">Images</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/combination-filters.html">Combination filters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/hash-history.html">Hash history</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/fluid-responsive.html">Fluid / responsive</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Custom layout modes</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/centered-masonry.html">Centered Masonry</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/category-rows.html">Category rows</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-corner-stamp.html">Masonry corner stamp</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-gutters.html">Masonry gutters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/spine-align.html">Spine align</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2><a href="../tests/index.html">Tests</a></h2>
|
||||
|
||||
</nav> <!-- #site-nav -->
|
||||
|
||||
<section id="content">
|
||||
|
||||
<h1>Help</h1>
|
||||
|
||||
|
||||
<h2 id='reporting_bugs_and_issues'>Reporting bugs and issues</h2>
|
||||
|
||||
<p><a href='http://github.com/desandro/isotope/issues'>Report bugs and issues on GitHub</a>.</p>
|
||||
|
||||
<h3 id='issues-guidelines'>Guidelines</h3>
|
||||
|
||||
<ul>
|
||||
<li>Look over open and closed issues before submitting yours.</li>
|
||||
|
||||
<li>Add a link to a live site with the bug. If the project is confidential, try re-creating it in <a href='http://jsfiddle.net'>jsFiddle</a>.</li>
|
||||
</ul>
|
||||
|
||||
<p>The issues tracker is for bugs and issues — when Isotope doesn’t work as expected. It is not for implementation issues — when you are having trouble setting up Isotope. Consider a <a href='http://metafizzy.co/#support-license'>Support License</a> for implementation issues. If you’re not sure, go ahead and submit an issue.</p>
|
||||
|
||||
<h2 id='support_license'>Support license</h2>
|
||||
|
||||
<p>If you’ve tried everything and would really like to get my eyes looking at your code, you can purchase a <a href='http://metafizzy.co/#support-license'>Support License from Metafizzy</a>.</p>
|
||||
|
||||
<p>Support License is included with Isotope Commercial License.</p>
|
||||
|
||||
<h2 id='additional_resources'>Additional resources</h2>
|
||||
|
||||
<ul>
|
||||
<li>The <a href='http://metafizzy.co/blog/'>Metafizzy blog</a> has posts that cover specialized use cases</li>
|
||||
|
||||
<li><a href='http://zootool.com/user/desandro/tag:isotope'>Sites using Isotope on Zootool</a>, has screenshots</li>
|
||||
|
||||
<li><a href='http://www.delicious.com/desandro/using:isotope'>Sites using Isotope on Delicious</a></li>
|
||||
|
||||
<li><a href='http://www.delicious.com/desandro/re:isotope'>Miscelleanous Isotope content</a></li>
|
||||
|
||||
<li><a href='http://www.delicious.com/desandro/re:isotope+stackoverflow'>Stack Overflow questions on Isotope</a></li>
|
||||
</ul>
|
||||
|
||||
<h2 id='unloaded_media'>Unloaded media</h2>
|
||||
|
||||
<p>Most layout modes (i.e masonry, fitRows) need to measure the size of each item to appropriately account for its space in the layout. Unloaded media files like images and @font-face fonts can throw off layout and cause item elements to overlap one another. Ideally, Isotope layouts should be initialized after all inner content has loaded.</p>
|
||||
|
||||
<h2 id='images'>Images</h2>
|
||||
|
||||
<h3 id='inline_dimensions'>Inline dimensions</h3>
|
||||
|
||||
<p>For images, the best method is to specify the width and height of images inline.</p>
|
||||
<div class='highlight'><pre><code class='html'><span class='nt'><img</span> <span class='na'>src=</span><span class='s'>"img-file.jpg"</span> <span class='na'>width=</span><span class='s'>"280"</span> <span class='na'>height=</span><span class='s'>"160"</span> <span class='nt'>/></span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<p>If you’re using a PHP-based CMS, you can use the <a href='http://php.net/manual/en/function.getimagesize.php'>getimagesize</a> function.</p>
|
||||
|
||||
<h3 id='imagesloaded_plugin'>imagesLoaded plugin</h3>
|
||||
|
||||
<p>The next best solution is to use the <a href='https://github.com/desandro/imagesloaded'>imagesLoaded plugin</a> included with Isotope. It’s a small plugin that finds all the images in a context, and fires a callback function once all the images have loaded.</p>
|
||||
<div class='highlight'><pre><code class='javascript'><span class='kd'>var</span> <span class='nx'>$container</span> <span class='o'>=</span> <span class='nx'>$</span><span class='p'>(</span><span class='s1'>'#container'</span><span class='p'>);</span>
|
||||
|
||||
<span class='nx'>$container</span><span class='p'>.</span><span class='nx'>imagesLoaded</span><span class='p'>(</span> <span class='kd'>function</span><span class='p'>(){</span>
|
||||
<span class='nx'>$container</span><span class='p'>.</span><span class='nx'>isotope</span><span class='p'>({</span>
|
||||
<span class='c1'>// options...</span>
|
||||
<span class='p'>});</span>
|
||||
<span class='p'>});</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<h3 id='id1'><code>$(window).load()</code></h3>
|
||||
|
||||
<p>Another solution is to initialize Isotope inside <code>$(window).load()</code> instead of <code>$(document).ready()</code>. This will trigger Isotope after all the media on the page has loaded.</p>
|
||||
<div class='highlight'><pre><code class='javascript'><span class='nx'>$</span><span class='p'>(</span><span class='nb'>window</span><span class='p'>).</span><span class='nx'>load</span><span class='p'>(</span><span class='kd'>function</span><span class='p'>(){</span>
|
||||
<span class='nx'>$</span><span class='p'>(</span><span class='s1'>'#container'</span><span class='p'>).</span><span class='nx'>isotope</span><span class='p'>({</span>
|
||||
<span class='c1'>// options...</span>
|
||||
<span class='p'>});</span>
|
||||
<span class='p'>});</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<h2 id='fontface_fonts'>@font-face fonts</h2>
|
||||
|
||||
<p>Both Typekit and Google WebFont Loader provide font events to control scripts based on how fonts are loaded.</p>
|
||||
|
||||
<ul>
|
||||
<li><a href='http://blog.typekit.com/2010/10/18/more-control-with-typekits-font-events/'>Typekit font events</a></li>
|
||||
|
||||
<li><a href='http://code.google.com/apis/webfonts/docs/webfont_loader.html#Events'>Google WebFont Loader: Events</a></li>
|
||||
</ul>
|
||||
|
||||
<h2 id='accessing_the_instance'>Accessing the instance</h2>
|
||||
|
||||
<p><a href='http://docs.jquery.com/UI_Developer_Guide#Internal_functions_.26_scopes_explained'>Similar to jQuery UI</a>, Isotope stores a instance containing properties, settings and methods with jQuery.data. You can access the instance with the <code>'isotope'</code> namespace.</p>
|
||||
<div class='highlight'><pre><code class='javascript'><span class='kd'>var</span> <span class='nx'>$container</span> <span class='o'>=</span> <span class='nx'>$</span><span class='p'>(</span><span class='s1'>'#container'</span><span class='p'>);</span>
|
||||
|
||||
<span class='c1'>// initialize Isotope instance</span>
|
||||
<span class='nx'>$container</span><span class='p'>.</span><span class='nx'>isotope</span><span class='p'>({</span>
|
||||
<span class='c1'>// options...</span>
|
||||
<span class='p'>});</span>
|
||||
|
||||
<span class='c1'>// get Isotope instance</span>
|
||||
<span class='kd'>var</span> <span class='nx'>isotopeInstance</span> <span class='o'>=</span> <span class='nx'>$container</span><span class='p'>.</span><span class='nx'>data</span><span class='p'>(</span><span class='s1'>'isotope'</span><span class='p'>);</span>
|
||||
<span class='nx'>isotopeInstance</span><span class='p'>.</span><span class='nx'>options</span><span class='p'>;</span> <span class='c1'>// options</span>
|
||||
<span class='nx'>isotopeInstance</span><span class='p'>.</span><span class='nx'>$filteredAtoms</span><span class='p'>;</span> <span class='c1'>// jQuery object of filtered & sorted item elements</span>
|
||||
<span class='nx'>isotopeInstance</span><span class='p'>.</span><span class='nx'>masonry</span><span class='p'>.</span><span class='nx'>columnWidth</span><span class='p'>;</span> <span class='c1'>// Layout mode specific properties</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<h2 id='css_transforms_in_opera'>CSS transforms in Opera</h2>
|
||||
|
||||
<p>Currently, <a href='http://dropshado.ws/post/1260101028/opera-transform-issues'>using CSS transforms in Opera distorts text rendering</a>. To avoid this issue, I recommend disabling Isotope to use transforms.</p>
|
||||
|
||||
<p>Isotope’s default options are already set to not use CSS transforms in Opera.</p>
|
||||
<div class='highlight'><pre><code class='javascript'><span class='c1'>// Isotope default options</span>
|
||||
<span class='nx'>hiddenStyle</span> <span class='o'>:</span> <span class='nx'>Modernizr</span><span class='p'>.</span><span class='nx'>csstransforms</span> <span class='o'>&&</span> <span class='o'>!</span><span class='nx'>$</span><span class='p'>.</span><span class='nx'>browser</span><span class='p'>.</span><span class='nx'>opera</span> <span class='o'>?</span>
|
||||
<span class='p'>{</span> <span class='nx'>opacity</span> <span class='o'>:</span> <span class='mi'>0</span><span class='p'>,</span> <span class='nx'>scale</span> <span class='o'>:</span> <span class='mf'>0.001</span> <span class='p'>}</span> <span class='o'>:</span> <span class='c1'>// browsers support CSS transforms, not Opera</span>
|
||||
<span class='p'>{</span> <span class='nx'>opacity</span> <span class='o'>:</span> <span class='mi'>0</span> <span class='p'>},</span> <span class='c1'>// other browsers, including Opera</span>
|
||||
<span class='nx'>visibleStyle</span> <span class='o'>:</span> <span class='nx'>Modernizr</span><span class='p'>.</span><span class='nx'>csstransforms</span> <span class='o'>&&</span> <span class='o'>!</span><span class='nx'>$</span><span class='p'>.</span><span class='nx'>browser</span><span class='p'>.</span><span class='nx'>opera</span> <span class='o'>?</span>
|
||||
<span class='p'>{</span> <span class='nx'>opacity</span> <span class='o'>:</span> <span class='mi'>1</span><span class='p'>,</span> <span class='nx'>scale</span> <span class='o'>:</span> <span class='mi'>1</span> <span class='p'>}</span> <span class='o'>:</span> <span class='c1'>// browsers support CSS transforms, not Opera</span>
|
||||
<span class='p'>{</span> <span class='nx'>opacity</span> <span class='o'>:</span> <span class='mi'>1</span> <span class='p'>},</span> <span class='c1'>// other browsers, including Opera</span>
|
||||
<span class='nx'>animationEngine</span> <span class='o'>:</span> <span class='nx'>$</span><span class='p'>.</span><span class='nx'>browser</span><span class='p'>.</span><span class='nx'>opera</span> <span class='o'>?</span> <span class='s1'>'jquery'</span> <span class='o'>:</span> <span class='s1'>'best-available'</span><span class='p'>,</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<p>Also note that the <a href='animating.html#css_transitions'>recommended transition CSS</a> is missing declarations for Opera.</p>
|
||||
|
||||
<h2 id='infinite_scroll_with_filtering_or_sorting'>Infinite Scroll with filtering or sorting</h2>
|
||||
|
||||
<p>I recommend against using Infinite Scroll with filtering or sorting. This combination produces a unnecessarily complex user interaction that will frustrate your users. New content gets added, but part of it might be hidden. There is no way for the user to tell what gets hidden or re-arranged when Infinite Scroll adds more content. Exercise <a href='introduction.html#moderation'>moderation</a> with your Isotope implementation.</p>
|
||||
|
||||
<p>If you do plan on implementing Infinite Scroll with filtering or sorting (which is a <em>bad idea</em>), use the <code>insert</code> method instead of <code>appended</code>.</p>
|
||||
|
||||
<h2 id='flash'>Flash</h2>
|
||||
|
||||
<p><a href='http://dropshado.ws/post/4085720152/css-transforms-breaking-flash'>Using CSS transforms with Flash content is a bit buggy in Safari and Firefox</a>. This is problematic when using Isotope on item elements that contain Flash content like YouTube or Vimeo videos, Flash ads, or Flash audio players.</p>
|
||||
|
||||
<p>The best way to resolve this issue is to disable CSS transforms by setting the <a href='options.html#transformsenabled'><code>transformsEnabled</code> option</a> to <code><span class='kc'>false</span></code>.</p>
|
||||
|
||||
<h2 id='poor_type_rendering_in_webkit'>Poor type rendering in WebKit</h2>
|
||||
|
||||
<p>Type rendering may appear poor in WebKit browsers like Chrome and Safari. This is because of Isotope’s activation of hardware acceleration. The solution is to add add a matching background to the item elements. See more: <a href='http://dropshado.ws/post/6142339613/resolving-anti-aliasing-on-webkit-hardware-accelerated'>dropshado.ws - Resolving anti-aliasing on WebKit hardware-accelerated elements</a>.</p>
|
||||
|
||||
<h2 id='righttoleft_layouts'>Right-to-left layouts</h2>
|
||||
|
||||
<p>Isotope can be modified to support right-to-left layouts for languages like Hebrew and Arabic.</p>
|
||||
|
||||
<p><a href='../tests/right-to-left.html'><strong>See test: Right to left</strong></a></p>
|
||||
|
||||
<p>You’ll need to make the following changes:</p>
|
||||
|
||||
<ul>
|
||||
<li>Modify Isotope’s <code>_positionAbs</code> method</li>
|
||||
|
||||
<li>Set <code>transformsEnabled: false</code> in the Isotope options</li>
|
||||
|
||||
<li>Add CSS transition property styles for right/top.</li>
|
||||
</ul>
|
||||
|
||||
<h3 id='javascript_for_righttoleft_support'>JavaScript for right-to-left support</h3>
|
||||
<div class='highlight'><pre><code class='javascript'><span class='c1'>// modify Isotope's absolute position method</span>
|
||||
<span class='nx'>$</span><span class='p'>.</span><span class='nx'>Isotope</span><span class='p'>.</span><span class='nx'>prototype</span><span class='p'>.</span><span class='nx'>_positionAbs</span> <span class='o'>=</span> <span class='kd'>function</span><span class='p'>(</span> <span class='nx'>x</span><span class='p'>,</span> <span class='nx'>y</span> <span class='p'>)</span> <span class='p'>{</span>
|
||||
<span class='k'>return</span> <span class='p'>{</span> <span class='nx'>right</span><span class='o'>:</span> <span class='nx'>x</span><span class='p'>,</span> <span class='nx'>top</span><span class='o'>:</span> <span class='nx'>y</span> <span class='p'>};</span>
|
||||
<span class='p'>};</span>
|
||||
|
||||
<span class='c1'>// initialize Isotope</span>
|
||||
<span class='nx'>$</span><span class='p'>(</span><span class='s1'>'#container'</span><span class='p'>).</span><span class='nx'>isotope</span><span class='p'>({</span>
|
||||
<span class='nx'>transformsEnabled</span><span class='o'>:</span> <span class='kc'>false</span>
|
||||
<span class='c1'>// other options...</span>
|
||||
<span class='p'>});</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<h3 id='css_for_righttoleft_support'>CSS for right-to-left support</h3>
|
||||
<div class='highlight'><pre><code class='css'><span class='nc'>.isotope</span> <span class='nc'>.isotope-item</span> <span class='p'>{</span>
|
||||
<span class='o'>-</span><span class='n'>webkit</span><span class='o'>-</span><span class='n'>transition</span><span class='o'>-</span><span class='n'>property</span><span class='o'>:</span> <span class='k'>right</span><span class='o'>,</span> <span class='k'>top</span><span class='o'>,</span> <span class='o'>-</span><span class='n'>webkit</span><span class='o'>-</span><span class='n'>transform</span><span class='o'>,</span> <span class='k'>opacity</span><span class='p'>;</span>
|
||||
<span class='o'>-</span><span class='n'>moz</span><span class='o'>-</span><span class='n'>transition</span><span class='o'>-</span><span class='n'>property</span><span class='o'>:</span> <span class='k'>right</span><span class='o'>,</span> <span class='k'>top</span><span class='o'>,</span> <span class='o'>-</span><span class='n'>moz</span><span class='o'>-</span><span class='n'>transform</span><span class='o'>,</span> <span class='k'>opacity</span><span class='p'>;</span>
|
||||
<span class='o'>-</span><span class='err'>o</span><span class='o'>-</span><span class='n'>transition</span><span class='o'>-</span><span class='n'>property</span><span class='o'>:</span> <span class='k'>right</span><span class='o'>,</span> <span class='k'>top</span><span class='o'>,</span> <span class='o'>-</span><span class='err'>o</span><span class='o'>-</span><span class='n'>transform</span><span class='o'>,</span> <span class='k'>opacity</span><span class='p'>;</span>
|
||||
<span class='n'>transition</span><span class='o'>-</span><span class='n'>property</span><span class='o'>:</span> <span class='k'>right</span><span class='o'>,</span> <span class='k'>top</span><span class='o'>,</span> <span class='n'>transform</span><span class='o'>,</span> <span class='k'>opacity</span><span class='p'>;</span>
|
||||
<span class='p'>}</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<h2 id='unclickable-filtered'>Preventing clicks on filtered items</h2>
|
||||
|
||||
<p>The <a href='filtering.html#recommended_css'>recommended CSS for filtering</a> includes <code>pointer-events: none</code> for <code>.isotope-hidden</code>. Unfortunately, Opera and Internet Explorer still let click events propagate with this style in place. But you can still dismiss click events in your click handler by checking to see if the element or element’s parent is a filtered item.</p>
|
||||
|
||||
<p><a href='../tests/unclickable-filtered.html'>See test: Unclickable filtered</a></p>
|
||||
<div class='highlight'><pre><code class='javascript'><span class='nx'>$</span><span class='p'>(</span><span class='s1'>'.item a'</span><span class='p'>).</span><span class='nx'>click</span><span class='p'>(</span><span class='kd'>function</span><span class='p'>(){</span>
|
||||
<span class='kd'>var</span> <span class='nx'>$this</span> <span class='o'>=</span> <span class='nx'>$</span><span class='p'>(</span><span class='k'>this</span><span class='p'>);</span>
|
||||
<span class='c1'>// back out if hidden item</span>
|
||||
<span class='k'>if</span> <span class='p'>(</span> <span class='nx'>$this</span><span class='p'>.</span><span class='nx'>parents</span><span class='p'>(</span><span class='s1'>'.isotope-item'</span><span class='p'>).</span><span class='nx'>hasClass</span><span class='p'>(</span><span class='s1'>'isotope-hidden'</span><span class='p'>)</span> <span class='p'>)</span> <span class='p'>{</span>
|
||||
<span class='k'>return</span><span class='p'>;</span>
|
||||
<span class='p'>}</span>
|
||||
<span class='c1'>// otherwise, continue to do stuff...</span>
|
||||
<span class='nx'>console</span><span class='p'>.</span><span class='nx'>log</span><span class='p'>(</span><span class='s1'>'item was clicked'</span><span class='p'>);</span>
|
||||
<span class='p'>});</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
Isotope by <a href="http://desandro.com">David DeSandro</a> / <a href="http://metafizzy.co">Metafizzy</a>
|
||||
</footer>
|
||||
|
||||
</section> <!-- #content -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
325
sites/all/libraries/isotope-site/docs/introduction.html
Normal file
325
sites/all/libraries/isotope-site/docs/introduction.html
Normal file
@@ -0,0 +1,325 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<title>Introduction · Isotope Docs</title>
|
||||
|
||||
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
|
||||
<!-- scripts at bottom of page -->
|
||||
|
||||
</head>
|
||||
<body class="docs ">
|
||||
|
||||
<nav id="site-nav">
|
||||
<h1><a href="../index.html">Isotope</a></h1>
|
||||
|
||||
<h2>Docs</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li class="current"><a href="#content">Introduction</a>
|
||||
<ul class="toc">
|
||||
|
||||
<li><a href="#features">Features</a></li>
|
||||
|
||||
<li><a href="#licensing">Licensing</a></li>
|
||||
|
||||
<li><a href="#getting_started">Getting started</a></li>
|
||||
|
||||
<li><a href="#code_repository">Code repository</a></li>
|
||||
|
||||
<li><a href="#moderation">A word about moderation</a></li>
|
||||
|
||||
<li><a href="#acknowledgments">Acknowledgments</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/options.html">Options</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/methods.html">Methods</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/animating.html">Animating</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/extending-isotope.html">Extending Isotope</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/hash-history-jquery-bbq.html">Hash history with jQuery BBQ</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/help.html">Help</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/license.html">License</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Demos</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../demos/basic.html">Basic</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-complete.html">Elements Complete</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-partial.html">Elements Partial</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/relayout.html">reLayout</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/infinite-scroll.html">Infinite Scroll</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/images.html">Images</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/combination-filters.html">Combination filters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/hash-history.html">Hash history</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/fluid-responsive.html">Fluid / responsive</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Custom layout modes</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/centered-masonry.html">Centered Masonry</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/category-rows.html">Category rows</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-corner-stamp.html">Masonry corner stamp</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-gutters.html">Masonry gutters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/spine-align.html">Spine align</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2><a href="../tests/index.html">Tests</a></h2>
|
||||
|
||||
</nav> <!-- #site-nav -->
|
||||
|
||||
<section id="content">
|
||||
|
||||
<h1>Introduction</h1>
|
||||
|
||||
|
||||
<p class='tagline'>Isotope: An exquisite jQuery plugin for magical layouts</p>
|
||||
<h2 id='features'>Features</h2>
|
||||
|
||||
<ul>
|
||||
<li><a href='layout-modes.html'><strong>Layout modes</strong></a>: Intelligent, dynamic layouts that can’t be achieved with CSS alone.</li>
|
||||
|
||||
<li><a href='filtering.html'><strong>Filtering</strong></a>: Hide and reveal item elements easily with jQuery selectors.</li>
|
||||
|
||||
<li><a href='sorting.html'><strong>Sorting</strong></a>: Re-order item elements with sorting. Sorting data can be extracted from just about anything.</li>
|
||||
|
||||
<li><strong>Interoperability</strong>: features can be utilized together for a cohesive experience.</li>
|
||||
|
||||
<li><strong>Progressive enhancement</strong>: Isotope’s <a href='animating.html'>animation engine</a> takes advantage of the best browser features when available — CSS transitions and transforms, GPU acceleration — but will also fall back to JavaScript animation for lesser browsers.</li>
|
||||
</ul>
|
||||
|
||||
<h2 id='licensing'>Licensing</h2>
|
||||
<p id='commercial'>
|
||||
<strong>Commercial use of Isotope requires purchase of one-time license fee per developer seat.</strong> Commercial use includes any application that makes you money — portfolio sites, premium templates, etc. Commercial licenses may be purchased at <a href='http://metafizzy.co/#isotope-license'>metafizzy.co</a>.
|
||||
</p>
|
||||
<p>Use in non-commercial and personal applications is free.</p>
|
||||
|
||||
<h2 id='getting_started'>Getting started</h2>
|
||||
|
||||
<p>Isotope requires jQuery 1.4.3 and greater.</p>
|
||||
|
||||
<h3 id='markup'>Markup</h3>
|
||||
|
||||
<p>Isotope works on a container element with a group of similar child items.</p>
|
||||
<div class='highlight'><pre><code class='html'><span class='nt'><div</span> <span class='na'>id=</span><span class='s'>"container"</span><span class='nt'>></span>
|
||||
<span class='nt'><div</span> <span class='na'>class=</span><span class='s'>"item"</span><span class='nt'>></span>...<span class='nt'></div></span>
|
||||
<span class='nt'><div</span> <span class='na'>class=</span><span class='s'>"item"</span><span class='nt'>></span>...<span class='nt'></div></span>
|
||||
<span class='nt'><div</span> <span class='na'>class=</span><span class='s'>"item"</span><span class='nt'>></span>...<span class='nt'></div></span>
|
||||
...
|
||||
<span class='nt'></div></span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<h3 id='script'>Script</h3>
|
||||
<div class='highlight'><pre><code class='javascript'><span class='nx'>$</span><span class='p'>(</span><span class='s1'>'#container'</span><span class='p'>).</span><span class='nx'>isotope</span><span class='p'>({</span>
|
||||
<span class='c1'>// options</span>
|
||||
<span class='nx'>itemSelector</span> <span class='o'>:</span> <span class='s1'>'.item'</span><span class='p'>,</span>
|
||||
<span class='nx'>layoutMode</span> <span class='o'>:</span> <span class='s1'>'fitRows'</span>
|
||||
<span class='p'>});</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<p><a href='../demos/basic.html'><strong>See Demo: Basic</strong></a></p>
|
||||
|
||||
<p>There are a number of <a href='options.html'>options</a> you can specify. Within the options is where you can <a href='layout-modes.html'>set the layout mode</a>, <a href='filtering.html'>filter items</a>, and <a href='sorting.html'>sort items</a>.</p>
|
||||
|
||||
<p>Additionally you can specify a callback after the options object. This function will be triggered after the animation has completed.</p>
|
||||
<div class='highlight'><pre><code class='javascript'><span class='nx'>$</span><span class='p'>(</span><span class='s1'>'#container'</span><span class='p'>).</span><span class='nx'>isotope</span><span class='p'>({</span> <span class='nx'>filter</span><span class='o'>:</span> <span class='s1'>'.my-selector'</span> <span class='p'>},</span> <span class='kd'>function</span><span class='p'>(</span> <span class='nx'>$items</span> <span class='p'>)</span> <span class='p'>{</span>
|
||||
<span class='kd'>var</span> <span class='nx'>id</span> <span class='o'>=</span> <span class='k'>this</span><span class='p'>.</span><span class='nx'>attr</span><span class='p'>(</span><span class='s1'>'id'</span><span class='p'>),</span>
|
||||
<span class='nx'>len</span> <span class='o'>=</span> <span class='nx'>$items</span><span class='p'>.</span><span class='nx'>length</span><span class='p'>;</span>
|
||||
<span class='nx'>console</span><span class='p'>.</span><span class='nx'>log</span><span class='p'>(</span> <span class='s1'>'Isotope has filtered for '</span> <span class='o'>+</span> <span class='nx'>len</span> <span class='o'>+</span> <span class='s1'>' items in #'</span> <span class='o'>+</span> <span class='nx'>id</span> <span class='p'>);</span>
|
||||
<span class='p'>});</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<p>Within this callback <code><span class='k'>this</span></code> refers to the container, and <code>$items</code> refers to the item elements. Both of these are jQuery objects and do <em>not</em> need to be put in jQuery wrappers.</p>
|
||||
|
||||
<h3 id='css'>CSS</h3>
|
||||
|
||||
<p>Add these styles to your CSS for <a href='filtering.html'>filtering</a>, <a href='animating.html'>animation</a> with CSS transitions, and <a href='adding-items.html'>adding items</a>.</p>
|
||||
<div class='highlight'><pre><code class='css'><span class='c'>/**** Isotope Filtering ****/</span>
|
||||
|
||||
<span class='nc'>.isotope-item</span> <span class='p'>{</span>
|
||||
<span class='k'>z-index</span><span class='o'>:</span> <span class='m'>2</span><span class='p'>;</span>
|
||||
<span class='p'>}</span>
|
||||
|
||||
<span class='nc'>.isotope-hidden.isotope-item</span> <span class='p'>{</span>
|
||||
<span class='k'>pointer</span><span class='o'>-</span><span class='n'>events</span><span class='o'>:</span> <span class='k'>none</span><span class='p'>;</span>
|
||||
<span class='k'>z-index</span><span class='o'>:</span> <span class='m'>1</span><span class='p'>;</span>
|
||||
<span class='p'>}</span>
|
||||
|
||||
<span class='c'>/**** Isotope CSS3 transitions ****/</span>
|
||||
|
||||
<span class='nc'>.isotope</span><span class='o'>,</span>
|
||||
<span class='nc'>.isotope</span> <span class='nc'>.isotope-item</span> <span class='p'>{</span>
|
||||
<span class='o'>-</span><span class='n'>webkit</span><span class='o'>-</span><span class='n'>transition</span><span class='o'>-</span><span class='n'>duration</span><span class='o'>:</span> <span class='m'>0.8s</span><span class='p'>;</span>
|
||||
<span class='o'>-</span><span class='n'>moz</span><span class='o'>-</span><span class='n'>transition</span><span class='o'>-</span><span class='n'>duration</span><span class='o'>:</span> <span class='m'>0.8s</span><span class='p'>;</span>
|
||||
<span class='n'>transition</span><span class='o'>-</span><span class='n'>duration</span><span class='o'>:</span> <span class='m'>0.8s</span><span class='p'>;</span>
|
||||
<span class='p'>}</span>
|
||||
|
||||
<span class='nc'>.isotope</span> <span class='p'>{</span>
|
||||
<span class='o'>-</span><span class='n'>webkit</span><span class='o'>-</span><span class='n'>transition</span><span class='o'>-</span><span class='n'>property</span><span class='o'>:</span> <span class='k'>height</span><span class='o'>,</span> <span class='k'>width</span><span class='p'>;</span>
|
||||
<span class='o'>-</span><span class='n'>moz</span><span class='o'>-</span><span class='n'>transition</span><span class='o'>-</span><span class='n'>property</span><span class='o'>:</span> <span class='k'>height</span><span class='o'>,</span> <span class='k'>width</span><span class='p'>;</span>
|
||||
<span class='n'>transition</span><span class='o'>-</span><span class='n'>property</span><span class='o'>:</span> <span class='k'>height</span><span class='o'>,</span> <span class='k'>width</span><span class='p'>;</span>
|
||||
<span class='p'>}</span>
|
||||
|
||||
<span class='nc'>.isotope</span> <span class='nc'>.isotope-item</span> <span class='p'>{</span>
|
||||
<span class='o'>-</span><span class='n'>webkit</span><span class='o'>-</span><span class='n'>transition</span><span class='o'>-</span><span class='n'>property</span><span class='o'>:</span> <span class='o'>-</span><span class='n'>webkit</span><span class='o'>-</span><span class='n'>transform</span><span class='o'>,</span> <span class='k'>opacity</span><span class='p'>;</span>
|
||||
<span class='o'>-</span><span class='n'>moz</span><span class='o'>-</span><span class='n'>transition</span><span class='o'>-</span><span class='n'>property</span><span class='o'>:</span> <span class='o'>-</span><span class='n'>moz</span><span class='o'>-</span><span class='n'>transform</span><span class='o'>,</span> <span class='k'>opacity</span><span class='p'>;</span>
|
||||
<span class='n'>transition</span><span class='o'>-</span><span class='n'>property</span><span class='o'>:</span> <span class='n'>transform</span><span class='o'>,</span> <span class='k'>opacity</span><span class='p'>;</span>
|
||||
<span class='p'>}</span>
|
||||
|
||||
<span class='c'>/**** disabling Isotope CSS3 transitions ****/</span>
|
||||
|
||||
<span class='nc'>.isotope.no-transition</span><span class='o'>,</span>
|
||||
<span class='nc'>.isotope.no-transition</span> <span class='nc'>.isotope-item</span><span class='o'>,</span>
|
||||
<span class='nc'>.isotope</span> <span class='nc'>.isotope-item.no-transition</span> <span class='p'>{</span>
|
||||
<span class='o'>-</span><span class='n'>webkit</span><span class='o'>-</span><span class='n'>transition</span><span class='o'>-</span><span class='n'>duration</span><span class='o'>:</span> <span class='m'>0s</span><span class='p'>;</span>
|
||||
<span class='o'>-</span><span class='n'>moz</span><span class='o'>-</span><span class='n'>transition</span><span class='o'>-</span><span class='n'>duration</span><span class='o'>:</span> <span class='m'>0s</span><span class='p'>;</span>
|
||||
<span class='n'>transition</span><span class='o'>-</span><span class='n'>duration</span><span class='o'>:</span> <span class='m'>0s</span><span class='p'>;</span>
|
||||
<span class='p'>}</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<h2 id='code_repository'>Code repository</h2>
|
||||
|
||||
<p>This project lives on GitHub at <a href='http://github.com/desandro/isotope'>github.com/desandro/isotope</a>. There you can grab the latest code and follow development.</p>
|
||||
|
||||
<h2 id='moderation'>A word about moderation</h2>
|
||||
|
||||
<p>Isotope enables a wealth of functionality. But just because you can take advantage of its numerous features together, doesn’t mean you necessarily should. For each each feature you implement with Isotope, consider the benefit gained by users, at the cost of another level of complexity to your interface.</p>
|
||||
|
||||
<h2 id='acknowledgments'>Acknowledgments</h2>
|
||||
|
||||
<ul>
|
||||
<li><a href='http://benalman.com/'><strong>“Cowboy” Ben Alman</strong></a> for <a href='http://benalman.com/projects/jquery-bbq-plugin/'>jQuery BBQ</a> (included with docs)</li>
|
||||
|
||||
<li><a href='http://twitter.com/Louis_Remi'><strong>Louis-Rémi Babé</strong></a> for <a href='https://github.com/louisremi/jquery-smartresize'>jQuery smartresize</a> (used within Isotope) and for <a href='https://github.com/louisremi/jquery.transform.js'>jQuery transform</a> which clued me in to using jQuery 1.4.3’s CSS hooks</li>
|
||||
|
||||
<li><a href='http://razorjack.net/'><strong>Jacek Galanciak</strong></a> for <a href='http://razorjack.net/quicksand/'>jQuery Quicksand</a>, an early kernel of inspiration</li>
|
||||
|
||||
<li><a href='http://twitter.com/#!/ralphholzmann'><strong>Ralph Holzmann</strong></a> for re-writing the <a href='http://docs.jquery.com/Plugins/Authoring'>jQuery Plugins/Authoring tutorial</a> and opened my eyes to <a href='http://docs.jquery.com/Plugins/Authoring#Plugin_Methods'>Plugin Methods</a> pattern</li>
|
||||
|
||||
<li><a href='http://www.erichynds.com/'><strong>Eric Hynds</strong></a> for his article <a href='http://www.erichynds.com/jquery/using-jquery-ui-widget-factory-bridge/'>Using $.widget.bridge Outside of the Widget Factory</a> which provided the architecture for Isotope</li>
|
||||
|
||||
<li><a href='http://paul-irish.com'><strong>Paul Irish</strong></a> for <a href='http://infinite-scroll.com'>Infinite Scroll</a> (included with docs), the <a href='http://gist.github.com/268257'>imagesLoaded plugin</a> (included with Isotope), and <a href='http://paulirish.com/demo/resize'>Debounced resize() plugin</a> (provided base for smartresize)</li>
|
||||
|
||||
<li>The <a href='http://jqueryui.com/about'><strong>jQuery UI Team</strong></a> for <a href='https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.widget.js#L113-155'>$.widget.bridge</a> (partially used within Isotope)</li>
|
||||
|
||||
<li>The Modernizr team for <a href='http://www.modernizr.com/'>Modernizr</a> (partially used within Isotope)</li>
|
||||
|
||||
<li><a href='http://perfectionkills.com'><strong>Juriy Zaytsev aka “kangax”</strong></a> for <a href='http://perfectionkills.com/feature-testing-css-properties/'>getStyleProperty</a> (used within Isotope)</li>
|
||||
</ul>
|
||||
|
||||
<footer>
|
||||
Isotope by <a href="http://desandro.com">David DeSandro</a> / <a href="http://metafizzy.co">Metafizzy</a>
|
||||
</footer>
|
||||
|
||||
</section> <!-- #content -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
336
sites/all/libraries/isotope-site/docs/layout-modes.html
Normal file
336
sites/all/libraries/isotope-site/docs/layout-modes.html
Normal file
@@ -0,0 +1,336 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<title>Layout modes · Isotope Docs</title>
|
||||
|
||||
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
|
||||
<!-- scripts at bottom of page -->
|
||||
|
||||
</head>
|
||||
<body class="docs option-def">
|
||||
|
||||
<nav id="site-nav">
|
||||
<h1><a href="../index.html">Isotope</a></h1>
|
||||
|
||||
<h2>Docs</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../docs/introduction.html">Introduction</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/options.html">Options</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/methods.html">Methods</a>
|
||||
|
||||
|
||||
|
||||
<li class="current"><a href="#content">Layout modes</a>
|
||||
<ul class="toc">
|
||||
|
||||
<li><a href="#cellsbycolumn">cellsByColumn</a></li>
|
||||
|
||||
<li><a href="#cellsbyrow">cellsByRow</a></li>
|
||||
|
||||
<li><a href="#fitcolumns">fitColumns</a></li>
|
||||
|
||||
<li><a href="#fitrows">fitRows</a></li>
|
||||
|
||||
<li><a href="#masonry">masonry</a></li>
|
||||
|
||||
<li><a href="#masonryhorizontal">masonryHorizontal</a></li>
|
||||
|
||||
<li><a href="#straightacross">straightAcross</a></li>
|
||||
|
||||
<li><a href="#straightdown">straightDown</a></li>
|
||||
|
||||
<li><a href="#horizontal_layouts">Horizontal layouts</a></li>
|
||||
|
||||
<li><a href="#modified_layout_modes">Modified layout modes</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/animating.html">Animating</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/extending-isotope.html">Extending Isotope</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/hash-history-jquery-bbq.html">Hash history with jQuery BBQ</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/help.html">Help</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/license.html">License</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Demos</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../demos/basic.html">Basic</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-complete.html">Elements Complete</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-partial.html">Elements Partial</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/relayout.html">reLayout</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/infinite-scroll.html">Infinite Scroll</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/images.html">Images</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/combination-filters.html">Combination filters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/hash-history.html">Hash history</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/fluid-responsive.html">Fluid / responsive</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Custom layout modes</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/centered-masonry.html">Centered Masonry</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/category-rows.html">Category rows</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-corner-stamp.html">Masonry corner stamp</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-gutters.html">Masonry gutters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/spine-align.html">Spine align</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2><a href="../tests/index.html">Tests</a></h2>
|
||||
|
||||
</nav> <!-- #site-nav -->
|
||||
|
||||
<section id="content">
|
||||
|
||||
<h1>Layout modes</h1>
|
||||
|
||||
|
||||
<p>Isotope has a versatile layout engine that can accommodate multiple layout modes. You can set and change the layout mode via the <code>layoutMode</code> option.</p>
|
||||
|
||||
<p><a href='../demos/layout-modes.html'><strong>See Demo: Layout modes</strong></a></p>
|
||||
|
||||
<h3 id='example'>Example</h3>
|
||||
<div class='highlight'><pre><code class='javascript'><span class='nx'>$</span><span class='p'>(</span><span class='s1'>'#container'</span><span class='p'>).</span><span class='nx'>isotope</span><span class='p'>({</span> <span class='nx'>layoutMode</span> <span class='o'>:</span> <span class='s1'>'fitRows'</span> <span class='p'>});</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<p>Several layout modes are built into Isotope.</p>
|
||||
|
||||
<h2 id='cellsbycolumn'>cellsByColumn</h2>
|
||||
|
||||
<p>A grid layout where items are centered inside each cell. The grid is defined by two options, <code>columnWidth</code> and <code>rowHeight</code>. The horizontal equivalent of cellsByRow.</p>
|
||||
|
||||
<h3 id='cellsByColumn-options'>Options</h3>
|
||||
<dl class='clearfix'>
|
||||
<dt><code>columnWidth</code></dt>
|
||||
<dd class='option-type'>Integer</dd>
|
||||
</dl><dl class='clearfix'>
|
||||
<dt><code>rowHeight</code></dt>
|
||||
<dd class='option-type'>Integer</dd>
|
||||
</dl>
|
||||
<h3 id='cellsByColumn-example'>Example</h3>
|
||||
<div class='highlight'><pre><code class='javascript'><span class='nx'>$</span><span class='p'>(</span><span class='s1'>'#container'</span><span class='p'>).</span><span class='nx'>isotope</span><span class='p'>({</span>
|
||||
<span class='nx'>layoutMode</span> <span class='o'>:</span> <span class='s1'>'cellsByColumn'</span><span class='p'>,</span>
|
||||
<span class='nx'>cellsByRow</span> <span class='o'>:</span> <span class='p'>{</span>
|
||||
<span class='nx'>columnWidth</span> <span class='o'>:</span> <span class='mi'>240</span><span class='p'>,</span>
|
||||
<span class='nx'>rowHeight</span> <span class='o'>:</span> <span class='mi'>360</span>
|
||||
<span class='p'>}</span>
|
||||
<span class='p'>});</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<h2 id='cellsbyrow'>cellsByRow</h2>
|
||||
|
||||
<p>A grid layout where items are centered inside each cell. The grid is defined by two options, <code>columnWidth</code> and <code>rowHeight</code>.</p>
|
||||
|
||||
<h3 id='cellsByRow-options'>Options</h3>
|
||||
<dl class='clearfix'>
|
||||
<dt><code>columnWidth</code></dt>
|
||||
<dd class='option-type'>Integer</dd>
|
||||
</dl><dl class='clearfix'>
|
||||
<dt><code>rowHeight</code></dt>
|
||||
<dd class='option-type'>Integer</dd>
|
||||
</dl>
|
||||
<h3 id='cellsByRow-example'>Example</h3>
|
||||
<div class='highlight'><pre><code class='javascript'><span class='nx'>$</span><span class='p'>(</span><span class='s1'>'#container'</span><span class='p'>).</span><span class='nx'>isotope</span><span class='p'>({</span>
|
||||
<span class='nx'>layoutMode</span> <span class='o'>:</span> <span class='s1'>'cellsByRow'</span><span class='p'>,</span>
|
||||
<span class='nx'>cellsByRow</span> <span class='o'>:</span> <span class='p'>{</span>
|
||||
<span class='nx'>columnWidth</span> <span class='o'>:</span> <span class='mi'>240</span><span class='p'>,</span>
|
||||
<span class='nx'>rowHeight</span> <span class='o'>:</span> <span class='mi'>360</span>
|
||||
<span class='p'>}</span>
|
||||
<span class='p'>});</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<h2 id='fitcolumns'>fitColumns</h2>
|
||||
|
||||
<p>Item elements are arranged into columns. The horizontal equivalent of fitRows. Columns progress from left to right. Items within those columns are arranged top-to-bottom.</p>
|
||||
|
||||
<h2 id='fitrows'>fitRows</h2>
|
||||
|
||||
<p>Item elements are arranged into rows, left to right. Rows progress top to bottom. Similar to what you would expect from a layout that uses <code>float: left</code>.</p>
|
||||
|
||||
<h2 id='masonry'>masonry</h2>
|
||||
|
||||
<p>masonry is the default layout mode for Isotope. Item elements are arranged intelligently within a grid. For each item element, the script calculates the next best fit for the item within the grid.</p>
|
||||
|
||||
<h3 id='masonry-options'>Options</h3>
|
||||
<dl class='clearfix'>
|
||||
<dt><code>columnWidth</code></dt>
|
||||
<dd class='option-type'>Integer</dd>
|
||||
</dl>
|
||||
<p>The width of one column in the grid. If no value is set for <code>columnWidth</code>, default is the width of the first item element.</p>
|
||||
|
||||
<h3 id='masonry-example'>Example</h3>
|
||||
<div class='highlight'><pre><code class='javascript'><span class='nx'>$</span><span class='p'>(</span><span class='s1'>'#container'</span><span class='p'>).</span><span class='nx'>isotope</span><span class='p'>({</span>
|
||||
<span class='nx'>masonry</span> <span class='o'>:</span> <span class='p'>{</span>
|
||||
<span class='nx'>columnWidth</span> <span class='o'>:</span> <span class='mi'>240</span>
|
||||
<span class='p'>}</span>
|
||||
<span class='p'>});</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<h2 id='masonryhorizontal'>masonryHorizontal</h2>
|
||||
|
||||
<p>The horizontal equivalent of masonry layout. Instead of progressing top-to-bottom, masonryHorizontal layout will progress left-to-right. Item elements are arranged intelligently within a grid. For each item element, the script calculates the next best fit for the item within the grid.</p>
|
||||
|
||||
<h3 id='masonryHorizontal-options'>Options</h3>
|
||||
<dl class='clearfix'>
|
||||
<dt><code>rowHeight</code></dt>
|
||||
<dd class='option-type'>Integer</dd>
|
||||
</dl>
|
||||
<p>The width of one column in the grid. If no value is set for <code>rowHeight</code>, default is the height of the first item element.</p>
|
||||
|
||||
<h3 id='masonryHorizontal-example'>Example</h3>
|
||||
<div class='highlight'><pre><code class='javascript'><span class='nx'>$</span><span class='p'>(</span><span class='s1'>'#container'</span><span class='p'>).</span><span class='nx'>isotope</span><span class='p'>({</span>
|
||||
<span class='nx'>masonryHorizontal</span> <span class='o'>:</span> <span class='p'>{</span>
|
||||
<span class='nx'>rowHeight</span> <span class='o'>:</span> <span class='mi'>360</span>
|
||||
<span class='p'>}</span>
|
||||
<span class='p'>});</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<h2 id='straightacross'>straightAcross</h2>
|
||||
|
||||
<p>Item elements are arranged horizontally left to right. Useful for simple lists.</p>
|
||||
|
||||
<h2 id='straightdown'>straightDown</h2>
|
||||
|
||||
<p>Item elements are arranged vertically top to bottom. Useful for simple lists.</p>
|
||||
|
||||
<h2 id='horizontal_layouts'>Horizontal layouts</h2>
|
||||
|
||||
<p>Horizontal layout modes (masonryHorizontal, fitColumns, cellsByColumn, and straightAcross) need a container that has a height value. Be sure that your CSS has height set.</p>
|
||||
<div class='highlight'><pre><code class='css'><span class='nf'>#container</span> <span class='p'>{</span>
|
||||
<span class='c'>/* either of these will work for horizontal Isotope layouts */</span>
|
||||
<span class='k'>height</span><span class='o'>:</span> <span class='m'>80</span><span class='o'>%</span><span class='p'>;</span>
|
||||
<span class='k'>height</span><span class='o'>:</span> <span class='m'>480px</span><span class='p'>;</span>
|
||||
<span class='p'>}</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<h2 id='modified_layout_modes'>Modified layout modes</h2>
|
||||
|
||||
<p><a href='extending-isotope.html'>Isotope’s methods can be extended and overwritten</a> to shim-in additional functionality. See these modified layout modes:</p>
|
||||
|
||||
<ul>
|
||||
<li><a href='../custom-layout-modes/centered-masonry.html'><strong>Centered masonry</strong></a></li>
|
||||
|
||||
<li><a href='../custom-layout-modes/masonry-corner-stamp.html'><strong>Masonry corner stamp</strong></a></li>
|
||||
|
||||
<li><a href='../custom-layout-modes/masonry-gutters.html'><strong>Masonry gutters</strong></a></li>
|
||||
</ul>
|
||||
|
||||
<p>To use these mods, copy the revised methods found in the demos’ page source. They look like:</p>
|
||||
<div class='highlight'><pre><code class='javascript'><span class='nx'>$</span><span class='p'>.</span><span class='nx'>Isotope</span><span class='p'>.</span><span class='nx'>prototype</span><span class='p'>.</span><span class='nx'>_masonryReset</span> <span class='o'>=</span> <span class='kd'>function</span><span class='p'>()</span> <span class='p'>{</span>
|
||||
<span class='c1'>// modified code..</span>
|
||||
<span class='p'>};</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
Isotope by <a href="http://desandro.com">David DeSandro</a> / <a href="http://metafizzy.co">Metafizzy</a>
|
||||
</footer>
|
||||
|
||||
</section> <!-- #content -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
215
sites/all/libraries/isotope-site/docs/license.html
Normal file
215
sites/all/libraries/isotope-site/docs/license.html
Normal file
@@ -0,0 +1,215 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<title>License · Isotope Docs</title>
|
||||
|
||||
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
|
||||
<!-- scripts at bottom of page -->
|
||||
|
||||
</head>
|
||||
<body class="docs ">
|
||||
|
||||
<nav id="site-nav">
|
||||
<h1><a href="../index.html">Isotope</a></h1>
|
||||
|
||||
<h2>Docs</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../docs/introduction.html">Introduction</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/options.html">Options</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/methods.html">Methods</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/animating.html">Animating</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/extending-isotope.html">Extending Isotope</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/hash-history-jquery-bbq.html">Hash history with jQuery BBQ</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/help.html">Help</a>
|
||||
|
||||
|
||||
|
||||
<li class="current"><a href="#content">License</a>
|
||||
<ul class="toc">
|
||||
|
||||
<li><a href="#isotope_commercial_license_agreement">Isotope Commercial License Agreement</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Demos</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../demos/basic.html">Basic</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-complete.html">Elements Complete</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-partial.html">Elements Partial</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/relayout.html">reLayout</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/infinite-scroll.html">Infinite Scroll</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/images.html">Images</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/combination-filters.html">Combination filters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/hash-history.html">Hash history</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/fluid-responsive.html">Fluid / responsive</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Custom layout modes</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/centered-masonry.html">Centered Masonry</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/category-rows.html">Category rows</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-corner-stamp.html">Masonry corner stamp</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-gutters.html">Masonry gutters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/spine-align.html">Spine align</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2><a href="../tests/index.html">Tests</a></h2>
|
||||
|
||||
</nav> <!-- #site-nav -->
|
||||
|
||||
<section id="content">
|
||||
|
||||
<h1>License</h1>
|
||||
|
||||
|
||||
<p>Isotope may be used in non-commercial and personal applications for free.</p>
|
||||
|
||||
<p>For commercial applications, you may license Isotope with the purchase of a one-time fee per developer seat (how many of you will be developing with Isotope) . <a href='http://metafizzy.co/#isotope-license'>Commercial licenses may be purchased at metafizzy.co</a>.</p>
|
||||
|
||||
<p>In short, with a purchase of a commercial license:</p>
|
||||
|
||||
<ul>
|
||||
<li>Once purchased, you may use Isotope in all your future commercial applications.</li>
|
||||
|
||||
<li>You may use Isotope in your own commercial applications, i.e. WordPress, Tumblr, or other CMS themes or templates.</li>
|
||||
|
||||
<li>Customers of your products <em>do not</em> need to purchase their own license.</li>
|
||||
</ul>
|
||||
|
||||
<p>Copyright © 2011 David DeSandro / Metafizzy LLC</p>
|
||||
|
||||
<h2 id='isotope_commercial_license_agreement'>Isotope Commercial License Agreement</h2>
|
||||
|
||||
<p>This Commercial License Agreement (the <strong>Agreement</strong>) is a binding legal agreement between you and Metafizzy LLC (<strong>Metafizzy</strong>). By installing, copying, or using Isotope (the <strong>Software</strong>), you agree to be bound by these terms of this Agreement.</p>
|
||||
|
||||
<h3 id='usage'>Usage</h3>
|
||||
|
||||
<p>This Agreement grants a non-exclusive, non-transferable license to use the Software to design and develop software (<strong>Applications</strong>).</p>
|
||||
|
||||
<p>You are granted 1 license for you as 1 designated user to use the Software for the purpose of developing Applications (<strong>Developer</strong>). You must purchase another separate license to the Software for each and any additional Developer. For example, if your company has 5 developers using the Software, you need to purchase 5 licenses.</p>
|
||||
|
||||
<p>You are granted the right to use and to modify the source code of the Software for use in Applications. You own any original work authored by you; Metafizzy continues to retain all copyright and other intellectual property rights in the Software. You are not permitted to move, remove, edit, or obscure any copyright, trademark, attribution, warning or disclaimer notices in the Software.</p>
|
||||
|
||||
<p>You may use the Software only to create Applications that are significantly different than and do not compete with the Software. You are granted the license to distribute the Software as part of your Applications on a royalty-free basis. Users of your Applications are permitted to use the Software or your modifications of the Software for development purposes.</p>
|
||||
|
||||
<h3 id='warranties_and_remedies'>Warranties and Remedies</h3>
|
||||
|
||||
<p>THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. METAFIZZY’S ENTIRE LIABILITY AND YOUR EXCLUSIVE REMEDY UNDER THIS AGREEMENT SHALL BE RETURN OF THE PRICE PAID FOR THE SOFTWARE.</p>
|
||||
|
||||
<footer>
|
||||
Isotope by <a href="http://desandro.com">David DeSandro</a> / <a href="http://metafizzy.co">Metafizzy</a>
|
||||
</footer>
|
||||
|
||||
</section> <!-- #content -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
286
sites/all/libraries/isotope-site/docs/methods.html
Normal file
286
sites/all/libraries/isotope-site/docs/methods.html
Normal file
@@ -0,0 +1,286 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<title>Methods · Isotope Docs</title>
|
||||
|
||||
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
|
||||
<!-- scripts at bottom of page -->
|
||||
|
||||
</head>
|
||||
<body class="docs ">
|
||||
|
||||
<nav id="site-nav">
|
||||
<h1><a href="../index.html">Isotope</a></h1>
|
||||
|
||||
<h2>Docs</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../docs/introduction.html">Introduction</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/options.html">Options</a>
|
||||
|
||||
|
||||
|
||||
<li class="current"><a href="#content">Methods</a>
|
||||
<ul class="toc">
|
||||
|
||||
<li><a href="#additems">addItems</a></li>
|
||||
|
||||
<li><a href="#appended">appended</a></li>
|
||||
|
||||
<li><a href="#destroy">destroy</a></li>
|
||||
|
||||
<li><a href="#insert">insert</a></li>
|
||||
|
||||
<li><a href="#layout">layout</a></li>
|
||||
|
||||
<li><a href="#option">option</a></li>
|
||||
|
||||
<li><a href="#relayout">reLayout</a></li>
|
||||
|
||||
<li><a href="#reloaditems">reloadItems</a></li>
|
||||
|
||||
<li><a href="#remove">remove</a></li>
|
||||
|
||||
<li><a href="#shuffle">shuffle</a></li>
|
||||
|
||||
<li><a href="#updatesortdata">updateSortData</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/animating.html">Animating</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/extending-isotope.html">Extending Isotope</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/hash-history-jquery-bbq.html">Hash history with jQuery BBQ</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/help.html">Help</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/license.html">License</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Demos</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../demos/basic.html">Basic</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-complete.html">Elements Complete</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-partial.html">Elements Partial</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/relayout.html">reLayout</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/infinite-scroll.html">Infinite Scroll</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/images.html">Images</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/combination-filters.html">Combination filters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/hash-history.html">Hash history</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/fluid-responsive.html">Fluid / responsive</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Custom layout modes</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/centered-masonry.html">Centered Masonry</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/category-rows.html">Category rows</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-corner-stamp.html">Masonry corner stamp</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-gutters.html">Masonry gutters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/spine-align.html">Spine align</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2><a href="../tests/index.html">Tests</a></h2>
|
||||
|
||||
</nav> <!-- #site-nav -->
|
||||
|
||||
<section id="content">
|
||||
|
||||
<h1>Methods</h1>
|
||||
|
||||
|
||||
<p>Isotope offers several methods to extend functionality. Isotope’s methods follow the jQuery UI pattern.</p>
|
||||
<div class='highlight'><pre><code class='javascript'><span class='nx'>$</span><span class='p'>(</span><span class='s1'>'#container'</span><span class='p'>).</span><span class='nx'>isotope</span><span class='p'>(</span> <span class='s1'>'methodName'</span><span class='p'>,</span> <span class='p'>[</span><span class='nx'>optionalParameters</span><span class='p'>]</span> <span class='p'>)</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<h2 id='additems'>addItems</h2>
|
||||
<div class='highlight'><pre><code class='javascript'><span class='p'>.</span><span class='nx'>isotope</span><span class='p'>(</span> <span class='s1'>'addItems'</span><span class='p'>,</span> <span class='nx'>$items</span><span class='p'>,</span> <span class='nx'>callback</span> <span class='p'>)</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<p>Adds item elements to the pool of item elements of the container, but does sort, filter or layout. See <a href='adding-items.html'>Adding items</a> for more details. The argument within the callback is the group of elements that were added.</p>
|
||||
|
||||
<p><a href='../demos/adding-items.html'><strong>See Demo: Adding items</strong></a></p>
|
||||
|
||||
<h2 id='appended'>appended</h2>
|
||||
<div class='highlight'><pre><code class='javascript'><span class='p'>.</span><span class='nx'>isotope</span><span class='p'>(</span> <span class='s1'>'appended'</span><span class='p'>,</span> <span class='nx'>$items</span><span class='p'>,</span> <span class='nx'>callback</span> <span class='p'>)</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<p>Adds item elements via <code>addItems</code> method, then triggers <code>layout</code> just for those new elements. Useful for Infinite Scroll. See <a href='adding-items.html'>Adding items</a> for more details.</p>
|
||||
|
||||
<p><a href='../demos/adding-items.html'><strong>See Demo: Adding items</strong></a></p>
|
||||
|
||||
<h2 id='destroy'>destroy</h2>
|
||||
<div class='highlight'><pre><code class='javascript'><span class='p'>.</span><span class='nx'>isotope</span><span class='p'>(</span> <span class='s1'>'destroy'</span> <span class='p'>)</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<p>Removes Isotope functionality completely. Returns element back to pre-init state.</p>
|
||||
|
||||
<h2 id='insert'>insert</h2>
|
||||
<div class='highlight'><pre><code class='javascript'><span class='p'>.</span><span class='nx'>isotope</span><span class='p'>(</span> <span class='s1'>'insert'</span><span class='p'>,</span> <span class='nx'>$items</span><span class='p'>,</span> <span class='nx'>callback</span> <span class='p'>)</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<p>Appends items elements to container, adds items to via <code>addItems</code> method, and then triggers <code>reLayout</code> method so new elements are properly filtered, sorted and laid-out. See <a href='adding-items.html'>Adding items</a> for more details.</p>
|
||||
|
||||
<p><a href='../demos/adding-items.html'><strong>See Demo: Adding items</strong></a>.</p>
|
||||
|
||||
<h2 id='layout'>layout</h2>
|
||||
<div class='highlight'><pre><code class='javascript'><span class='p'>.</span><span class='nx'>isotope</span><span class='p'>(</span> <span class='s1'>'layout'</span><span class='p'>,</span> <span class='nx'>$items</span><span class='p'>,</span> <span class='nx'>callback</span> <span class='p'>)</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<p>Positions specified item elements in layout.</p>
|
||||
|
||||
<p><code>layout</code> will only position specified elements, and those elements will be positioned at the end of layout. Whereas <code>reLayout</code> will position all elements in the Isotope widget.</p>
|
||||
|
||||
<h2 id='option'>option</h2>
|
||||
<div class='highlight'><pre><code class='javascript'><span class='p'>.</span><span class='nx'>isotope</span><span class='p'>(</span> <span class='s1'>'option'</span><span class='p'>,</span> <span class='nx'>options</span> <span class='p'>)</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<p>Sets options for plugin instance. Unlike passing options through <code>.isotope()</code>, using the <code>option</code> method will not trigger layout.</p>
|
||||
<div class='highlight'><pre><code class='javascript'><span class='c1'>// sets multiple options</span>
|
||||
<span class='p'>.</span><span class='nx'>isotope</span><span class='p'>(</span> <span class='s1'>'option'</span><span class='p'>,</span> <span class='p'>{</span> <span class='nx'>layoutMode</span><span class='o'>:</span> <span class='s1'>'fitRows'</span><span class='p'>,</span> <span class='nx'>filter</span><span class='o'>:</span> <span class='s1'>'.my-filter'</span> <span class='p'>}</span> <span class='p'>)</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<h2 id='relayout'>reLayout</h2>
|
||||
<div class='highlight'><pre><code class='javascript'><span class='p'>.</span><span class='nx'>isotope</span><span class='p'>(</span> <span class='s1'>'reLayout'</span><span class='p'>,</span> <span class='nx'>callback</span> <span class='p'>)</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<p>Resets layout properties and lays-out every item element.</p>
|
||||
|
||||
<p><a href='../demos/relayout.html'><strong>See Demo: reLayout</strong></a></p>
|
||||
|
||||
<h2 id='reloaditems'>reloadItems</h2>
|
||||
<div class='highlight'><pre><code class='javascript'><span class='p'>.</span><span class='nx'>isotope</span><span class='p'>(</span> <span class='s1'>'reloadItems'</span> <span class='p'>)</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<p>Re-collects all item elements in their current order in the DOM. Useful for prepending.</p>
|
||||
|
||||
<p><a href='../demos/adding-items.html'><strong>See Demo: Adding items</strong></a>.</p>
|
||||
|
||||
<h2 id='remove'>remove</h2>
|
||||
<div class='highlight'><pre><code class='javascript'><span class='p'>.</span><span class='nx'>isotope</span><span class='p'>(</span> <span class='s1'>'remove'</span><span class='p'>,</span> <span class='nx'>$items</span> <span class='p'>)</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<p>Removes specified item elements from Isotope widget and the DOM.</p>
|
||||
|
||||
<h2 id='shuffle'>shuffle</h2>
|
||||
<div class='highlight'><pre><code class='javascript'><span class='p'>.</span><span class='nx'>isotope</span><span class='p'>(</span> <span class='s1'>'shuffle'</span><span class='p'>,</span> <span class='nx'>callback</span> <span class='p'>)</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<p>Shuffles order of items. Sets <a href='options.html#sortby'><code>sortBy</code> option</a> to <a href='sorting.html#sortby_option'><code>'random'</code></a>.</p>
|
||||
|
||||
<h2 id='updatesortdata'>updateSortData</h2>
|
||||
<div class='highlight'><pre><code class='javascript'><span class='p'>.</span><span class='nx'>isotope</span><span class='p'>(</span> <span class='s1'>'updateSortData'</span><span class='p'>,</span> <span class='nx'>$items</span> <span class='p'>)</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<p>Updates the sorting data on specified item elements. This method is useful if the data within an item is changed dynamically after Isotope has been initialized.</p>
|
||||
|
||||
<footer>
|
||||
Isotope by <a href="http://desandro.com">David DeSandro</a> / <a href="http://metafizzy.co">Metafizzy</a>
|
||||
</footer>
|
||||
|
||||
</section> <!-- #content -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
460
sites/all/libraries/isotope-site/docs/options.html
Normal file
460
sites/all/libraries/isotope-site/docs/options.html
Normal file
@@ -0,0 +1,460 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<title>Options · Isotope Docs</title>
|
||||
|
||||
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
|
||||
<!-- scripts at bottom of page -->
|
||||
|
||||
</head>
|
||||
<body class="docs option-def">
|
||||
|
||||
<nav id="site-nav">
|
||||
<h1><a href="../index.html">Isotope</a></h1>
|
||||
|
||||
<h2>Docs</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../docs/introduction.html">Introduction</a>
|
||||
|
||||
|
||||
|
||||
<li class="current"><a href="#content">Options</a>
|
||||
<ul class="toc">
|
||||
|
||||
<li><a href="#animationengine">animationEngine</a></li>
|
||||
|
||||
<li><a href="#animationoptions">animationOptions</a></li>
|
||||
|
||||
<li><a href="#containerclass">containerClass</a></li>
|
||||
|
||||
<li><a href="#filter">filter</a></li>
|
||||
|
||||
<li><a href="#getsortdata">getSortData</a></li>
|
||||
|
||||
<li><a href="#hiddenclass">hiddenClass</a></li>
|
||||
|
||||
<li><a href="#hiddenstyle">hiddenStyle</a></li>
|
||||
|
||||
<li><a href="#itemclass">itemClass</a></li>
|
||||
|
||||
<li><a href="#itempositiondataenabled">itemPositionDataEnabled</a></li>
|
||||
|
||||
<li><a href="#itemselector">itemSelector</a></li>
|
||||
|
||||
<li><a href="#layoutmode">layoutMode</a></li>
|
||||
|
||||
<li><a href="#resizable">resizable</a></li>
|
||||
|
||||
<li><a href="#resizescontainer">resizesContainer</a></li>
|
||||
|
||||
<li><a href="#sortascending">sortAscending</a></li>
|
||||
|
||||
<li><a href="#sortby">sortBy</a></li>
|
||||
|
||||
<li><a href="#transformsenabled">transformsEnabled</a></li>
|
||||
|
||||
<li><a href="#visiblestyle">visibleStyle</a></li>
|
||||
|
||||
<li><a href="#layoutspecific_options">Layout-specific options</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/methods.html">Methods</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/animating.html">Animating</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/extending-isotope.html">Extending Isotope</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/hash-history-jquery-bbq.html">Hash history with jQuery BBQ</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/help.html">Help</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/license.html">License</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Demos</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../demos/basic.html">Basic</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-complete.html">Elements Complete</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-partial.html">Elements Partial</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/relayout.html">reLayout</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/infinite-scroll.html">Infinite Scroll</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/images.html">Images</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/combination-filters.html">Combination filters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/hash-history.html">Hash history</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/fluid-responsive.html">Fluid / responsive</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Custom layout modes</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/centered-masonry.html">Centered Masonry</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/category-rows.html">Category rows</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-corner-stamp.html">Masonry corner stamp</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-gutters.html">Masonry gutters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/spine-align.html">Spine align</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2><a href="../tests/index.html">Tests</a></h2>
|
||||
|
||||
</nav> <!-- #site-nav -->
|
||||
|
||||
<section id="content">
|
||||
|
||||
<h1>Options</h1>
|
||||
|
||||
|
||||
<dl class='header clearfix'>
|
||||
<dt><code>option</code></dt>
|
||||
<dd class='option-type'>Type</dd>
|
||||
<dd class='default'>Default</dd>
|
||||
</dl>
|
||||
<h2 id='animationengine'>animationEngine</h2>
|
||||
<dl class='clearfix'>
|
||||
<dt><code>animationEngine</code></dt>
|
||||
<dd class='option-type'>String</dd>
|
||||
<dd class='default'><code><span class='s1'>'best-available'</span></code></dd>
|
||||
</dl>
|
||||
<p>Determines the jQuery method to apply styles, <code>.css()</code> or <code>.animate()</code>. Useful for relying on CSS transitions to handle animation.</p>
|
||||
|
||||
<h3 id='animationEngine-values'>Values</h3>
|
||||
|
||||
<ul>
|
||||
<li><code>'best-available'</code>: if browser supports CSS transitions, Isotope uses <code>.css()</code>. If not, falls back to using <code>.animate()</code>.</li>
|
||||
|
||||
<li><code>'css'</code>: Isotope uses <code>.css()</code></li>
|
||||
|
||||
<li><code>'jquery'</code>: Isotope uses <code>.animate()</code></li>
|
||||
</ul>
|
||||
|
||||
<h2 id='animationoptions'>animationOptions</h2>
|
||||
<dl class='clearfix'>
|
||||
<dt><code>animationOptions</code></dt>
|
||||
<dd class='option-type'>Object</dd>
|
||||
<dd class='default'><code>{ queue: <span class='kc'>false</span>, duration: <span class='mi'>800</span> }</code></dd>
|
||||
</dl>
|
||||
<p>When jQuery is the animation engine (see above), these options will be used in <code>.animate()</code>. See the <a href='http://api.jquery.com/animate/#animate-properties-options'>jQuery API for animate options</a> for details.</p>
|
||||
|
||||
<h3 id='example'>Example</h3>
|
||||
<div class='highlight'><pre><code class='javascript'><span class='nx'>$</span><span class='p'>(</span><span class='s1'>'#container'</span><span class='p'>).</span><span class='nx'>isotope</span><span class='p'>({</span>
|
||||
<span class='nx'>animationOptions</span><span class='o'>:</span> <span class='p'>{</span>
|
||||
<span class='nx'>duration</span><span class='o'>:</span> <span class='mi'>750</span><span class='p'>,</span>
|
||||
<span class='nx'>easing</span><span class='o'>:</span> <span class='s1'>'linear'</span><span class='p'>,</span>
|
||||
<span class='nx'>queue</span><span class='o'>:</span> <span class='kc'>false</span>
|
||||
<span class='p'>}</span>
|
||||
<span class='p'>});</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<h2 id='containerclass'>containerClass</h2>
|
||||
<dl class='clearfix'>
|
||||
<dt><code>containerClass</code></dt>
|
||||
<dd class='option-type'>String</dd>
|
||||
<dd class='default'><code><span class='s1'>'isotope'</span></code></dd>
|
||||
</dl>
|
||||
<p>The class applied to the container element.</p>
|
||||
|
||||
<h2 id='filter'>filter</h2>
|
||||
<dl class='clearfix'>
|
||||
<dt><code>filter</code></dt>
|
||||
<dd class='option-type'>Selector</dd>
|
||||
</dl>
|
||||
<p>Setting a filter with show item elements that match the selector, and hide elements that do not match. See <a href='filtering.html'>docs on filering</a> for more details.</p>
|
||||
|
||||
<p><a href='../demos/filtering.html'><strong>See Demo: Filtering</strong></a></p>
|
||||
|
||||
<h3 id='filter-values'>Values</h3>
|
||||
<ul>
|
||||
<li><code><span class='s1'>'*'</span></code> or <code><span class='s1'>''</span></code> (an empty string): Shows all item elements</li>
|
||||
</ul>
|
||||
<h2 id='getsortdata'>getSortData</h2>
|
||||
<dl class='clearfix'>
|
||||
<dt><code>getSortData</code></dt>
|
||||
<dd class='option-type'>Object</dd>
|
||||
</dl>
|
||||
<p>An object containing one or several methods to retrieve data for Sorting. The methods receive one parameter (<code>$elem</code> in the example below) which is a jQuery object representing each item element. The methods need to return a value. See <a href='sorting.html'>docs on sorting</a> for more details.</p>
|
||||
|
||||
<p><a href='../demos/sorting.html'><strong>See Demo: Sorting</strong></a></p>
|
||||
|
||||
<h3 id='example'>Example</h3>
|
||||
<div class='highlight'><pre><code class='javascript'><span class='nx'>$</span><span class='p'>(</span><span class='s1'>'#container'</span><span class='p'>).</span><span class='nx'>isotope</span><span class='p'>({</span>
|
||||
<span class='nx'>getSortData</span> <span class='o'>:</span> <span class='p'>{</span>
|
||||
<span class='nx'>symbol</span> <span class='o'>:</span> <span class='kd'>function</span><span class='p'>(</span> <span class='nx'>$elem</span> <span class='p'>)</span> <span class='p'>{</span>
|
||||
<span class='k'>return</span> <span class='nx'>$elem</span><span class='p'>.</span><span class='nx'>attr</span><span class='p'>(</span><span class='s1'>'data-symbol'</span><span class='p'>);</span>
|
||||
<span class='p'>},</span>
|
||||
<span class='nx'>number</span> <span class='o'>:</span> <span class='kd'>function</span><span class='p'>(</span> <span class='nx'>$elem</span> <span class='p'>)</span> <span class='p'>{</span>
|
||||
<span class='k'>return</span> <span class='nb'>parseInt</span><span class='p'>(</span> <span class='nx'>$elem</span><span class='p'>.</span><span class='nx'>find</span><span class='p'>(</span><span class='s1'>'.number'</span><span class='p'>).</span><span class='nx'>text</span><span class='p'>(),</span> <span class='mi'>10</span> <span class='p'>);</span>
|
||||
<span class='p'>},</span>
|
||||
<span class='nx'>name</span> <span class='o'>:</span> <span class='kd'>function</span> <span class='p'>(</span> <span class='nx'>$elem</span> <span class='p'>)</span> <span class='p'>{</span>
|
||||
<span class='k'>return</span> <span class='nx'>$elem</span><span class='p'>.</span><span class='nx'>find</span><span class='p'>(</span><span class='s1'>'.name'</span><span class='p'>).</span><span class='nx'>text</span><span class='p'>();</span>
|
||||
<span class='p'>}</span>
|
||||
<span class='p'>}</span>
|
||||
<span class='p'>});</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<h2 id='hiddenclass'>hiddenClass</h2>
|
||||
<dl class='clearfix'>
|
||||
<dt><code>hiddenClass</code></dt>
|
||||
<dd class='option-type'>String</dd>
|
||||
<dd class='default'><code><span class='s1'>'isotope-hidden'</span></code></dd>
|
||||
</dl>
|
||||
<p>The class applied to item elements hidden by Filtering.</p>
|
||||
|
||||
<h2 id='hiddenstyle'>hiddenStyle</h2>
|
||||
<dl class='clearfix'>
|
||||
<dt><code>hiddenStyle</code></dt>
|
||||
<dd class='option-type'>Object</dd>
|
||||
<dd class='default'><code>{ opacity : <span class='mi'>0</span>, scale : <span class='mi'>0.001</span> }</code></dd>
|
||||
</dl>
|
||||
<p>The style applied to item elements hidden by Filtering.</p>
|
||||
|
||||
<h2 id='itemclass'>itemClass</h2>
|
||||
<dl class='clearfix'>
|
||||
<dt><code>itemClass</code></dt>
|
||||
<dd class='option-type'>String</dd>
|
||||
<dd class='default'><code><span class='s1'>'isotope-item'</span></code></dd>
|
||||
</dl>
|
||||
<p>The class applied to item elements.</p>
|
||||
|
||||
<h2 id='itempositiondataenabled'>itemPositionDataEnabled</h2>
|
||||
<dl class='clearfix'>
|
||||
<dt><code>itemPositionDataEnabled</code></dt>
|
||||
<dd class='option-type'>Boolean</dd>
|
||||
<dd class='default'><code><span class='kc'>false</span></code></dd>
|
||||
</dl>
|
||||
<p>When enabled, the position of item elements will exposed as data, which you can retrieve with jQuery’s data method with <code><span class='s1'>'isotope-item-position'</span></code> name space. Position is return as an object with <code>x</code> and <code>y</code>;</p>
|
||||
|
||||
<h3 id='example'>Example</h3>
|
||||
<div class='highlight'><pre><code class='javascript'><span class='nx'>$</span><span class='p'>(</span><span class='s1'>'#container'</span><span class='p'>).</span><span class='nx'>isotope</span><span class='p'>({</span>
|
||||
<span class='nx'>itemSelector</span><span class='o'>:</span> <span class='s1'>'.element'</span><span class='p'>,</span>
|
||||
<span class='nx'>itemPositionDataEnabled</span><span class='o'>:</span> <span class='kc'>true</span>
|
||||
<span class='p'>})</span>
|
||||
<span class='c1'>// log position of each item</span>
|
||||
<span class='p'>.</span><span class='nx'>find</span><span class='p'>(</span><span class='s1'>'.element'</span><span class='p'>).</span><span class='nx'>each</span><span class='p'>(</span><span class='kd'>function</span><span class='p'>(){</span>
|
||||
<span class='kd'>var</span> <span class='nx'>position</span> <span class='o'>=</span> <span class='nx'>$</span><span class='p'>(</span><span class='k'>this</span><span class='p'>).</span><span class='nx'>data</span><span class='p'>(</span><span class='s1'>'isotope-item-position'</span><span class='p'>);</span>
|
||||
<span class='nx'>console</span><span class='p'>.</span><span class='nx'>log</span><span class='p'>(</span><span class='s1'>'item position is x: '</span> <span class='o'>+</span> <span class='nx'>position</span><span class='p'>.</span><span class='nx'>x</span> <span class='o'>+</span> <span class='s1'>', y: '</span> <span class='o'>+</span> <span class='nx'>position</span><span class='p'>.</span><span class='nx'>y</span> <span class='p'>);</span>
|
||||
<span class='p'>});</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<h2 id='itemselector'>itemSelector</h2>
|
||||
<dl class='clearfix'>
|
||||
<dt><code>itemSelector</code></dt>
|
||||
<dd class='option-type'>Selector</dd>
|
||||
</dl>
|
||||
<p>Restricts Isotope item elements to selector.</p>
|
||||
|
||||
<h2 id='layoutmode'>layoutMode</h2>
|
||||
<dl class='clearfix'>
|
||||
<dt><code>layoutMode</code></dt>
|
||||
<dd class='option-type'>String</dd>
|
||||
<dd class='default'><code><span class='s1'>'masonry'</span></code></dd>
|
||||
</dl>
|
||||
<p>See also docs on <a href='layout-modes.html'>Layout modes</a>.</p>
|
||||
|
||||
<p><a href='../demos/layout-modes.html'><strong>See Demo: Layout modes</strong></a></p>
|
||||
|
||||
<h2 id='resizable'>resizable</h2>
|
||||
<dl class='clearfix'>
|
||||
<dt><code>resizable</code></dt>
|
||||
<dd class='option-type'>Boolean</dd>
|
||||
<dd class='default'><code><span class='kc'>true</span></code></dd>
|
||||
</dl>
|
||||
<p>Triggers layout logic when browser window is resized.</p>
|
||||
|
||||
<h2 id='resizescontainer'>resizesContainer</h2>
|
||||
<dl class='clearfix'>
|
||||
<dt><code>resizesContainer</code></dt>
|
||||
<dd class='option-type'>Boolean</dd>
|
||||
<dd class='default'><code><span class='kc'>true</span></code></dd>
|
||||
</dl>
|
||||
<p>Isotope will set the height (for vertical layout modes) or width (for horizontal layout modes) of the container after layout. If <code>resizesContainer</code> is set to <code><span class='kc'>false</span></code>, be sure to set a size for the container in your CSS, so it doesn’t collapse when Isotope is triggered.</p>
|
||||
|
||||
<h2 id='sortascending'>sortAscending</h2>
|
||||
<dl class='clearfix'>
|
||||
<dt><code>sortAscending</code></dt>
|
||||
<dd class='option-type'>Boolean</dd>
|
||||
<dd class='default'><code><span class='kc'>true</span></code></dd>
|
||||
</dl>
|
||||
<p>Used with sorting. If true, items are sorted ascending: “1, 2, 3” or “A, B, C…”. If false, items are sorted descending “Z, Y, X” or “9, 8, 7…”. See <a href='sorting.html'>docs on sorting</a> for more details.</p>
|
||||
|
||||
<p><a href='../demos/sorting.html'><strong>See Demo: Sorting</strong></a></p>
|
||||
|
||||
<h2 id='sortby'>sortBy</h2>
|
||||
<dl class='clearfix'>
|
||||
<dt><code>sortBy</code></dt>
|
||||
<dd class='option-type'>String</dd>
|
||||
</dl>
|
||||
<p>The property name of the method within the <code>getSortData</code> option to sort item elements. See <a href='sorting.html'>docs on sorting</a> for more details.</p>
|
||||
|
||||
<p><a href='../demos/sorting.html'><strong>See Demo: Sorting</strong></a></p>
|
||||
|
||||
<h3 id='sortBy-values'>Values</h3>
|
||||
|
||||
<ul>
|
||||
<li><code>'original-order'</code> Sorts item elements by their original order.</li>
|
||||
</ul>
|
||||
|
||||
<h2 id='transformsenabled'>transformsEnabled</h2>
|
||||
<dl class='clearfix'>
|
||||
<dt><code>transformsEnabled</code></dt>
|
||||
<dd class='option-type'>Boolean</dd>
|
||||
<dd class='default'><code><span class='kc'>true</span></code></dd>
|
||||
</dl>
|
||||
<p>Isotope uses CSS3 transform to position item elements, when available in the browser. Setting <code>transformsEnabled</code> to <code><span class='kc'>false</span></code> will disable this feature so all browsers use top/left absolute positioning. Useful for <a href='help.html#flash'>resolving issues with Flash content</a>.</p>
|
||||
|
||||
<h3 id='transformsEnabled-css'>Additional CSS</h3>
|
||||
|
||||
<p>If you do disable transforms, but still want to use <a href='animating.html#css_transitions'>CSS transitions</a>, you’ll need add the following CSS:</p>
|
||||
<div class='highlight'><pre><code class='css'><span class='nc'>.isotope</span> <span class='nc'>.isotope-item</span> <span class='p'>{</span>
|
||||
<span class='o'>-</span><span class='n'>webkit</span><span class='o'>-</span><span class='n'>transition</span><span class='o'>-</span><span class='n'>property</span><span class='o'>:</span> <span class='k'>top</span><span class='o'>,</span> <span class='k'>left</span><span class='o'>,</span> <span class='k'>opacity</span><span class='p'>;</span>
|
||||
<span class='o'>-</span><span class='n'>moz</span><span class='o'>-</span><span class='n'>transition</span><span class='o'>-</span><span class='n'>property</span><span class='o'>:</span> <span class='k'>top</span><span class='o'>,</span> <span class='k'>left</span><span class='o'>,</span> <span class='k'>opacity</span><span class='p'>;</span>
|
||||
<span class='n'>transition</span><span class='o'>-</span><span class='n'>property</span><span class='o'>:</span> <span class='k'>top</span><span class='o'>,</span> <span class='k'>left</span><span class='o'>,</span> <span class='k'>opacity</span><span class='p'>;</span>
|
||||
<span class='p'>}</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<h3 id='disabling_hidden_and_visible_scale_styles'>Disabling hidden and visible scale styles</h3>
|
||||
|
||||
<p>If you are using filtering, it’s also a good idea to disable the scale transform with the <a href='#hiddenstyle'><code>hiddenStyle</code> option</a> and <a href='#visiblestyle'><code>visibleStyle</code> option</a>.</p>
|
||||
<div class='highlight'><pre><code class='javascript'><span class='nx'>$</span><span class='p'>(</span><span class='s1'>'#container'</span><span class='p'>).</span><span class='nx'>isotope</span><span class='p'>({</span>
|
||||
<span class='nx'>transformsEnabled</span><span class='o'>:</span> <span class='kc'>false</span><span class='p'>,</span>
|
||||
<span class='nx'>visibleStyle</span><span class='o'>:</span> <span class='p'>{</span> <span class='nx'>opacity</span><span class='o'>:</span> <span class='mi'>1</span> <span class='p'>},</span>
|
||||
<span class='nx'>hiddenStyle</span><span class='o'>:</span> <span class='p'>{</span> <span class='nx'>opacity</span><span class='o'>:</span> <span class='mi'>0</span> <span class='p'>}</span>
|
||||
<span class='p'>});</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<h2 id='visiblestyle'>visibleStyle</h2>
|
||||
<dl class='clearfix'>
|
||||
<dt><code>visibleStyle</code></dt>
|
||||
<dd class='option-type'>Object</dd>
|
||||
<dd class='default'><code>{ opacity : <span class='mi'>1</span>, scale : <span class='mi'>1</span> }</code></dd>
|
||||
</dl>
|
||||
<p>The style applied to item elements made visible by Filtering.</p>
|
||||
|
||||
<h2 id='layoutspecific_options'>Layout-specific options</h2>
|
||||
|
||||
<p>In addition the general options listed above, certain layout modes each have their own options. In order to avoid conflict, these options are set with an option that matches the name of the layout mode.</p>
|
||||
|
||||
<p>See docs on <a href='layout-modes.html'>layout modes</a> for each layout mode’s available options.</p>
|
||||
|
||||
<p>For example, if your layout switched from <code>masonry</code> to <code>cellsByRow</code>:</p>
|
||||
<div class='highlight'><pre><code class='javascript'><span class='nx'>$</span><span class='p'>(</span><span class='s1'>'#container'</span><span class='p'>).</span><span class='nx'>isotope</span><span class='p'>({</span>
|
||||
<span class='nx'>masonry</span><span class='o'>:</span> <span class='p'>{</span>
|
||||
<span class='nx'>columnWidth</span><span class='o'>:</span> <span class='mi'>120</span>
|
||||
<span class='p'>},</span>
|
||||
<span class='nx'>cellsByRow</span><span class='o'>:</span> <span class='p'>{</span>
|
||||
<span class='nx'>columnWidth</span><span class='o'>:</span> <span class='mi'>220</span><span class='p'>,</span>
|
||||
<span class='nx'>rowHeight</span><span class='o'>:</span> <span class='mi'>220</span>
|
||||
<span class='p'>}</span>
|
||||
<span class='p'>});</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<p><a href='../demos/layout-modes.html'><strong>See Demo: Layout modes</strong></a></p>
|
||||
|
||||
<footer>
|
||||
Isotope by <a href="http://desandro.com">David DeSandro</a> / <a href="http://metafizzy.co">Metafizzy</a>
|
||||
</footer>
|
||||
|
||||
</section> <!-- #content -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
311
sites/all/libraries/isotope-site/docs/sorting.html
Normal file
311
sites/all/libraries/isotope-site/docs/sorting.html
Normal file
@@ -0,0 +1,311 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<title>Sorting · Isotope Docs</title>
|
||||
|
||||
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
|
||||
<!-- scripts at bottom of page -->
|
||||
|
||||
</head>
|
||||
<body class="docs ">
|
||||
|
||||
<nav id="site-nav">
|
||||
<h1><a href="../index.html">Isotope</a></h1>
|
||||
|
||||
<h2>Docs</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../docs/introduction.html">Introduction</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/options.html">Options</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/methods.html">Methods</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li class="current"><a href="#content">Sorting</a>
|
||||
<ul class="toc">
|
||||
|
||||
<li><a href="#markup">Markup</a></li>
|
||||
|
||||
<li><a href="#getsortdata_option">getSortData option</a></li>
|
||||
|
||||
<li><a href="#sortby_option">sortBy option</a></li>
|
||||
|
||||
<li><a href="#sortascending_option">sortAscending option</a></li>
|
||||
|
||||
<li><a href="#creating_interactive_buttons">Creating interactive buttons</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/animating.html">Animating</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/extending-isotope.html">Extending Isotope</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/hash-history-jquery-bbq.html">Hash history with jQuery BBQ</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/help.html">Help</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/license.html">License</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Demos</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../demos/basic.html">Basic</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-complete.html">Elements Complete</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-partial.html">Elements Partial</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/relayout.html">reLayout</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/infinite-scroll.html">Infinite Scroll</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/images.html">Images</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/combination-filters.html">Combination filters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/hash-history.html">Hash history</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/fluid-responsive.html">Fluid / responsive</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Custom layout modes</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/centered-masonry.html">Centered Masonry</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/category-rows.html">Category rows</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-corner-stamp.html">Masonry corner stamp</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-gutters.html">Masonry gutters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/spine-align.html">Spine align</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2><a href="../tests/index.html">Tests</a></h2>
|
||||
|
||||
</nav> <!-- #site-nav -->
|
||||
|
||||
<section id="content">
|
||||
|
||||
<h1>Sorting</h1>
|
||||
|
||||
|
||||
<p>Collect data from item element and rearrange their order in the layout with sorting.</p>
|
||||
|
||||
<p><a href='../demos/sorting.html'><strong>See Demo: Sorting</strong></a></p>
|
||||
|
||||
<h2 id='markup'>Markup</h2>
|
||||
|
||||
<p>Any group of similar items have their own data. It could be a text value, like a title or tag, or a numerical value, like a measurement or grade. For our example, each item element has several data points that can be used for sorting. There’s the elemental symbol, number, name of the element, weight, and category.</p>
|
||||
<div class='highlight'><pre><code class='html'><span class='nt'><div</span> <span class='na'>id=</span><span class='s'>"container"</span><span class='nt'>></span>
|
||||
<span class='nt'><div</span> <span class='na'>class=</span><span class='s'>"element transition metal"</span> <span class='na'>data-category=</span><span class='s'>"transition"</span><span class='nt'>></span>
|
||||
<span class='nt'><p</span> <span class='na'>class=</span><span class='s'>"number"</span><span class='nt'>></span>79<span class='nt'></p></span>
|
||||
<span class='nt'><h3</span> <span class='na'>class=</span><span class='s'>"symbol"</span><span class='nt'>></span>Au<span class='nt'></h3></span>
|
||||
<span class='nt'><h2</span> <span class='na'>class=</span><span class='s'>"name"</span><span class='nt'>></span>Gold<span class='nt'></h2></span>
|
||||
<span class='nt'><p</span> <span class='na'>class=</span><span class='s'>"weight"</span><span class='nt'>></span>196.966569<span class='nt'></p></span>
|
||||
<span class='nt'></div></span>
|
||||
|
||||
<span class='nt'><div</span> <span class='na'>class=</span><span class='s'>"element metalloid"</span> <span class='na'>data-category=</span><span class='s'>"metalloid"</span><span class='nt'>></span>
|
||||
<span class='nt'><p</span> <span class='na'>class=</span><span class='s'>"number"</span><span class='nt'>></span>51<span class='nt'></p></span>
|
||||
<span class='nt'><h3</span> <span class='na'>class=</span><span class='s'>"symbol"</span><span class='nt'>></span>Sb<span class='nt'></h3></span>
|
||||
<span class='nt'><h2</span> <span class='na'>class=</span><span class='s'>"name"</span><span class='nt'>></span>Antimony<span class='nt'></h2></span>
|
||||
<span class='nt'><p</span> <span class='na'>class=</span><span class='s'>"weight"</span><span class='nt'>></span>121.76<span class='nt'></p></span>
|
||||
<span class='nt'></div></span>
|
||||
<span class='nt'></div></span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<h2 id='getsortdata_option'>getSortData option</h2>
|
||||
|
||||
<p>In order to extract this data from the element, we need to pass in a function to get it via the <a href='options.html#getsortdata'><code>getSortData</code></a> option. This option accepts an object, whose values are the functions to extract the data.</p>
|
||||
|
||||
<p>Each function receives one argument, which represents a jQuery object for each item element. With that argument, the function needs to return the data point.</p>
|
||||
|
||||
<p>In the example above, to get element name, we would need to get the text from the <code>.name</code> element. The same works for symbol.</p>
|
||||
<div class='highlight'><pre><code class='javascript'><span class='nx'>$</span><span class='p'>(</span><span class='s1'>'#container'</span><span class='p'>).</span><span class='nx'>isotope</span><span class='p'>({</span>
|
||||
<span class='nx'>getSortData</span> <span class='o'>:</span> <span class='p'>{</span>
|
||||
<span class='nx'>name</span> <span class='o'>:</span> <span class='kd'>function</span> <span class='p'>(</span> <span class='nx'>$elem</span> <span class='p'>)</span> <span class='p'>{</span>
|
||||
<span class='k'>return</span> <span class='nx'>$elem</span><span class='p'>.</span><span class='nx'>find</span><span class='p'>(</span><span class='s1'>'.name'</span><span class='p'>).</span><span class='nx'>text</span><span class='p'>();</span>
|
||||
<span class='p'>},</span>
|
||||
<span class='nx'>symbol</span> <span class='o'>:</span> <span class='kd'>function</span> <span class='p'>(</span> <span class='nx'>$elem</span> <span class='p'>)</span> <span class='p'>{</span>
|
||||
<span class='k'>return</span> <span class='nx'>$elem</span><span class='p'>.</span><span class='nx'>find</span><span class='p'>(</span><span class='s1'>'.symbol'</span><span class='p'>).</span><span class='nx'>text</span><span class='p'>();</span>
|
||||
<span class='p'>}</span>
|
||||
<span class='p'>}</span>
|
||||
<span class='p'>});</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<p>For numerical data, we can convert a text value into a number with <code>parseInt()</code> or <code>parseFloat()</code>.</p>
|
||||
<div class='highlight'><pre><code class='javascript'><span class='nx'>getSortData</span> <span class='o'>:</span> <span class='p'>{</span>
|
||||
<span class='c1'>// ...</span>
|
||||
<span class='nx'>number</span> <span class='o'>:</span> <span class='kd'>function</span> <span class='p'>(</span> <span class='nx'>$elem</span> <span class='p'>)</span> <span class='p'>{</span>
|
||||
<span class='k'>return</span> <span class='nb'>parseInt</span><span class='p'>(</span> <span class='nx'>$elem</span><span class='p'>.</span><span class='nx'>find</span><span class='p'>(</span><span class='s1'>'.name'</span><span class='p'>).</span><span class='nx'>text</span><span class='p'>(),</span> <span class='mi'>10</span> <span class='p'>);</span>
|
||||
<span class='p'>},</span>
|
||||
<span class='nx'>weight</span> <span class='o'>:</span> <span class='kd'>function</span> <span class='p'>(</span> <span class='nx'>$elem</span> <span class='p'>)</span> <span class='p'>{</span>
|
||||
<span class='k'>return</span> <span class='nb'>parseFloat</span><span class='p'>(</span> <span class='nx'>$elem</span><span class='p'>.</span><span class='nx'>find</span><span class='p'>(</span><span class='s1'>'.weight'</span><span class='p'>).</span><span class='nx'>text</span><span class='p'>()</span> <span class='p'>);</span>
|
||||
<span class='p'>}</span>
|
||||
<span class='p'>}</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<p>The data extracted can be anything accessible in the item element via jQuery. To extract the category data held within the <code>data-category</code> attribute, we can use the <code>.attr()</code>.</p>
|
||||
<div class='highlight'><pre><code class='javascript'><span class='nx'>getSortData</span> <span class='o'>:</span> <span class='p'>{</span>
|
||||
<span class='c1'>// ...</span>
|
||||
<span class='nx'>category</span> <span class='o'>:</span> <span class='kd'>function</span> <span class='p'>(</span> <span class='nx'>$elem</span> <span class='p'>)</span> <span class='p'>{</span>
|
||||
<span class='k'>return</span> <span class='nx'>$elem</span><span class='p'>.</span><span class='nx'>attr</span><span class='p'>(</span><span class='s1'>'data-category'</span><span class='p'>);</span>
|
||||
<span class='p'>}</span>
|
||||
<span class='p'>}</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<p>Get creative! You could sort a list by the width of each item element.</p>
|
||||
<div class='highlight'><pre><code class='javascript'><span class='nx'>getSortData</span> <span class='o'>:</span> <span class='p'>{</span>
|
||||
<span class='c1'>// ...</span>
|
||||
<span class='nx'>width</span> <span class='o'>:</span> <span class='kd'>function</span><span class='p'>(</span> <span class='nx'>$elem</span> <span class='p'>)</span> <span class='p'>{</span>
|
||||
<span class='k'>return</span> <span class='nx'>$elem</span><span class='p'>.</span><span class='nx'>width</span><span class='p'>();</span>
|
||||
<span class='p'>}</span>
|
||||
<span class='p'>}</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<h2 id='sortby_option'>sortBy option</h2>
|
||||
|
||||
<p>For every method set in <code>getSortData</code>, Isotope uses that method to build the data for sorting. The data cache is built on initialization so it can be quickly accessed when sorting. With the methods above, we have built data for an item elements name, symbol, number, weight and category.</p>
|
||||
|
||||
<p>Sorting elements is done with the <a href='options.html#sortby'><code>sortBy</code> option</a>. The value needs to match the property name used in the <code>getSortData</code> object.</p>
|
||||
|
||||
<p>With our example, we can use <code>'name'</code>, <code>'symbol'</code>, <code>'number'</code>, <code>'weight'</code> and <code>'category'</code>.</p>
|
||||
<div class='highlight'><pre><code class='javascript'><span class='nx'>$</span><span class='p'>(</span><span class='s1'>'#container'</span><span class='p'>).</span><span class='nx'>isotope</span><span class='p'>({</span> <span class='nx'>sortBy</span> <span class='o'>:</span> <span class='s1'>'symbol'</span> <span class='p'>});</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<p>There are two additional sorting data methods built in to Isotope.</p>
|
||||
|
||||
<ul>
|
||||
<li><code>'original-order'</code> will use the original order of the item elements to arrange them in the layout.</li>
|
||||
|
||||
<li><code>'random'</code> is a random order.</li>
|
||||
</ul>
|
||||
|
||||
<h2 id='sortascending_option'>sortAscending option</h2>
|
||||
|
||||
<p>By default, Isotope sorts data in ascension. If our data for name is “Gold, Antimony, Lead, Iron, Silver”, when sorted by name, the elements will be ordered ABC.. : “Antimony, Gold, Iron, Lead, Silver.” To reverse the order and sort data in descension, set <a href='options.html#sortascending'><code>sortAscending</code></a> to <code><span class='kc'>false</span></code>.</p>
|
||||
<div class='highlight'><pre><code class='javascript'><span class='nx'>$</span><span class='p'>(</span><span class='s1'>'#container'</span><span class='p'>).</span><span class='nx'>isotope</span><span class='p'>({</span>
|
||||
<span class='nx'>sortBy</span> <span class='o'>:</span> <span class='s1'>'name'</span><span class='p'>,</span>
|
||||
<span class='nx'>sortAscending</span> <span class='o'>:</span> <span class='kc'>false</span>
|
||||
<span class='p'>});</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<h2 id='creating_interactive_buttons'>Creating interactive buttons</h2>
|
||||
|
||||
<p>We can use a simple list for our buttons.</p>
|
||||
<div class='highlight'><pre><code class='html'><span class='nt'><ul</span> <span class='na'>id=</span><span class='s'>"sort-by"</span><span class='nt'>></span>
|
||||
<span class='nt'><li><a</span> <span class='na'>href=</span><span class='s'>"#name"</span><span class='nt'>></span>name<span class='nt'></a></li></span>
|
||||
<span class='nt'><li><a</span> <span class='na'>href=</span><span class='s'>"#symbol"</span><span class='nt'>></span>symbol<span class='nt'></a></li></span>
|
||||
<span class='nt'><li><a</span> <span class='na'>href=</span><span class='s'>"#number"</span><span class='nt'>></span>number<span class='nt'></a></li></span>
|
||||
<span class='nt'><li><a</span> <span class='na'>href=</span><span class='s'>"#weight"</span><span class='nt'>></span>weight<span class='nt'></a></li></span>
|
||||
<span class='nt'><li><a</span> <span class='na'>href=</span><span class='s'>"#category"</span><span class='nt'>></span>category<span class='nt'></a></li></span>
|
||||
<span class='nt'></ul></span>
|
||||
</code></pre>
|
||||
</div>
|
||||
<p>When one of these links is clicked, we can use the <code>href</code> attribute as the value for <code>sortBy</code> in the Isotope script.</p>
|
||||
<div class='highlight'><pre><code class='javascript'><span class='nx'>$</span><span class='p'>(</span><span class='s1'>'#sort-by a'</span><span class='p'>).</span><span class='nx'>click</span><span class='p'>(</span><span class='kd'>function</span><span class='p'>(){</span>
|
||||
<span class='c1'>// get href attribute, minus the '#'</span>
|
||||
<span class='kd'>var</span> <span class='nx'>sortName</span> <span class='o'>=</span> <span class='nx'>$</span><span class='p'>(</span><span class='k'>this</span><span class='p'>).</span><span class='nx'>attr</span><span class='p'>(</span><span class='s1'>'href'</span><span class='p'>).</span><span class='nx'>slice</span><span class='p'>(</span><span class='mi'>1</span><span class='p'>);</span>
|
||||
<span class='nx'>$</span><span class='p'>(</span><span class='s1'>'#container'</span><span class='p'>).</span><span class='nx'>isotope</span><span class='p'>({</span> <span class='nx'>sortBy</span> <span class='o'>:</span> <span class='nx'>sortName</span> <span class='p'>});</span>
|
||||
<span class='k'>return</span> <span class='kc'>false</span><span class='p'>;</span>
|
||||
<span class='p'>});</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
Isotope by <a href="http://desandro.com">David DeSandro</a> / <a href="http://metafizzy.co">Metafizzy</a>
|
||||
</footer>
|
||||
|
||||
</section> <!-- #content -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
661
sites/all/libraries/isotope-site/index.html
Normal file
661
sites/all/libraries/isotope-site/index.html
Normal file
@@ -0,0 +1,661 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<title>Isotope</title>
|
||||
|
||||
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
|
||||
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
|
||||
<!-- scripts at bottom of page -->
|
||||
|
||||
</head>
|
||||
<body class="homepage ">
|
||||
|
||||
<nav id="site-nav">
|
||||
<h1><a href="index.html">Isotope</a></h1>
|
||||
|
||||
<h2>Docs</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="./docs/introduction.html">Introduction</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="./docs/options.html">Options</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="./docs/methods.html">Methods</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="./docs/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="./docs/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="./docs/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="./docs/animating.html">Animating</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="./docs/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="./docs/extending-isotope.html">Extending Isotope</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="./docs/hash-history-jquery-bbq.html">Hash history with jQuery BBQ</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="./docs/help.html">Help</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="./docs/license.html">License</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Demos</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="./demos/basic.html">Basic</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="./demos/elements-complete.html">Elements Complete</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="./demos/elements-partial.html">Elements Partial</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="./demos/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="./demos/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="./demos/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="./demos/relayout.html">reLayout</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="./demos/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="./demos/infinite-scroll.html">Infinite Scroll</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="./demos/images.html">Images</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="./demos/combination-filters.html">Combination filters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="./demos/hash-history.html">Hash history</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="./demos/fluid-responsive.html">Fluid / responsive</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Custom layout modes</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="./custom-layout-modes/centered-masonry.html">Centered Masonry</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="./custom-layout-modes/category-rows.html">Category rows</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="./custom-layout-modes/masonry-corner-stamp.html">Masonry corner stamp</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="./custom-layout-modes/masonry-gutters.html">Masonry gutters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="./custom-layout-modes/spine-align.html">Spine align</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2><a href="tests/index.html">Tests</a></h2>
|
||||
|
||||
</nav> <!-- #site-nav -->
|
||||
|
||||
<section id="content">
|
||||
|
||||
|
||||
<section id="options" class="clearfix">
|
||||
<div class="option-combo">
|
||||
<h2>Filter:</h2>
|
||||
<ul id="filter" class="option-set clearfix" data-option-key="filter">
|
||||
<li><a href="#show-all" data-option-value="*" class="selected">show all</a></li>
|
||||
<li><a href="#elements" data-option-value=".element:not(.feature)">elements</a></li>
|
||||
<li><a href="#features" data-option-value=".feature">features</a></li>
|
||||
<li><a href="#examples" data-option-value=".example">examples</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="option-combo">
|
||||
<h2>Sort:</h2>
|
||||
<ul id="sort" class="option-set clearfix" data-option-key="sortBy">
|
||||
<li><a href="#mixed" data-option-value="number" class="selected">mixed</a></li>
|
||||
<li><a href="#original" data-option-value="original-order">original</a></li>
|
||||
<li><a href="#alphabetical" data-option-value="alphabetical">alphabetical</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="option-combo">
|
||||
<h2>Layout: </h2>
|
||||
<ul id="layouts" class="option-set clearfix" data-option-key="layoutMode">
|
||||
<li><a href="#masonry" data-option-value="masonry" class="selected">masonry</a></li>
|
||||
<li><a href="#fitRows" data-option-value="fitRows">fitRows</a></li>
|
||||
<li><a href="#straightDown" data-option-value="straightDown">straightDown</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div id="container" class="super-list variable-sizes clearfix">
|
||||
|
||||
|
||||
|
||||
<div class="element alkaline-earth metal " data-symbol="Mg" data-category="alkaline-earth">
|
||||
<p class="number">12</p>
|
||||
<h3 class="symbol">Mg</h3>
|
||||
<h2 class="name">Magnesium</h2>
|
||||
<p class="weight">24.305</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element actinoid metal inner-transition " data-symbol="U" data-category="actinoid">
|
||||
<p class="number">92</p>
|
||||
<h3 class="symbol">U</h3>
|
||||
<h2 class="name">Uranium</h2>
|
||||
<p class="weight">238.02891</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element lanthanoid metal inner-transition " data-symbol="Gd" data-category="lanthanoid">
|
||||
<p class="number">64</p>
|
||||
<h3 class="symbol">Gd</h3>
|
||||
<h2 class="name">Gadolinium</h2>
|
||||
<p class="weight">157.25</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Y" data-category="transition">
|
||||
<p class="number">39</p>
|
||||
<h3 class="symbol">Y</h3>
|
||||
<h2 class="name">Yttrium</h2>
|
||||
<p class="weight">88.90585</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element metalloid " data-symbol="B" data-category="metalloid">
|
||||
<p class="number">5</p>
|
||||
<h3 class="symbol">B</h3>
|
||||
<h2 class="name">Boron</h2>
|
||||
<p class="weight">10.811</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Fe" data-category="transition">
|
||||
<p class="number">26</p>
|
||||
<h3 class="symbol">Fe</h3>
|
||||
<h2 class="name">Iron</h2>
|
||||
<p class="weight">55.845</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element actinoid metal inner-transition " data-symbol="Am" data-category="actinoid">
|
||||
<p class="number">95</p>
|
||||
<h3 class="symbol">Am</h3>
|
||||
<h2 class="name">Americium</h2>
|
||||
<p class="weight">(243)</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Zn" data-category="transition">
|
||||
<p class="number">30</p>
|
||||
<h3 class="symbol">Zn</h3>
|
||||
<h2 class="name">Zinc</h2>
|
||||
<p class="weight">65.38</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element lanthanoid metal inner-transition " data-symbol="Pm" data-category="lanthanoid">
|
||||
<p class="number">61</p>
|
||||
<h3 class="symbol">Pm</h3>
|
||||
<h2 class="name">Promethium</h2>
|
||||
<p class="weight">(145)</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element post-transition metal " data-symbol="In" data-category="post-transition">
|
||||
<p class="number">49</p>
|
||||
<h3 class="symbol">In</h3>
|
||||
<h2 class="name">Indium</h2>
|
||||
<p class="weight">114.818</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element metalloid " data-symbol="As" data-category="metalloid">
|
||||
<p class="number">33</p>
|
||||
<h3 class="symbol">As</h3>
|
||||
<h2 class="name">Arsenic</h2>
|
||||
<p class="weight">74.9216</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element lanthanoid metal inner-transition " data-symbol="Er" data-category="lanthanoid">
|
||||
<p class="number">68</p>
|
||||
<h3 class="symbol">Er</h3>
|
||||
<h2 class="name">Erbium</h2>
|
||||
<p class="weight">167.259</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="Se" data-category="other">
|
||||
<p class="number">34</p>
|
||||
<h3 class="symbol">Se</h3>
|
||||
<h2 class="name">Selenium</h2>
|
||||
<p class="weight">78.96</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element alkaline-earth metal " data-symbol="Sr" data-category="alkaline-earth">
|
||||
<p class="number">38</p>
|
||||
<h3 class="symbol">Sr</h3>
|
||||
<h2 class="name">Strontium</h2>
|
||||
<p class="weight">87.62</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Zr" data-category="transition">
|
||||
<p class="number">40</p>
|
||||
<h3 class="symbol">Zr</h3>
|
||||
<h2 class="name">Zirconium</h2>
|
||||
<p class="weight">91.224</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element halogen nonmetal " data-symbol="At" data-category="halogen">
|
||||
<p class="number">85</p>
|
||||
<h3 class="symbol">At</h3>
|
||||
<h2 class="name">Astatine</h2>
|
||||
<p class="weight">(210)</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Nb" data-category="transition">
|
||||
<p class="number">41</p>
|
||||
<h3 class="symbol">Nb</h3>
|
||||
<h2 class="name">Niobium</h2>
|
||||
<p class="weight">92.90638</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="O" data-category="other">
|
||||
<p class="number">8</p>
|
||||
<h3 class="symbol">O</h3>
|
||||
<h2 class="name">Oxygen</h2>
|
||||
<p class="weight">15.9994</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element actinoid metal inner-transition " data-symbol="Bk" data-category="actinoid">
|
||||
<p class="number">97</p>
|
||||
<h3 class="symbol">Bk</h3>
|
||||
<h2 class="name">Berkelium</h2>
|
||||
<p class="weight">(247)</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element halogen nonmetal " data-symbol="F" data-category="halogen">
|
||||
<p class="number">9</p>
|
||||
<h3 class="symbol">F</h3>
|
||||
<h2 class="name">Fluorine</h2>
|
||||
<p class="weight">18.9984032</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element actinoid metal inner-transition " data-symbol="Cf" data-category="actinoid">
|
||||
<p class="number">98</p>
|
||||
<h3 class="symbol">Cf</h3>
|
||||
<h2 class="name">Californium</h2>
|
||||
<p class="weight">(251)</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element noble-gas nonmetal " data-symbol="Ne" data-category="noble-gas">
|
||||
<p class="number">10</p>
|
||||
<h3 class="symbol">Ne</h3>
|
||||
<h2 class="name">Neon</h2>
|
||||
<p class="weight">20.1797</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="P" data-category="other">
|
||||
<p class="number">15</p>
|
||||
<h3 class="symbol">P</h3>
|
||||
<h2 class="name">Phosphorus</h2>
|
||||
<p class="weight">30.973762</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element actinoid metal inner-transition " data-symbol="Fm" data-category="actinoid">
|
||||
<p class="number">100</p>
|
||||
<h3 class="symbol">Fm</h3>
|
||||
<h2 class="name">Fermium</h2>
|
||||
<p class="weight">(257)</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="S" data-category="other">
|
||||
<p class="number">16</p>
|
||||
<h3 class="symbol">S</h3>
|
||||
<h2 class="name">Sulfur</h2>
|
||||
<p class="weight">32.065</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element alkaline-earth metal " data-symbol="Ca" data-category="alkaline-earth">
|
||||
<p class="number">20</p>
|
||||
<h3 class="symbol">Ca</h3>
|
||||
<h2 class="name">Calcium</h2>
|
||||
<p class="weight">40.078</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="C" data-category="other">
|
||||
<p class="number">6</p>
|
||||
<h3 class="symbol">C</h3>
|
||||
<h2 class="name">Carbon</h2>
|
||||
<p class="weight">12.0107</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element alkali metal " data-symbol="Rb" data-category="alkali">
|
||||
<p class="number">37</p>
|
||||
<h3 class="symbol">Rb</h3>
|
||||
<h2 class="name">Rubidium</h2>
|
||||
<p class="weight">85.4678</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element post-transition metal " data-symbol="Uup" data-category="post-transition">
|
||||
<p class="number">115</p>
|
||||
<h3 class="symbol">Uup</h3>
|
||||
<h2 class="name">Ununpentium</h2>
|
||||
<p class="weight">(288)</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Sc" data-category="transition">
|
||||
<p class="number">21</p>
|
||||
<h3 class="symbol">Sc</h3>
|
||||
<h2 class="name">Scandium</h2>
|
||||
<p class="weight">44.955912</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element feature alkali width2 height2">
|
||||
<p class="number">1</p>
|
||||
<h3 class="symbol">Iso</h3>
|
||||
<h2 class="name">An exquisite jQuery plugin for magical layouts</h2>
|
||||
</div>
|
||||
|
||||
<div class="element feature actinoid width2 height2">
|
||||
<p class="number">31</p>
|
||||
<h3 class="symbol">Dyn</h3>
|
||||
<h2 class="name">Dynamic, intelligent layouts</h2>
|
||||
</div>
|
||||
|
||||
<div class="element feature lanthanoid width2 height2">
|
||||
<p class="number">27</p>
|
||||
<h3 class="symbol">Srt</h3>
|
||||
<h2 class="name">Re–order items with sorting</h2>
|
||||
</div>
|
||||
|
||||
<div class="element feature metalloid width2 height2">
|
||||
<p class="number">61</p>
|
||||
<h3 class="symbol">Pow</h3>
|
||||
<h2 class="name">Powerful methods, simple syntax</h2>
|
||||
</div>
|
||||
|
||||
<div class="element feature alkaline-earth width2 height2">
|
||||
<p class="number">11</p>
|
||||
<h3 class="symbol">Flt</h3>
|
||||
<h2 class="name">Reveal & hide items with filtering</h2>
|
||||
</div>
|
||||
|
||||
<div class="element feature transition width2 height2">
|
||||
<p class="number">41</p>
|
||||
<h3 class="symbol">Ani</h3>
|
||||
<h2 class="name">Captivating animations</h2>
|
||||
</div>
|
||||
|
||||
<div class="element feature halogen width2 height2">
|
||||
<p class="number">71</p>
|
||||
<h3 class="symbol">Pro</h3>
|
||||
<h2 class="name">Progressively enhanced for CSS3 transforms & transitions</h2>
|
||||
</div>
|
||||
|
||||
<div class="element feature post-transition width2 height2">
|
||||
<p class="number">51</p>
|
||||
<h3 class="symbol">Any</h3>
|
||||
<h2 class="name">Sort items by just about anything</h2>
|
||||
</div>
|
||||
|
||||
<div class="link" data-number="5"><a href="jquery.isotope.min.js">Down​load jquery​.isotope​.min.js</a></div>
|
||||
<div class="link" data-number="13"><a href="http://meta.metafizzy.co/files/isotope-site.zip">Down​load this project</a></div>
|
||||
<div class="link away" data-number="35"><a href="http://github.com/desandro/isotope">Isotope on GitHub</a></div>
|
||||
</div>
|
||||
|
||||
<div id="sites"></div>
|
||||
|
||||
|
||||
<script src="js/jquery-1.6.4.min.js"></script>
|
||||
<script src="jquery.isotope.min.js"></script>
|
||||
<script>
|
||||
$(function(){
|
||||
|
||||
var $container = $('#container');
|
||||
|
||||
$container.isotope({
|
||||
masonry: {
|
||||
columnWidth: 120
|
||||
},
|
||||
sortBy: 'number',
|
||||
getSortData: {
|
||||
number: function( $elem ) {
|
||||
var number = $elem.hasClass('element') ?
|
||||
$elem.find('.number').text() :
|
||||
$elem.attr('data-number');
|
||||
return parseInt( number, 10 );
|
||||
},
|
||||
alphabetical: function( $elem ) {
|
||||
var name = $elem.find('.name'),
|
||||
itemText = name.length ? name : $elem;
|
||||
return itemText.text();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
var $optionSets = $('#options .option-set'),
|
||||
$optionLinks = $optionSets.find('a');
|
||||
|
||||
$optionLinks.click(function(){
|
||||
var $this = $(this);
|
||||
// don't proceed if already selected
|
||||
if ( $this.hasClass('selected') ) {
|
||||
return false;
|
||||
}
|
||||
var $optionSet = $this.parents('.option-set');
|
||||
$optionSet.find('.selected').removeClass('selected');
|
||||
$this.addClass('selected');
|
||||
|
||||
// make option object dynamically, i.e. { filter: '.my-filter-class' }
|
||||
var options = {},
|
||||
key = $optionSet.attr('data-option-key'),
|
||||
value = $this.attr('data-option-value');
|
||||
// parse 'false' as false boolean
|
||||
value = value === 'false' ? false : value;
|
||||
options[ key ] = value;
|
||||
if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
|
||||
// changes in layout modes need extra logic
|
||||
changeLayoutMode( $this, options )
|
||||
} else {
|
||||
// otherwise, apply new options
|
||||
$container.isotope( options );
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Sites using Isotope markup
|
||||
var $sites = $('#sites'),
|
||||
$sitesTitle = $('<h2 class="loading"><img src="http://i.imgur.com/qkKy8.gif" />Loading sites using Isotope</h2>'),
|
||||
$sitesList = $('<ul class="clearfix"></ul>');
|
||||
|
||||
$sites.append( $sitesTitle ).append( $sitesList );
|
||||
|
||||
$sitesList.isotope({
|
||||
layoutMode: 'cellsByRow',
|
||||
cellsByRow: {
|
||||
columnWidth: 290,
|
||||
rowHeight: 400
|
||||
}
|
||||
});
|
||||
|
||||
var ajaxError = function(){
|
||||
$sitesTitle.removeClass('loading').addClass('error')
|
||||
.text('Could not load sites using Isotope :(');
|
||||
};
|
||||
|
||||
// dynamically load sites using Isotope from Zootool
|
||||
$.getJSON('http://zootool.com/api/users/items/?username=desandro' +
|
||||
'&apikey=8b604e5d4841c2cd976241dd90d319d7' +
|
||||
'&tag=bestofisotope&callback=?')
|
||||
.error( ajaxError )
|
||||
.success(function( data ){
|
||||
|
||||
// proceed only if we have data
|
||||
if ( !data || !data.length ) {
|
||||
ajaxError();
|
||||
return;
|
||||
}
|
||||
var items = [],
|
||||
item, datum;
|
||||
|
||||
for ( var i=0, len = data.length; i < len; i++ ) {
|
||||
datum = data[i];
|
||||
item = '<li><a href="' + datum.url + '">'
|
||||
+ '<img src="' + datum.image.replace('/l.', '/m.') + '" />'
|
||||
+ '<b>' + datum.title + '</b>'
|
||||
+ '</a></li>';
|
||||
items.push( item );
|
||||
}
|
||||
|
||||
var $items = $( items.join('') )
|
||||
.addClass('example');
|
||||
|
||||
// set random number for each item
|
||||
$items.each(function(){
|
||||
$(this).attr('data-number', ~~( Math.random() * 100 + 15 ));
|
||||
});
|
||||
|
||||
$items.imagesLoaded(function(){
|
||||
$sitesTitle.removeClass('loading').text('Sites using Isotope');
|
||||
$container.append( $items );
|
||||
$items.each(function(){
|
||||
var $this = $(this),
|
||||
itemHeight = Math.ceil( $this.height() / 120 ) * 120 - 10;
|
||||
$this.height( itemHeight );
|
||||
});
|
||||
$container.isotope( 'insert', $items );
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<footer>
|
||||
Isotope by <a href="http://desandro.com">David DeSandro</a> / <a href="http://metafizzy.co">Metafizzy</a>
|
||||
</footer>
|
||||
|
||||
</section> <!-- #content -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
1356
sites/all/libraries/isotope-site/jquery.isotope.js
Normal file
1356
sites/all/libraries/isotope-site/jquery.isotope.js
Normal file
File diff suppressed because it is too large
Load Diff
13
sites/all/libraries/isotope-site/jquery.isotope.min.js
vendored
Normal file
13
sites/all/libraries/isotope-site/jquery.isotope.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
38
sites/all/libraries/isotope-site/js/fake-element.js
Normal file
38
sites/all/libraries/isotope-site/js/fake-element.js
Normal file
@@ -0,0 +1,38 @@
|
||||
var fakeElement = {};
|
||||
|
||||
fakeElement.constanants = 'b c d f g k l m n p q r s t v x z'.split(' ');
|
||||
fakeElement.vowels = 'a e i o u y'.split(' ');
|
||||
fakeElement.categories = 'alkali alkaline-earth lanthanoid actinoid transition post-transition'.split(' ');
|
||||
fakeElement.suffices = 'on ium ogen'.split(' ');
|
||||
|
||||
fakeElement.getRandom = function( property ) {
|
||||
var values = fakeElement[ property ];
|
||||
return values[ Math.floor( Math.random() * values.length ) ];
|
||||
};
|
||||
|
||||
fakeElement.create = function() {
|
||||
var widthClass = Math.random()*10 > 6 ? 'width2' : 'width1';
|
||||
heightClass = Math.random()*10 > 6 ? 'height2' : 'height1';
|
||||
category = fakeElement.getRandom('categories');
|
||||
className = 'element fake metal ' + category + ' ' + widthClass + ' ' + heightClass;
|
||||
letter1 = fakeElement.getRandom('constanants').toUpperCase();
|
||||
letter2 = fakeElement.getRandom('constanants');
|
||||
symbol = letter1 + letter2;
|
||||
name = letter1 + fakeElement.getRandom('vowels') + letter2 + fakeElement.getRandom('vowels') + fakeElement.getRandom('constanants') + fakeElement.getRandom('suffices');
|
||||
number = ~~( 21 + Math.random() * 100 );
|
||||
weight = ~~( number * 2 + Math.random() * 15 );
|
||||
|
||||
return '<div class="' + className + '" data-symbol="' + symbol +
|
||||
'" data-category="' + category + '"><p class="number">' + number +
|
||||
'</p><h3 class="symbol">' + symbol + '</h3><h2 class="name">' + name +
|
||||
'</h2><p class="weight">' + weight + '</p></div>';
|
||||
};
|
||||
|
||||
fakeElement.getGroup = function() {
|
||||
var i = Math.ceil( Math.random()*3 + 1 ),
|
||||
newEls = '';
|
||||
while ( i-- ) {
|
||||
newEls += fakeElement.create();
|
||||
}
|
||||
return newEls;
|
||||
};
|
||||
4
sites/all/libraries/isotope-site/js/jquery-1.6.4.min.js
vendored
Normal file
4
sites/all/libraries/isotope-site/js/jquery-1.6.4.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
18
sites/all/libraries/isotope-site/js/jquery.ba-bbq.min.js
vendored
Normal file
18
sites/all/libraries/isotope-site/js/jquery.ba-bbq.min.js
vendored
Normal file
@@ -0,0 +1,18 @@
|
||||
/*
|
||||
* jQuery BBQ: Back Button & Query Library - v1.2.1 - 2/17/2010
|
||||
* http://benalman.com/projects/jquery-bbq-plugin/
|
||||
*
|
||||
* Copyright (c) 2010 "Cowboy" Ben Alman
|
||||
* Dual licensed under the MIT and GPL licenses.
|
||||
* http://benalman.com/about/license/
|
||||
*/
|
||||
(function($,p){var i,m=Array.prototype.slice,r=decodeURIComponent,a=$.param,c,l,v,b=$.bbq=$.bbq||{},q,u,j,e=$.event.special,d="hashchange",A="querystring",D="fragment",y="elemUrlAttr",g="location",k="href",t="src",x=/^.*\?|#.*$/g,w=/^.*\#/,h,C={};function E(F){return typeof F==="string"}function B(G){var F=m.call(arguments,1);return function(){return G.apply(this,F.concat(m.call(arguments)))}}function n(F){return F.replace(/^[^#]*#?(.*)$/,"$1")}function o(F){return F.replace(/(?:^[^?#]*\?([^#]*).*$)?.*/,"$1")}function f(H,M,F,I,G){var O,L,K,N,J;if(I!==i){K=F.match(H?/^([^#]*)\#?(.*)$/:/^([^#?]*)\??([^#]*)(#?.*)/);J=K[3]||"";if(G===2&&E(I)){L=I.replace(H?w:x,"")}else{N=l(K[2]);I=E(I)?l[H?D:A](I):I;L=G===2?I:G===1?$.extend({},I,N):$.extend({},N,I);L=a(L);if(H){L=L.replace(h,r)}}O=K[1]+(H?"#":L||!K[1]?"?":"")+L+J}else{O=M(F!==i?F:p[g][k])}return O}a[A]=B(f,0,o);a[D]=c=B(f,1,n);c.noEscape=function(G){G=G||"";var F=$.map(G.split(""),encodeURIComponent);h=new RegExp(F.join("|"),"g")};c.noEscape(",/");$.deparam=l=function(I,F){var H={},G={"true":!0,"false":!1,"null":null};$.each(I.replace(/\+/g," ").split("&"),function(L,Q){var K=Q.split("="),P=r(K[0]),J,O=H,M=0,R=P.split("]["),N=R.length-1;if(/\[/.test(R[0])&&/\]$/.test(R[N])){R[N]=R[N].replace(/\]$/,"");R=R.shift().split("[").concat(R);N=R.length-1}else{N=0}if(K.length===2){J=r(K[1]);if(F){J=J&&!isNaN(J)?+J:J==="undefined"?i:G[J]!==i?G[J]:J}if(N){for(;M<=N;M++){P=R[M]===""?O.length:R[M];O=O[P]=M<N?O[P]||(R[M+1]&&isNaN(R[M+1])?{}:[]):J}}else{if($.isArray(H[P])){H[P].push(J)}else{if(H[P]!==i){H[P]=[H[P],J]}else{H[P]=J}}}}else{if(P){H[P]=F?i:""}}});return H};function z(H,F,G){if(F===i||typeof F==="boolean"){G=F;F=a[H?D:A]()}else{F=E(F)?F.replace(H?w:x,""):F}return l(F,G)}l[A]=B(z,0);l[D]=v=B(z,1);$[y]||($[y]=function(F){return $.extend(C,F)})({a:k,base:k,iframe:t,img:t,input:t,form:"action",link:k,script:t});j=$[y];function s(I,G,H,F){if(!E(H)&&typeof H!=="object"){F=H;H=G;G=i}return this.each(function(){var L=$(this),J=G||j()[(this.nodeName||"").toLowerCase()]||"",K=J&&L.attr(J)||"";L.attr(J,a[I](K,H,F))})}$.fn[A]=B(s,A);$.fn[D]=B(s,D);b.pushState=q=function(I,F){if(E(I)&&/^#/.test(I)&&F===i){F=2}var H=I!==i,G=c(p[g][k],H?I:{},H?F:2);p[g][k]=G+(/#/.test(G)?"":"#")};b.getState=u=function(F,G){return F===i||typeof F==="boolean"?v(F):v(G)[F]};b.removeState=function(F){var G={};if(F!==i){G=u();$.each($.isArray(F)?F:arguments,function(I,H){delete G[H]})}q(G,2)};e[d]=$.extend(e[d],{add:function(F){var H;function G(J){var I=J[D]=c();J.getState=function(K,L){return K===i||typeof K==="boolean"?l(I,K):l(I,L)[K]};H.apply(this,arguments)}if($.isFunction(F)){H=F;return G}else{H=F.handler;F.handler=G}}})})(jQuery,this);
|
||||
/*
|
||||
* jQuery hashchange event - v1.2 - 2/11/2010
|
||||
* http://benalman.com/projects/jquery-hashchange-plugin/
|
||||
*
|
||||
* Copyright (c) 2010 "Cowboy" Ben Alman
|
||||
* Dual licensed under the MIT and GPL licenses.
|
||||
* http://benalman.com/about/license/
|
||||
*/
|
||||
(function($,i,b){var j,k=$.event.special,c="location",d="hashchange",l="href",f=$.browser,g=document.documentMode,h=f.msie&&(g===b||g<8),e="on"+d in i&&!h;function a(m){m=m||i[c][l];return m.replace(/^[^#]*#?(.*)$/,"$1")}$[d+"Delay"]=100;k[d]=$.extend(k[d],{setup:function(){if(e){return false}$(j.start)},teardown:function(){if(e){return false}$(j.stop)}});j=(function(){var m={},r,n,o,q;function p(){o=q=function(s){return s};if(h){n=$('<iframe src="javascript:0"/>').hide().insertAfter("body")[0].contentWindow;q=function(){return a(n.document[c][l])};o=function(u,s){if(u!==s){var t=n.document;t.open().close();t[c].hash="#"+u}};o(a())}}m.start=function(){if(r){return}var t=a();o||p();(function s(){var v=a(),u=q(t);if(v!==t){o(t=v,u);$(i).trigger(d)}else{if(u!==t){i[c][l]=i[c][l].replace(/#.*/,"")+"#"+u}}r=setTimeout(s,$[d+"Delay"])})()};m.stop=function(){if(!n){r&&clearTimeout(r);r=0}};return m})()})(jQuery,this);
|
||||
47
sites/all/libraries/isotope-site/js/jquery.infinitescroll.min.js
vendored
Normal file
47
sites/all/libraries/isotope-site/js/jquery.infinitescroll.min.js
vendored
Normal file
@@ -0,0 +1,47 @@
|
||||
/*
|
||||
--------------------------------
|
||||
Infinite Scroll
|
||||
--------------------------------
|
||||
+ https://github.com/paulirish/infinitescroll
|
||||
+ version 2.0b2.110713
|
||||
+ Copyright 2011 Paul Irish & Luke Shumard
|
||||
+ Licensed under the MIT license
|
||||
|
||||
+ Documentation: http://infinite-scroll.com/
|
||||
|
||||
*/
|
||||
|
||||
(function(window,$,undefined){$.infinitescroll=function infscr(options,callback,element){this.element=$(element);this._create(options,callback);};$.infinitescroll.defaults={loading:{finished:undefined,finishedMsg:"<em>Congratulations, you've reached the end of the internet.</em>",img:"http://www.infinite-scroll.com/loading.gif",msg:null,msgText:"<em>Loading the next set of posts...</em>",selector:null,speed:'fast',start:undefined},state:{isDuringAjax:false,isInvalidPage:false,isDestroyed:false,isDone:false,isPaused:false,currPage:1},callback:undefined,debug:false,behavior:undefined,binder:$(window),nextSelector:"div.navigation a:first",navSelector:"div.navigation",contentSelector:null,extraScrollPx:150,itemSelector:"div.post",animate:false,pathParse:undefined,dataType:'html',appendCallback:true,bufferPx:40,errorCallback:function(){},infid:0,pixelsFromNavToBottom:undefined,path:undefined};$.infinitescroll.prototype={_binding:function infscr_binding(binding){var instance=this,opts=instance.options;if(!!opts.behavior&&this['_binding_'+opts.behavior]!==undefined){this['_binding_'+opts.behavior].call(this);return;}
|
||||
if(binding!=='bind'&&binding!=='unbind'){this._debug('Binding value '+binding+' not valid')
|
||||
return false;}
|
||||
if(binding=='unbind'){(this.options.binder).unbind('smartscroll.infscr.'+instance.options.infid);}else{(this.options.binder)[binding]('smartscroll.infscr.'+instance.options.infid,function(){instance.scroll();});};this._debug('Binding',binding);},_create:function infscr_create(options,callback){if(!this._validate(options)){return false;}
|
||||
var opts=this.options=$.extend(true,{},$.infinitescroll.defaults,options),relurl=/(.*?\/\/).*?(\/.*)/,path=$(opts.nextSelector).attr('href');opts.contentSelector=opts.contentSelector||this.element;opts.loading.selector=opts.loading.selector||opts.contentSelector;if(!path){this._debug('Navigation selector not found');return;}
|
||||
opts.path=this._determinepath(path);opts.loading.msg=$('<div id="infscr-loading"><img alt="Loading..." src="'+opts.loading.img+'" /><div>'+opts.loading.msgText+'</div></div>');(new Image()).src=opts.loading.img;opts.pixelsFromNavToBottom=$(document).height()-$(opts.navSelector).offset().top;opts.loading.start=opts.loading.start||function(){$(opts.navSelector).hide();opts.loading.msg.appendTo(opts.loading.selector).show(opts.loading.speed,function(){beginAjax(opts);});};opts.loading.finished=opts.loading.finished||function(){opts.loading.msg.fadeOut('normal');};opts.callback=function(instance,data){if(!!opts.behavior&&instance['_callback_'+opts.behavior]!==undefined){instance['_callback_'+opts.behavior].call($(opts.contentSelector)[0],data);}
|
||||
if(callback){callback.call($(opts.contentSelector)[0],data);}};this._setup();},_debug:function infscr_debug(){if(this.options.debug){return window.console&&console.log.call(console,arguments);}},_determinepath:function infscr_determinepath(path){var opts=this.options;if(!!opts.behavior&&this['_determinepath_'+opts.behavior]!==undefined){this['_determinepath_'+opts.behavior].call(this,path);return;}
|
||||
if(!!opts.pathParse){this._debug('pathParse manual');return opts.pathParse;}else if(path.match(/^(.*?)\b2\b(.*?$)/)){path=path.match(/^(.*?)\b2\b(.*?$)/).slice(1);}else if(path.match(/^(.*?)2(.*?$)/)){if(path.match(/^(.*?page=)2(\/.*|$)/)){path=path.match(/^(.*?page=)2(\/.*|$)/).slice(1);return path;}
|
||||
path=path.match(/^(.*?)2(.*?$)/).slice(1);}else{if(path.match(/^(.*?page=)1(\/.*|$)/)){path=path.match(/^(.*?page=)1(\/.*|$)/).slice(1);return path;}else{this._debug('Sorry, we couldn\'t parse your Next (Previous Posts) URL. Verify your the css selector points to the correct A tag. If you still get this error: yell, scream, and kindly ask for help at infinite-scroll.com.');opts.state.isInvalidPage=true;}}
|
||||
this._debug('determinePath',path);return path;},_error:function infscr_error(xhr){var opts=this.options;if(!!opts.behavior&&this['_error_'+opts.behavior]!==undefined){this['_error_'+opts.behavior].call(this,xhr);return;}
|
||||
if(xhr!=='destroy'&&xhr!=='end'){xhr='unknown';}
|
||||
this._debug('Error',xhr);if(xhr=='end'){this._showdonemsg();}
|
||||
opts.state.isDone=true;opts.state.currPage=1;opts.state.isPaused=false;this._binding('unbind');},_loadcallback:function infscr_loadcallback(box,data){var opts=this.options,callback=this.options.callback,result=(opts.state.isDone)?'done':(!opts.appendCallback)?'no-append':'append',frag;if(!!opts.behavior&&this['_loadcallback_'+opts.behavior]!==undefined){this['_loadcallback_'+opts.behavior].call(this,box,data);return;}
|
||||
switch(result){case'done':this._showdonemsg();return false;break;case'no-append':if(opts.dataType=='html'){data='<div>'+data+'</div>';data=$(data).find(opts.itemSelector);};break;case'append':var children=box.children();if(children.length==0){return this._error('end');}
|
||||
frag=document.createDocumentFragment();while(box[0].firstChild){frag.appendChild(box[0].firstChild);}
|
||||
this._debug('contentSelector',$(opts.contentSelector)[0])
|
||||
$(opts.contentSelector)[0].appendChild(frag);data=children.get();break;}
|
||||
opts.loading.finished.call($(opts.contentSelector)[0],opts)
|
||||
if(opts.animate){var scrollTo=$(window).scrollTop()+$('#infscr-loading').height()+opts.extraScrollPx+'px';$('html,body').animate({scrollTop:scrollTo},800,function(){opts.state.isDuringAjax=false;});}
|
||||
if(!opts.animate)opts.state.isDuringAjax=false;callback(this,data);},_nearbottom:function infscr_nearbottom(){var opts=this.options,pixelsFromWindowBottomToBottom=0+$(document).height()-(opts.binder.scrollTop())-$(window).height();if(!!opts.behavior&&this['_nearbottom_'+opts.behavior]!==undefined){this['_nearbottom_'+opts.behavior].call(this);return;}
|
||||
this._debug('math:',pixelsFromWindowBottomToBottom,opts.pixelsFromNavToBottom);return(pixelsFromWindowBottomToBottom-opts.bufferPx<opts.pixelsFromNavToBottom);},_pausing:function infscr_pausing(pause){var opts=this.options;if(!!opts.behavior&&this['_pausing_'+opts.behavior]!==undefined){this['_pausing_'+opts.behavior].call(this,pause);return;}
|
||||
if(pause!=='pause'&&pause!=='resume'&&pause!==null){this._debug('Invalid argument. Toggling pause value instead');};pause=(pause&&(pause=='pause'||pause=='resume'))?pause:'toggle';switch(pause){case'pause':opts.state.isPaused=true;break;case'resume':opts.state.isPaused=false;break;case'toggle':opts.state.isPaused=!opts.state.isPaused;break;}
|
||||
this._debug('Paused',opts.state.isPaused);return false;},_setup:function infscr_setup(){var opts=this.options;if(!!opts.behavior&&this['_setup_'+opts.behavior]!==undefined){this['_setup_'+opts.behavior].call(this);return;}
|
||||
this._binding('bind');return false;},_showdonemsg:function infscr_showdonemsg(){var opts=this.options;if(!!opts.behavior&&this['_showdonemsg_'+opts.behavior]!==undefined){this['_showdonemsg_'+opts.behavior].call(this);return;}
|
||||
opts.loading.msg.find('img').hide().parent().find('div').html(opts.loading.finishedMsg).animate({opacity:1},2000,function(){$(this).parent().fadeOut('normal');});opts.errorCallback.call($(opts.contentSelector)[0],'done');},_validate:function infscr_validate(opts){for(var key in opts){if(key.indexOf&&key.indexOf('Selector')>-1&&$(opts[key]).length===0){this._debug('Your '+key+' found no elements.');return false;}
|
||||
return true;}},bind:function infscr_bind(){this._binding('bind');},destroy:function infscr_destroy(){this.options.state.isDestroyed=true;return this._error('destroy');},pause:function infscr_pause(){this._pausing('pause');},resume:function infscr_resume(){this._pausing('resume');},retrieve:function infscr_retrieve(pageNum){var instance=this,opts=instance.options,path=opts.path,box,frag,desturl,method,condition,pageNum=pageNum||null,getPage=(!!pageNum)?pageNum:opts.state.currPage;beginAjax=function infscr_ajax(opts){opts.state.currPage++;instance._debug('heading into ajax',path);box=$(opts.contentSelector).is('table')?$('<tbody/>'):$('<div/>');desturl=path.join(opts.state.currPage);method=(opts.dataType=='html'||opts.dataType=='json')?opts.dataType:'html+callback';if(opts.appendCallback&&opts.dataType=='html')method+='+callback'
|
||||
switch(method){case'html+callback':instance._debug('Using HTML via .load() method');box.load(desturl+' '+opts.itemSelector,null,function infscr_ajax_callback(responseText){instance._loadcallback(box,responseText);});break;case'html':case'json':instance._debug('Using '+(method.toUpperCase())+' via $.ajax() method');$.ajax({url:desturl,dataType:opts.dataType,complete:function infscr_ajax_callback(jqXHR,textStatus){condition=(typeof(jqXHR.isResolved)!=='undefined')?(jqXHR.isResolved()):(textStatus==="success"||textStatus==="notmodified");(condition)?instance._loadcallback(box,jqXHR.responseText):instance._error('end');}});break;}};if(!!opts.behavior&&this['retrieve_'+opts.behavior]!==undefined){this['retrieve_'+opts.behavior].call(this,pageNum);return;}
|
||||
if(opts.state.isDestroyed){this._debug('Instance is destroyed');return false;};opts.state.isDuringAjax=true;opts.loading.start.call($(opts.contentSelector)[0],opts);},scroll:function infscr_scroll(){var opts=this.options,state=opts.state;if(!!opts.behavior&&this['scroll_'+opts.behavior]!==undefined){this['scroll_'+opts.behavior].call(this);return;}
|
||||
if(state.isDuringAjax||state.isInvalidPage||state.isDone||state.isDestroyed||state.isPaused)return;if(!this._nearbottom())return;this.retrieve();},toggle:function infscr_toggle(){this._pausing();},unbind:function infscr_unbind(){this._binding('unbind');},update:function infscr_options(key){if($.isPlainObject(key)){this.options=$.extend(true,this.options,key);}}}
|
||||
$.fn.infinitescroll=function infscr_init(options,callback){var thisCall=typeof options;switch(thisCall){case'string':var args=Array.prototype.slice.call(arguments,1);this.each(function(){var instance=$.data(this,'infinitescroll');if(!instance){return false;}
|
||||
if(!$.isFunction(instance[options])||options.charAt(0)==="_"){return false;}
|
||||
instance[options].apply(instance,args);});break;case'object':this.each(function(){var instance=$.data(this,'infinitescroll');if(instance){instance.update(options);}else{$.data(this,'infinitescroll',new $.infinitescroll(options,callback,this));}});break;}
|
||||
return this;};var event=$.event,scrollTimeout;event.special.smartscroll={setup:function(){$(this).bind("scroll",event.special.smartscroll.handler);},teardown:function(){$(this).unbind("scroll",event.special.smartscroll.handler);},handler:function(event,execAsap){var context=this,args=arguments;event.type="smartscroll";if(scrollTimeout){clearTimeout(scrollTimeout);}
|
||||
scrollTimeout=setTimeout(function(){$.event.handle.apply(context,args);},execAsap==="execAsap"?0:100);}};$.fn.smartscroll=function(fn){return fn?this.bind("smartscroll",fn):this.trigger("smartscroll",["execAsap"]);};})(window,jQuery);
|
||||
355
sites/all/libraries/isotope-site/pages/2.html
Normal file
355
sites/all/libraries/isotope-site/pages/2.html
Normal file
@@ -0,0 +1,355 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<title>Infinite Scroll Page 2 · Isotope </title>
|
||||
|
||||
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
|
||||
<!-- scripts at bottom of page -->
|
||||
|
||||
</head>
|
||||
<body class="pages ">
|
||||
|
||||
<nav id="site-nav">
|
||||
<h1><a href="../index.html">Isotope</a></h1>
|
||||
|
||||
<h2>Docs</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../docs/introduction.html">Introduction</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/options.html">Options</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/methods.html">Methods</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/animating.html">Animating</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/extending-isotope.html">Extending Isotope</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/hash-history-jquery-bbq.html">Hash history with jQuery BBQ</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/help.html">Help</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/license.html">License</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Demos</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../demos/basic.html">Basic</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-complete.html">Elements Complete</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-partial.html">Elements Partial</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/relayout.html">reLayout</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/infinite-scroll.html">Infinite Scroll</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/images.html">Images</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/combination-filters.html">Combination filters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/hash-history.html">Hash history</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/fluid-responsive.html">Fluid / responsive</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Custom layout modes</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/centered-masonry.html">Centered Masonry</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/category-rows.html">Category rows</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-corner-stamp.html">Masonry corner stamp</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-gutters.html">Masonry gutters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/spine-align.html">Spine align</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2><a href="../tests/index.html">Tests</a></h2>
|
||||
|
||||
</nav> <!-- #site-nav -->
|
||||
|
||||
<section id="content">
|
||||
|
||||
<h1>Infinite Scroll Page 2</h1>
|
||||
|
||||
|
||||
<div id="container" class="variable-sizes">
|
||||
|
||||
|
||||
|
||||
<div class="element transition metal width2 height2 " data-symbol="Sc" data-category="transition">
|
||||
<p class="number">21</p>
|
||||
<h3 class="symbol">Sc</h3>
|
||||
<h2 class="name">Scandium</h2>
|
||||
<p class="weight">44.955912</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal width2 height2 " data-symbol="Ti" data-category="transition">
|
||||
<p class="number">22</p>
|
||||
<h3 class="symbol">Ti</h3>
|
||||
<h2 class="name">Titanium</h2>
|
||||
<p class="weight">47.867</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal width2 height2 " data-symbol="V" data-category="transition">
|
||||
<p class="number">23</p>
|
||||
<h3 class="symbol">V</h3>
|
||||
<h2 class="name">Vanadium</h2>
|
||||
<p class="weight">50.9415</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal width2 height2 " data-symbol="Cr" data-category="transition">
|
||||
<p class="number">24</p>
|
||||
<h3 class="symbol">Cr</h3>
|
||||
<h2 class="name">Chromium</h2>
|
||||
<p class="weight">51.9961</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal width2 height2 " data-symbol="Mn" data-category="transition">
|
||||
<p class="number">25</p>
|
||||
<h3 class="symbol">Mn</h3>
|
||||
<h2 class="name">Manganese</h2>
|
||||
<p class="weight">54.938045</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal width2 height2 " data-symbol="Fe" data-category="transition">
|
||||
<p class="number">26</p>
|
||||
<h3 class="symbol">Fe</h3>
|
||||
<h2 class="name">Iron</h2>
|
||||
<p class="weight">55.845</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal width2 height2 " data-symbol="Co" data-category="transition">
|
||||
<p class="number">27</p>
|
||||
<h3 class="symbol">Co</h3>
|
||||
<h2 class="name">Cobalt</h2>
|
||||
<p class="weight">58.933195</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal width2 height2 " data-symbol="Ni" data-category="transition">
|
||||
<p class="number">28</p>
|
||||
<h3 class="symbol">Ni</h3>
|
||||
<h2 class="name">Nickel</h2>
|
||||
<p class="weight">58.6934</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal width2 height2 " data-symbol="Cu" data-category="transition">
|
||||
<p class="number">29</p>
|
||||
<h3 class="symbol">Cu</h3>
|
||||
<h2 class="name">Copper</h2>
|
||||
<p class="weight">63.546</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal width2 height2 " data-symbol="Zn" data-category="transition">
|
||||
<p class="number">30</p>
|
||||
<h3 class="symbol">Zn</h3>
|
||||
<h2 class="name">Zinc</h2>
|
||||
<p class="weight">65.38</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element post-transition metal width2 height2 " data-symbol="Ga" data-category="post-transition">
|
||||
<p class="number">31</p>
|
||||
<h3 class="symbol">Ga</h3>
|
||||
<h2 class="name">Gallium</h2>
|
||||
<p class="weight">69.723</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element metalloid width2 height2 " data-symbol="Ge" data-category="metalloid">
|
||||
<p class="number">32</p>
|
||||
<h3 class="symbol">Ge</h3>
|
||||
<h2 class="name">Germanium</h2>
|
||||
<p class="weight">72.64</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element metalloid width2 height2 " data-symbol="As" data-category="metalloid">
|
||||
<p class="number">33</p>
|
||||
<h3 class="symbol">As</h3>
|
||||
<h2 class="name">Arsenic</h2>
|
||||
<p class="weight">74.9216</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element other nonmetal width2 height2 " data-symbol="Se" data-category="other">
|
||||
<p class="number">34</p>
|
||||
<h3 class="symbol">Se</h3>
|
||||
<h2 class="name">Selenium</h2>
|
||||
<p class="weight">78.96</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element halogen nonmetal width2 height2 " data-symbol="Br" data-category="halogen">
|
||||
<p class="number">35</p>
|
||||
<h3 class="symbol">Br</h3>
|
||||
<h2 class="name">Bromine</h2>
|
||||
<p class="weight">79.904</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element noble-gas nonmetal width2 height2 " data-symbol="Kr" data-category="noble-gas">
|
||||
<p class="number">36</p>
|
||||
<h3 class="symbol">Kr</h3>
|
||||
<h2 class="name">Krypton</h2>
|
||||
<p class="weight">83.798</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkali metal width2 height2 " data-symbol="Rb" data-category="alkali">
|
||||
<p class="number">37</p>
|
||||
<h3 class="symbol">Rb</h3>
|
||||
<h2 class="name">Rubidium</h2>
|
||||
<p class="weight">85.4678</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkaline-earth metal width2 height2 " data-symbol="Sr" data-category="alkaline-earth">
|
||||
<p class="number">38</p>
|
||||
<h3 class="symbol">Sr</h3>
|
||||
<h2 class="name">Strontium</h2>
|
||||
<p class="weight">87.62</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal width2 height2 " data-symbol="Y" data-category="transition">
|
||||
<p class="number">39</p>
|
||||
<h3 class="symbol">Y</h3>
|
||||
<h2 class="name">Yttrium</h2>
|
||||
<p class="weight">88.90585</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal width2 height2 " data-symbol="Zr" data-category="transition">
|
||||
<p class="number">40</p>
|
||||
<h3 class="symbol">Zr</h3>
|
||||
<h2 class="name">Zirconium</h2>
|
||||
<p class="weight">91.224</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="../js/jquery-1.6.4.min.js"></script>
|
||||
<script src="../jquery.isotope.min.js"></script>
|
||||
<script>
|
||||
$(function(){
|
||||
|
||||
var $container = $('#container');
|
||||
|
||||
$container.isotope({
|
||||
itemSelector : '.element',
|
||||
layoutMode : 'fitRows'
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<footer>
|
||||
Isotope by <a href="http://desandro.com">David DeSandro</a> / <a href="http://metafizzy.co">Metafizzy</a>
|
||||
</footer>
|
||||
|
||||
</section> <!-- #content -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
355
sites/all/libraries/isotope-site/pages/3.html
Normal file
355
sites/all/libraries/isotope-site/pages/3.html
Normal file
@@ -0,0 +1,355 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<title>Infinite Scroll Page 3 · Isotope </title>
|
||||
|
||||
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
|
||||
<!-- scripts at bottom of page -->
|
||||
|
||||
</head>
|
||||
<body class="pages ">
|
||||
|
||||
<nav id="site-nav">
|
||||
<h1><a href="../index.html">Isotope</a></h1>
|
||||
|
||||
<h2>Docs</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../docs/introduction.html">Introduction</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/options.html">Options</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/methods.html">Methods</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/animating.html">Animating</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/extending-isotope.html">Extending Isotope</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/hash-history-jquery-bbq.html">Hash history with jQuery BBQ</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/help.html">Help</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/license.html">License</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Demos</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../demos/basic.html">Basic</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-complete.html">Elements Complete</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-partial.html">Elements Partial</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/relayout.html">reLayout</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/infinite-scroll.html">Infinite Scroll</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/images.html">Images</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/combination-filters.html">Combination filters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/hash-history.html">Hash history</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/fluid-responsive.html">Fluid / responsive</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Custom layout modes</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/centered-masonry.html">Centered Masonry</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/category-rows.html">Category rows</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-corner-stamp.html">Masonry corner stamp</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-gutters.html">Masonry gutters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/spine-align.html">Spine align</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2><a href="../tests/index.html">Tests</a></h2>
|
||||
|
||||
</nav> <!-- #site-nav -->
|
||||
|
||||
<section id="content">
|
||||
|
||||
<h1>Infinite Scroll Page 3</h1>
|
||||
|
||||
|
||||
<div id="container" class="variable-sizes">
|
||||
|
||||
|
||||
|
||||
<div class="element transition metal width2 height2 " data-symbol="Nb" data-category="transition">
|
||||
<p class="number">41</p>
|
||||
<h3 class="symbol">Nb</h3>
|
||||
<h2 class="name">Niobium</h2>
|
||||
<p class="weight">92.90638</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal width2 height2 " data-symbol="Mo" data-category="transition">
|
||||
<p class="number">42</p>
|
||||
<h3 class="symbol">Mo</h3>
|
||||
<h2 class="name">Molybdenum</h2>
|
||||
<p class="weight">95.96</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal width2 height2 " data-symbol="Tc" data-category="transition">
|
||||
<p class="number">43</p>
|
||||
<h3 class="symbol">Tc</h3>
|
||||
<h2 class="name">Technetium</h2>
|
||||
<p class="weight">(98)</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal width2 height2 " data-symbol="Ru" data-category="transition">
|
||||
<p class="number">44</p>
|
||||
<h3 class="symbol">Ru</h3>
|
||||
<h2 class="name">Ruthenium</h2>
|
||||
<p class="weight">101.07</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal width2 height2 " data-symbol="Rh" data-category="transition">
|
||||
<p class="number">45</p>
|
||||
<h3 class="symbol">Rh</h3>
|
||||
<h2 class="name">Rhodium</h2>
|
||||
<p class="weight">102.9055</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal width2 height2 " data-symbol="Pd" data-category="transition">
|
||||
<p class="number">46</p>
|
||||
<h3 class="symbol">Pd</h3>
|
||||
<h2 class="name">Palladium</h2>
|
||||
<p class="weight">106.42</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal width2 height2 " data-symbol="Ag" data-category="transition">
|
||||
<p class="number">47</p>
|
||||
<h3 class="symbol">Ag</h3>
|
||||
<h2 class="name">Silver</h2>
|
||||
<p class="weight">107.8682</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal width2 height2 " data-symbol="Cd" data-category="transition">
|
||||
<p class="number">48</p>
|
||||
<h3 class="symbol">Cd</h3>
|
||||
<h2 class="name">Cadmium</h2>
|
||||
<p class="weight">112.411</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element post-transition metal width2 height2 " data-symbol="In" data-category="post-transition">
|
||||
<p class="number">49</p>
|
||||
<h3 class="symbol">In</h3>
|
||||
<h2 class="name">Indium</h2>
|
||||
<p class="weight">114.818</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element post-transition metal width2 height2 " data-symbol="Sn" data-category="post-transition">
|
||||
<p class="number">50</p>
|
||||
<h3 class="symbol">Sn</h3>
|
||||
<h2 class="name">Tin</h2>
|
||||
<p class="weight">118.71</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element metalloid width2 height2 " data-symbol="Sb" data-category="metalloid">
|
||||
<p class="number">51</p>
|
||||
<h3 class="symbol">Sb</h3>
|
||||
<h2 class="name">Antimony</h2>
|
||||
<p class="weight">121.76</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element metalloid width2 height2 " data-symbol="Te" data-category="metalloid">
|
||||
<p class="number">52</p>
|
||||
<h3 class="symbol">Te</h3>
|
||||
<h2 class="name">Tellurium</h2>
|
||||
<p class="weight">127.6</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element halogen nonmetal width2 height2 " data-symbol="I" data-category="halogen">
|
||||
<p class="number">53</p>
|
||||
<h3 class="symbol">I</h3>
|
||||
<h2 class="name">Iodine</h2>
|
||||
<p class="weight">126.90447</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element noble-gas nonmetal width2 height2 " data-symbol="Xe" data-category="noble-gas">
|
||||
<p class="number">54</p>
|
||||
<h3 class="symbol">Xe</h3>
|
||||
<h2 class="name">Xenon</h2>
|
||||
<p class="weight">131.293</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkali metal width2 height2 " data-symbol="Cs" data-category="alkali">
|
||||
<p class="number">55</p>
|
||||
<h3 class="symbol">Cs</h3>
|
||||
<h2 class="name">Caesium</h2>
|
||||
<p class="weight">132.9054519</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkaline-earth metal width2 height2 " data-symbol="Ba" data-category="alkaline-earth">
|
||||
<p class="number">56</p>
|
||||
<h3 class="symbol">Ba</h3>
|
||||
<h2 class="name">Barium</h2>
|
||||
<p class="weight">137.327</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element lanthanoid metal inner-transition width2 height2 " data-symbol="La" data-category="lanthanoid">
|
||||
<p class="number">57</p>
|
||||
<h3 class="symbol">La</h3>
|
||||
<h2 class="name">Lanthanum</h2>
|
||||
<p class="weight">138.90547</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element lanthanoid metal inner-transition width2 height2 " data-symbol="Ce" data-category="lanthanoid">
|
||||
<p class="number">58</p>
|
||||
<h3 class="symbol">Ce</h3>
|
||||
<h2 class="name">Cerium</h2>
|
||||
<p class="weight">140.116</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element lanthanoid metal inner-transition width2 height2 " data-symbol="Pr" data-category="lanthanoid">
|
||||
<p class="number">59</p>
|
||||
<h3 class="symbol">Pr</h3>
|
||||
<h2 class="name">Praseodymium</h2>
|
||||
<p class="weight">140.90765</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element lanthanoid metal inner-transition width2 height2 " data-symbol="Nd" data-category="lanthanoid">
|
||||
<p class="number">60</p>
|
||||
<h3 class="symbol">Nd</h3>
|
||||
<h2 class="name">Neodymium</h2>
|
||||
<p class="weight">144.242</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="../js/jquery-1.6.4.min.js"></script>
|
||||
<script src="../jquery.isotope.min.js"></script>
|
||||
<script>
|
||||
$(function(){
|
||||
|
||||
var $container = $('#container');
|
||||
|
||||
$container.isotope({
|
||||
itemSelector : '.element',
|
||||
layoutMode : 'fitRows'
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<footer>
|
||||
Isotope by <a href="http://desandro.com">David DeSandro</a> / <a href="http://metafizzy.co">Metafizzy</a>
|
||||
</footer>
|
||||
|
||||
</section> <!-- #content -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
355
sites/all/libraries/isotope-site/pages/4.html
Normal file
355
sites/all/libraries/isotope-site/pages/4.html
Normal file
@@ -0,0 +1,355 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<title>Infinite Scroll Page 4 · Isotope </title>
|
||||
|
||||
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
|
||||
<!-- scripts at bottom of page -->
|
||||
|
||||
</head>
|
||||
<body class="pages ">
|
||||
|
||||
<nav id="site-nav">
|
||||
<h1><a href="../index.html">Isotope</a></h1>
|
||||
|
||||
<h2>Docs</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../docs/introduction.html">Introduction</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/options.html">Options</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/methods.html">Methods</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/animating.html">Animating</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/extending-isotope.html">Extending Isotope</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/hash-history-jquery-bbq.html">Hash history with jQuery BBQ</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/help.html">Help</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/license.html">License</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Demos</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../demos/basic.html">Basic</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-complete.html">Elements Complete</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-partial.html">Elements Partial</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/relayout.html">reLayout</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/infinite-scroll.html">Infinite Scroll</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/images.html">Images</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/combination-filters.html">Combination filters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/hash-history.html">Hash history</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/fluid-responsive.html">Fluid / responsive</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Custom layout modes</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/centered-masonry.html">Centered Masonry</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/category-rows.html">Category rows</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-corner-stamp.html">Masonry corner stamp</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-gutters.html">Masonry gutters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/spine-align.html">Spine align</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2><a href="../tests/index.html">Tests</a></h2>
|
||||
|
||||
</nav> <!-- #site-nav -->
|
||||
|
||||
<section id="content">
|
||||
|
||||
<h1>Infinite Scroll Page 4</h1>
|
||||
|
||||
|
||||
<div id="container" class="variable-sizes">
|
||||
|
||||
|
||||
|
||||
<div class="element lanthanoid metal inner-transition width2 height2 " data-symbol="Pm" data-category="lanthanoid">
|
||||
<p class="number">61</p>
|
||||
<h3 class="symbol">Pm</h3>
|
||||
<h2 class="name">Promethium</h2>
|
||||
<p class="weight">(145)</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element lanthanoid metal inner-transition width2 height2 " data-symbol="Sm" data-category="lanthanoid">
|
||||
<p class="number">62</p>
|
||||
<h3 class="symbol">Sm</h3>
|
||||
<h2 class="name">Samarium</h2>
|
||||
<p class="weight">150.36</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element lanthanoid metal inner-transition width2 height2 " data-symbol="Eu" data-category="lanthanoid">
|
||||
<p class="number">63</p>
|
||||
<h3 class="symbol">Eu</h3>
|
||||
<h2 class="name">Europium</h2>
|
||||
<p class="weight">151.964</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element lanthanoid metal inner-transition width2 height2 " data-symbol="Gd" data-category="lanthanoid">
|
||||
<p class="number">64</p>
|
||||
<h3 class="symbol">Gd</h3>
|
||||
<h2 class="name">Gadolinium</h2>
|
||||
<p class="weight">157.25</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element lanthanoid metal inner-transition width2 height2 " data-symbol="Tb" data-category="lanthanoid">
|
||||
<p class="number">65</p>
|
||||
<h3 class="symbol">Tb</h3>
|
||||
<h2 class="name">Terbium</h2>
|
||||
<p class="weight">158.92535</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element lanthanoid metal inner-transition width2 height2 " data-symbol="Dy" data-category="lanthanoid">
|
||||
<p class="number">66</p>
|
||||
<h3 class="symbol">Dy</h3>
|
||||
<h2 class="name">Dysprosium</h2>
|
||||
<p class="weight">162.5</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element lanthanoid metal inner-transition width2 height2 " data-symbol="Ho" data-category="lanthanoid">
|
||||
<p class="number">67</p>
|
||||
<h3 class="symbol">Ho</h3>
|
||||
<h2 class="name">Holmium</h2>
|
||||
<p class="weight">164.93032</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element lanthanoid metal inner-transition width2 height2 " data-symbol="Er" data-category="lanthanoid">
|
||||
<p class="number">68</p>
|
||||
<h3 class="symbol">Er</h3>
|
||||
<h2 class="name">Erbium</h2>
|
||||
<p class="weight">167.259</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element lanthanoid metal inner-transition width2 height2 " data-symbol="Tm" data-category="lanthanoid">
|
||||
<p class="number">69</p>
|
||||
<h3 class="symbol">Tm</h3>
|
||||
<h2 class="name">Thulium</h2>
|
||||
<p class="weight">168.93421</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element lanthanoid metal inner-transition width2 height2 " data-symbol="Yb" data-category="lanthanoid">
|
||||
<p class="number">70</p>
|
||||
<h3 class="symbol">Yb</h3>
|
||||
<h2 class="name">Ytterbium</h2>
|
||||
<p class="weight">173.054</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element lanthanoid metal inner-transition width2 height2 " data-symbol="Lu" data-category="lanthanoid">
|
||||
<p class="number">71</p>
|
||||
<h3 class="symbol">Lu</h3>
|
||||
<h2 class="name">Lutetium</h2>
|
||||
<p class="weight">174.9668</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal width2 height2 " data-symbol="Hf" data-category="transition">
|
||||
<p class="number">72</p>
|
||||
<h3 class="symbol">Hf</h3>
|
||||
<h2 class="name">Hafnium</h2>
|
||||
<p class="weight">178.49</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal width2 height2 " data-symbol="Ta" data-category="transition">
|
||||
<p class="number">73</p>
|
||||
<h3 class="symbol">Ta</h3>
|
||||
<h2 class="name">Tantalum</h2>
|
||||
<p class="weight">180.94788</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal width2 height2 " data-symbol="W" data-category="transition">
|
||||
<p class="number">74</p>
|
||||
<h3 class="symbol">W</h3>
|
||||
<h2 class="name">Tungsten</h2>
|
||||
<p class="weight">183.84</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal width2 height2 " data-symbol="Re" data-category="transition">
|
||||
<p class="number">75</p>
|
||||
<h3 class="symbol">Re</h3>
|
||||
<h2 class="name">Rhenium</h2>
|
||||
<p class="weight">186.207</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal width2 height2 " data-symbol="Os" data-category="transition">
|
||||
<p class="number">76</p>
|
||||
<h3 class="symbol">Os</h3>
|
||||
<h2 class="name">Osmium</h2>
|
||||
<p class="weight">190.23</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal width2 height2 " data-symbol="Ir" data-category="transition">
|
||||
<p class="number">77</p>
|
||||
<h3 class="symbol">Ir</h3>
|
||||
<h2 class="name">Iridium</h2>
|
||||
<p class="weight">192.217</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal width2 height2 " data-symbol="Pt" data-category="transition">
|
||||
<p class="number">78</p>
|
||||
<h3 class="symbol">Pt</h3>
|
||||
<h2 class="name">Platinum</h2>
|
||||
<p class="weight">195.084</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal width2 height2 " data-symbol="Au" data-category="transition">
|
||||
<p class="number">79</p>
|
||||
<h3 class="symbol">Au</h3>
|
||||
<h2 class="name">Gold</h2>
|
||||
<p class="weight">196.966569</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal width2 height2 " data-symbol="Hg" data-category="transition">
|
||||
<p class="number">80</p>
|
||||
<h3 class="symbol">Hg</h3>
|
||||
<h2 class="name">Mercury</h2>
|
||||
<p class="weight">200.59</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="../js/jquery-1.6.4.min.js"></script>
|
||||
<script src="../jquery.isotope.min.js"></script>
|
||||
<script>
|
||||
$(function(){
|
||||
|
||||
var $container = $('#container');
|
||||
|
||||
$container.isotope({
|
||||
itemSelector : '.element',
|
||||
layoutMode : 'fitRows'
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<footer>
|
||||
Isotope by <a href="http://desandro.com">David DeSandro</a> / <a href="http://metafizzy.co">Metafizzy</a>
|
||||
</footer>
|
||||
|
||||
</section> <!-- #content -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
355
sites/all/libraries/isotope-site/pages/5.html
Normal file
355
sites/all/libraries/isotope-site/pages/5.html
Normal file
@@ -0,0 +1,355 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<title>Infinite Scroll Page 5 · Isotope </title>
|
||||
|
||||
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
|
||||
<!-- scripts at bottom of page -->
|
||||
|
||||
</head>
|
||||
<body class="pages ">
|
||||
|
||||
<nav id="site-nav">
|
||||
<h1><a href="../index.html">Isotope</a></h1>
|
||||
|
||||
<h2>Docs</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../docs/introduction.html">Introduction</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/options.html">Options</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/methods.html">Methods</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/animating.html">Animating</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/extending-isotope.html">Extending Isotope</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/hash-history-jquery-bbq.html">Hash history with jQuery BBQ</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/help.html">Help</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/license.html">License</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Demos</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../demos/basic.html">Basic</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-complete.html">Elements Complete</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-partial.html">Elements Partial</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/relayout.html">reLayout</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/infinite-scroll.html">Infinite Scroll</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/images.html">Images</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/combination-filters.html">Combination filters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/hash-history.html">Hash history</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/fluid-responsive.html">Fluid / responsive</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Custom layout modes</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/centered-masonry.html">Centered Masonry</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/category-rows.html">Category rows</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-corner-stamp.html">Masonry corner stamp</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-gutters.html">Masonry gutters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/spine-align.html">Spine align</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2><a href="../tests/index.html">Tests</a></h2>
|
||||
|
||||
</nav> <!-- #site-nav -->
|
||||
|
||||
<section id="content">
|
||||
|
||||
<h1>Infinite Scroll Page 5</h1>
|
||||
|
||||
|
||||
<div id="container" class="variable-sizes">
|
||||
|
||||
|
||||
|
||||
<div class="element post-transition metal width2 height2 " data-symbol="Tl" data-category="post-transition">
|
||||
<p class="number">81</p>
|
||||
<h3 class="symbol">Tl</h3>
|
||||
<h2 class="name">Thallium</h2>
|
||||
<p class="weight">204.3833</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element post-transition metal width2 height2 " data-symbol="Pb" data-category="post-transition">
|
||||
<p class="number">82</p>
|
||||
<h3 class="symbol">Pb</h3>
|
||||
<h2 class="name">Lead</h2>
|
||||
<p class="weight">207.2</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element post-transition metal width2 height2 " data-symbol="Bi" data-category="post-transition">
|
||||
<p class="number">83</p>
|
||||
<h3 class="symbol">Bi</h3>
|
||||
<h2 class="name">Bismuth</h2>
|
||||
<p class="weight">208.9804</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element metalloid width2 height2 " data-symbol="Po" data-category="metalloid">
|
||||
<p class="number">84</p>
|
||||
<h3 class="symbol">Po</h3>
|
||||
<h2 class="name">Polonium</h2>
|
||||
<p class="weight">(209)</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element halogen nonmetal width2 height2 " data-symbol="At" data-category="halogen">
|
||||
<p class="number">85</p>
|
||||
<h3 class="symbol">At</h3>
|
||||
<h2 class="name">Astatine</h2>
|
||||
<p class="weight">(210)</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element noble-gas nonmetal width2 height2 " data-symbol="Rn" data-category="noble-gas">
|
||||
<p class="number">86</p>
|
||||
<h3 class="symbol">Rn</h3>
|
||||
<h2 class="name">Radon</h2>
|
||||
<p class="weight">(222)</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkali metal width2 height2 " data-symbol="Fr" data-category="alkali">
|
||||
<p class="number">87</p>
|
||||
<h3 class="symbol">Fr</h3>
|
||||
<h2 class="name">Francium</h2>
|
||||
<p class="weight">(223)</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkaline-earth metal width2 height2 " data-symbol="Ra" data-category="alkaline-earth">
|
||||
<p class="number">88</p>
|
||||
<h3 class="symbol">Ra</h3>
|
||||
<h2 class="name">Radium</h2>
|
||||
<p class="weight">(226)</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element actinoid metal inner-transition width2 height2 " data-symbol="Ac" data-category="actinoid">
|
||||
<p class="number">89</p>
|
||||
<h3 class="symbol">Ac</h3>
|
||||
<h2 class="name">Actinium</h2>
|
||||
<p class="weight">(227)</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element actinoid metal inner-transition width2 height2 " data-symbol="Th" data-category="actinoid">
|
||||
<p class="number">90</p>
|
||||
<h3 class="symbol">Th</h3>
|
||||
<h2 class="name">Thorium</h2>
|
||||
<p class="weight">232.03806</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element actinoid metal inner-transition width2 height2 " data-symbol="Pa" data-category="actinoid">
|
||||
<p class="number">91</p>
|
||||
<h3 class="symbol">Pa</h3>
|
||||
<h2 class="name">Protactinium</h2>
|
||||
<p class="weight">231.03588</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element actinoid metal inner-transition width2 height2 " data-symbol="U" data-category="actinoid">
|
||||
<p class="number">92</p>
|
||||
<h3 class="symbol">U</h3>
|
||||
<h2 class="name">Uranium</h2>
|
||||
<p class="weight">238.02891</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element actinoid metal inner-transition width2 height2 " data-symbol="Np" data-category="actinoid">
|
||||
<p class="number">93</p>
|
||||
<h3 class="symbol">Np</h3>
|
||||
<h2 class="name">Neptunium</h2>
|
||||
<p class="weight">(237)</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element actinoid metal inner-transition width2 height2 " data-symbol="Pu" data-category="actinoid">
|
||||
<p class="number">94</p>
|
||||
<h3 class="symbol">Pu</h3>
|
||||
<h2 class="name">Plutonium</h2>
|
||||
<p class="weight">(244)</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element actinoid metal inner-transition width2 height2 " data-symbol="Am" data-category="actinoid">
|
||||
<p class="number">95</p>
|
||||
<h3 class="symbol">Am</h3>
|
||||
<h2 class="name">Americium</h2>
|
||||
<p class="weight">(243)</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element actinoid metal inner-transition width2 height2 " data-symbol="Cm" data-category="actinoid">
|
||||
<p class="number">96</p>
|
||||
<h3 class="symbol">Cm</h3>
|
||||
<h2 class="name">Curium</h2>
|
||||
<p class="weight">(247)</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element actinoid metal inner-transition width2 height2 " data-symbol="Bk" data-category="actinoid">
|
||||
<p class="number">97</p>
|
||||
<h3 class="symbol">Bk</h3>
|
||||
<h2 class="name">Berkelium</h2>
|
||||
<p class="weight">(247)</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element actinoid metal inner-transition width2 height2 " data-symbol="Cf" data-category="actinoid">
|
||||
<p class="number">98</p>
|
||||
<h3 class="symbol">Cf</h3>
|
||||
<h2 class="name">Californium</h2>
|
||||
<p class="weight">(251)</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element actinoid metal inner-transition width2 height2 " data-symbol="Es" data-category="actinoid">
|
||||
<p class="number">99</p>
|
||||
<h3 class="symbol">Es</h3>
|
||||
<h2 class="name">Einsteinium</h2>
|
||||
<p class="weight">(252)</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element actinoid metal inner-transition width2 height2 " data-symbol="Fm" data-category="actinoid">
|
||||
<p class="number">100</p>
|
||||
<h3 class="symbol">Fm</h3>
|
||||
<h2 class="name">Fermium</h2>
|
||||
<p class="weight">(257)</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="../js/jquery-1.6.4.min.js"></script>
|
||||
<script src="../jquery.isotope.min.js"></script>
|
||||
<script>
|
||||
$(function(){
|
||||
|
||||
var $container = $('#container');
|
||||
|
||||
$container.isotope({
|
||||
itemSelector : '.element',
|
||||
layoutMode : 'fitRows'
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<footer>
|
||||
Isotope by <a href="http://desandro.com">David DeSandro</a> / <a href="http://metafizzy.co">Metafizzy</a>
|
||||
</footer>
|
||||
|
||||
</section> <!-- #content -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
339
sites/all/libraries/isotope-site/pages/6.html
Normal file
339
sites/all/libraries/isotope-site/pages/6.html
Normal file
@@ -0,0 +1,339 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<title>Infinite Scroll Page 6 · Isotope </title>
|
||||
|
||||
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
|
||||
<!-- scripts at bottom of page -->
|
||||
|
||||
</head>
|
||||
<body class="pages ">
|
||||
|
||||
<nav id="site-nav">
|
||||
<h1><a href="../index.html">Isotope</a></h1>
|
||||
|
||||
<h2>Docs</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../docs/introduction.html">Introduction</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/options.html">Options</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/methods.html">Methods</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/animating.html">Animating</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/extending-isotope.html">Extending Isotope</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/hash-history-jquery-bbq.html">Hash history with jQuery BBQ</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/help.html">Help</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/license.html">License</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Demos</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../demos/basic.html">Basic</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-complete.html">Elements Complete</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-partial.html">Elements Partial</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/relayout.html">reLayout</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/infinite-scroll.html">Infinite Scroll</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/images.html">Images</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/combination-filters.html">Combination filters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/hash-history.html">Hash history</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/fluid-responsive.html">Fluid / responsive</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Custom layout modes</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/centered-masonry.html">Centered Masonry</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/category-rows.html">Category rows</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-corner-stamp.html">Masonry corner stamp</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-gutters.html">Masonry gutters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/spine-align.html">Spine align</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2><a href="../tests/index.html">Tests</a></h2>
|
||||
|
||||
</nav> <!-- #site-nav -->
|
||||
|
||||
<section id="content">
|
||||
|
||||
<h1>Infinite Scroll Page 6</h1>
|
||||
|
||||
|
||||
<div id="container" class="variable-sizes">
|
||||
|
||||
|
||||
|
||||
<div class="element actinoid metal inner-transition width2 height2 " data-symbol="Md" data-category="actinoid">
|
||||
<p class="number">101</p>
|
||||
<h3 class="symbol">Md</h3>
|
||||
<h2 class="name">Mendelevium</h2>
|
||||
<p class="weight">(258)</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element actinoid metal inner-transition width2 height2 " data-symbol="No" data-category="actinoid">
|
||||
<p class="number">102</p>
|
||||
<h3 class="symbol">No</h3>
|
||||
<h2 class="name">Nobelium</h2>
|
||||
<p class="weight">(259)</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element actinoid metal inner-transition width2 height2 " data-symbol="Lr" data-category="actinoid">
|
||||
<p class="number">103</p>
|
||||
<h3 class="symbol">Lr</h3>
|
||||
<h2 class="name">Lawrencium</h2>
|
||||
<p class="weight">(262)</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal width2 height2 " data-symbol="Rf" data-category="transition">
|
||||
<p class="number">104</p>
|
||||
<h3 class="symbol">Rf</h3>
|
||||
<h2 class="name">Rutherfordium</h2>
|
||||
<p class="weight">(267)</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal width2 height2 " data-symbol="Db" data-category="transition">
|
||||
<p class="number">105</p>
|
||||
<h3 class="symbol">Db</h3>
|
||||
<h2 class="name">Dubnium</h2>
|
||||
<p class="weight">(268)</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal width2 height2 " data-symbol="Sg" data-category="transition">
|
||||
<p class="number">106</p>
|
||||
<h3 class="symbol">Sg</h3>
|
||||
<h2 class="name">Seaborgium</h2>
|
||||
<p class="weight">(271)</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal width2 height2 " data-symbol="Bh" data-category="transition">
|
||||
<p class="number">107</p>
|
||||
<h3 class="symbol">Bh</h3>
|
||||
<h2 class="name">Bohrium</h2>
|
||||
<p class="weight">(272)</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal width2 height2 " data-symbol="Hs" data-category="transition">
|
||||
<p class="number">108</p>
|
||||
<h3 class="symbol">Hs</h3>
|
||||
<h2 class="name">Hassium</h2>
|
||||
<p class="weight">(270)</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal width2 height2 " data-symbol="Mt" data-category="transition">
|
||||
<p class="number">109</p>
|
||||
<h3 class="symbol">Mt</h3>
|
||||
<h2 class="name">Meitnerium</h2>
|
||||
<p class="weight">(276)</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal width2 height2 " data-symbol="Ds" data-category="transition">
|
||||
<p class="number">110</p>
|
||||
<h3 class="symbol">Ds</h3>
|
||||
<h2 class="name">Darmstadtium</h2>
|
||||
<p class="weight">(281)</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal width2 height2 " data-symbol="Rg" data-category="transition">
|
||||
<p class="number">111</p>
|
||||
<h3 class="symbol">Rg</h3>
|
||||
<h2 class="name">Roentgenium</h2>
|
||||
<p class="weight">(280)</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal width2 height2 " data-symbol="Cn" data-category="transition">
|
||||
<p class="number">112</p>
|
||||
<h3 class="symbol">Cn</h3>
|
||||
<h2 class="name">Copernicium</h2>
|
||||
<p class="weight">(285)</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element post-transition metal width2 height2 " data-symbol="Uut" data-category="post-transition">
|
||||
<p class="number">113</p>
|
||||
<h3 class="symbol">Uut</h3>
|
||||
<h2 class="name">Ununtrium</h2>
|
||||
<p class="weight">(284)</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element post-transition metal width2 height2 " data-symbol="Uuq" data-category="post-transition">
|
||||
<p class="number">114</p>
|
||||
<h3 class="symbol">Uuq</h3>
|
||||
<h2 class="name">Ununquadium</h2>
|
||||
<p class="weight">(289)</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element post-transition metal width2 height2 " data-symbol="Uup" data-category="post-transition">
|
||||
<p class="number">115</p>
|
||||
<h3 class="symbol">Uup</h3>
|
||||
<h2 class="name">Ununpentium</h2>
|
||||
<p class="weight">(288)</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element post-transition metal width2 height2 " data-symbol="Uuh" data-category="post-transition">
|
||||
<p class="number">116</p>
|
||||
<h3 class="symbol">Uuh</h3>
|
||||
<h2 class="name">Ununhexium</h2>
|
||||
<p class="weight">(293)</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element halogen nonmetal width2 height2 " data-symbol="Uus" data-category="halogen">
|
||||
<p class="number">117</p>
|
||||
<h3 class="symbol">Uus</h3>
|
||||
<h2 class="name">Ununseptium</h2>
|
||||
<p class="weight">(294)</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element noble-gas nonmetal width2 height2 " data-symbol="Uuo" data-category="noble-gas">
|
||||
<p class="number">118</p>
|
||||
<h3 class="symbol">Uuo</h3>
|
||||
<h2 class="name">Ununoctium</h2>
|
||||
<p class="weight">(294)</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="../js/jquery-1.6.4.min.js"></script>
|
||||
<script src="../jquery.isotope.min.js"></script>
|
||||
<script>
|
||||
$(function(){
|
||||
|
||||
var $container = $('#container');
|
||||
|
||||
$container.isotope({
|
||||
itemSelector : '.element',
|
||||
layoutMode : 'fitRows'
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<footer>
|
||||
Isotope by <a href="http://desandro.com">David DeSandro</a> / <a href="http://metafizzy.co">Metafizzy</a>
|
||||
</footer>
|
||||
|
||||
</section> <!-- #content -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
511
sites/all/libraries/isotope-site/tests/callbacks.html
Normal file
511
sites/all/libraries/isotope-site/tests/callbacks.html
Normal file
@@ -0,0 +1,511 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<title>Callbacks · Isotope </title>
|
||||
|
||||
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
|
||||
<!-- scripts at bottom of page -->
|
||||
|
||||
</head>
|
||||
<body class="tests ">
|
||||
|
||||
<nav id="site-nav">
|
||||
<h1><a href="../index.html">Isotope</a></h1>
|
||||
|
||||
<h2>Docs</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../docs/introduction.html">Introduction</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/options.html">Options</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/methods.html">Methods</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/animating.html">Animating</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/extending-isotope.html">Extending Isotope</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/hash-history-jquery-bbq.html">Hash history with jQuery BBQ</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/help.html">Help</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/license.html">License</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Demos</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../demos/basic.html">Basic</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-complete.html">Elements Complete</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-partial.html">Elements Partial</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/relayout.html">reLayout</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/infinite-scroll.html">Infinite Scroll</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/images.html">Images</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/combination-filters.html">Combination filters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/hash-history.html">Hash history</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/fluid-responsive.html">Fluid / responsive</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Custom layout modes</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/centered-masonry.html">Centered Masonry</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/category-rows.html">Category rows</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-corner-stamp.html">Masonry corner stamp</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-gutters.html">Masonry gutters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/spine-align.html">Spine align</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2><a href="../tests/index.html">Tests</a></h2>
|
||||
|
||||
</nav> <!-- #site-nav -->
|
||||
|
||||
<section id="content">
|
||||
|
||||
<h1>Callbacks</h1>
|
||||
|
||||
|
||||
<section id="copy">
|
||||
<p>Tests that callbacks are triggering properly, after animation/transition has completed.</p>
|
||||
|
||||
</section>
|
||||
|
||||
<section id="options" class="clearfix">
|
||||
|
||||
|
||||
<h3>Filters</h3>
|
||||
|
||||
<ul id="filters" class="option-set clearfix" data-option-key="filter">
|
||||
<li><a href="#filter" data-option-value="*" class="selected">show all</a></li>
|
||||
<li><a href="#filter" data-option-value=".metal">metal</a></li>
|
||||
<li><a href="#filter" data-option-value=".transition">transition</a></li>
|
||||
<li><a href="#filter" data-option-value=".post-transition">post-transition</a></li>
|
||||
<li><a href="#filter" data-option-value=".nonmetal">nonmetal</a></li>
|
||||
<li><a href="#filter" data-option-value=".inner-transition">inner-transition</a></li>
|
||||
<li><a href="#filter" data-option-value=".alkali, .alkaline-earth">alkali and alkaline-earth</a></li>
|
||||
<li><a href="#filter" data-option-value=":not(.transition)">not transition</a></li>
|
||||
<li><a href="#filter" data-option-value=".metal:not(.transition)">metal but not transition</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<h3>Sort</h3>
|
||||
|
||||
<ul id="sort-by" class="option-set clearfix" data-option-key="sortBy">
|
||||
<li><a href="#sortBy=original-order" data-option-value="original-order" class="selected" data>original-order</a></li>
|
||||
<li><a href="#sortBy=name" data-option-value="name">name</a></li>
|
||||
<li><a href="#sortBy=symbol" data-option-value="symbol">symbol</a></li>
|
||||
<li><a href="#sortBy=number" data-option-value="number">number</a></li>
|
||||
<li><a href="#sortBy=weight" data-option-value="weight">weight</a></li>
|
||||
<li><a href="#sortBy=category" data-option-value="category">category</a></li>
|
||||
<li><a href="#sortBy=random" data-option-value="random">random</a></li>
|
||||
</ul>
|
||||
|
||||
<h3>Sort direction</h3>
|
||||
|
||||
<ul id="sort-direction" class="option-set clearfix" data-option-key="sortAscending">
|
||||
<li><a href="#sortAscending=true" data-option-value="true" class="selected">sort ascending</a></li>
|
||||
<li><a href="#sortAscending=false" data-option-value="false">sort descending</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h3>Etc</h3>
|
||||
|
||||
<ul id="etc" class="clearfix">
|
||||
<li id="toggle-sizes"><a href="#toggle-sizes">Toggle variable sizes</a></li>
|
||||
<li id="insert"><a href="#insert">Insert new elements</a></li>
|
||||
<li id="append"><a href='#append'>Append new elements</a></li>
|
||||
<li id="shuffle"><a href='#shuffle'>Shuffle</a></li>
|
||||
</ul>
|
||||
|
||||
</section> <!-- #options -->
|
||||
|
||||
<div id="container" class="clickable variable-sizes clearfix">
|
||||
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Hg" data-category="transition">
|
||||
<p class="number">80</p>
|
||||
<h3 class="symbol">Hg</h3>
|
||||
<h2 class="name">Mercury</h2>
|
||||
<p class="weight">200.59</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element metalloid " data-symbol="Te" data-category="metalloid">
|
||||
<p class="number">52</p>
|
||||
<h3 class="symbol">Te</h3>
|
||||
<h2 class="name">Tellurium</h2>
|
||||
<p class="weight">127.6</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element post-transition metal " data-symbol="Bi" data-category="post-transition">
|
||||
<p class="number">83</p>
|
||||
<h3 class="symbol">Bi</h3>
|
||||
<h2 class="name">Bismuth</h2>
|
||||
<p class="weight">208.9804</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Cd" data-category="transition">
|
||||
<p class="number">48</p>
|
||||
<h3 class="symbol">Cd</h3>
|
||||
<h2 class="name">Cadmium</h2>
|
||||
<p class="weight">112.411</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element alkaline-earth metal " data-symbol="Ca" data-category="alkaline-earth">
|
||||
<p class="number">20</p>
|
||||
<h3 class="symbol">Ca</h3>
|
||||
<h2 class="name">Calcium</h2>
|
||||
<p class="weight">40.078</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Re" data-category="transition">
|
||||
<p class="number">75</p>
|
||||
<h3 class="symbol">Re</h3>
|
||||
<h2 class="name">Rhenium</h2>
|
||||
<p class="weight">186.207</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element post-transition metal " data-symbol="Tl" data-category="post-transition">
|
||||
<p class="number">81</p>
|
||||
<h3 class="symbol">Tl</h3>
|
||||
<h2 class="name">Thallium</h2>
|
||||
<p class="weight">204.3833</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element metalloid " data-symbol="Sb" data-category="metalloid">
|
||||
<p class="number">51</p>
|
||||
<h3 class="symbol">Sb</h3>
|
||||
<h2 class="name">Antimony</h2>
|
||||
<p class="weight">121.76</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Co" data-category="transition">
|
||||
<p class="number">27</p>
|
||||
<h3 class="symbol">Co</h3>
|
||||
<h2 class="name">Cobalt</h2>
|
||||
<p class="weight">58.933195</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element lanthanoid metal inner-transition " data-symbol="Lu" data-category="lanthanoid">
|
||||
<p class="number">71</p>
|
||||
<h3 class="symbol">Lu</h3>
|
||||
<h2 class="name">Lutetium</h2>
|
||||
<p class="weight">174.9668</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element noble-gas nonmetal " data-symbol="Ar" data-category="noble-gas">
|
||||
<p class="number">18</p>
|
||||
<h3 class="symbol">Ar</h3>
|
||||
<h2 class="name">Argon</h2>
|
||||
<p class="weight">39.948</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element alkali metal " data-symbol="Rb" data-category="alkali">
|
||||
<p class="number">37</p>
|
||||
<h3 class="symbol">Rb</h3>
|
||||
<h2 class="name">Rubidium</h2>
|
||||
<p class="weight">85.4678</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="N" data-category="other">
|
||||
<p class="number">7</p>
|
||||
<h3 class="symbol">N</h3>
|
||||
<h2 class="name">Nitrogen</h2>
|
||||
<p class="weight">14.0067</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element actinoid metal inner-transition " data-symbol="Np" data-category="actinoid">
|
||||
<p class="number">93</p>
|
||||
<h3 class="symbol">Np</h3>
|
||||
<h2 class="name">Neptunium</h2>
|
||||
<p class="weight">(237)</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element actinoid metal inner-transition " data-symbol="Ac" data-category="actinoid">
|
||||
<p class="number">89</p>
|
||||
<h3 class="symbol">Ac</h3>
|
||||
<h2 class="name">Actinium</h2>
|
||||
<p class="weight">(227)</p>
|
||||
</div>
|
||||
|
||||
</div> <!-- #container -->
|
||||
|
||||
|
||||
<script src="../js/jquery-1.6.4.min.js"></script>
|
||||
<script src="../jquery.isotope.min.js"></script>
|
||||
<script src="../js/fake-element.js"></script>
|
||||
<script>
|
||||
|
||||
$(function(){
|
||||
|
||||
var $container = $('#container');
|
||||
|
||||
|
||||
// add randomish size classes
|
||||
$container.find('.element').each(function(){
|
||||
var $this = $(this),
|
||||
number = parseInt( $this.find('.number').text(), 10 );
|
||||
if ( number % 7 % 2 === 1 ) {
|
||||
$this.addClass('width2');
|
||||
}
|
||||
if ( number % 3 === 0 ) {
|
||||
$this.addClass('height2');
|
||||
}
|
||||
});
|
||||
|
||||
var colors = ['red', 'green', 'blue', 'yellow', 'purple', 'orange', 'white'],
|
||||
colorI = 0;
|
||||
|
||||
function changeBGColor() {
|
||||
var color = colors[ colorI % colors.length ];
|
||||
$container.css({ background: color })
|
||||
colorI++;
|
||||
}
|
||||
|
||||
$container.isotope({
|
||||
itemSelector : '.element',
|
||||
masonry : {
|
||||
columnWidth : 120
|
||||
},
|
||||
masonryHorizontal : {
|
||||
rowHeight: 120
|
||||
},
|
||||
cellsByRow : {
|
||||
columnWidth : 240,
|
||||
rowHeight : 240
|
||||
},
|
||||
cellsByColumn : {
|
||||
columnWidth : 240,
|
||||
rowHeight : 240
|
||||
},
|
||||
getSortData : {
|
||||
symbol : function( $elem ) {
|
||||
return $elem.attr('data-symbol');
|
||||
},
|
||||
category : function( $elem ) {
|
||||
return $elem.attr('data-category');
|
||||
},
|
||||
number : function( $elem ) {
|
||||
return parseInt( $elem.find('.number').text(), 10 );
|
||||
},
|
||||
weight : function( $elem ) {
|
||||
return parseFloat( $elem.find('.weight').text().replace( /[\(\)]/g, '') );
|
||||
},
|
||||
name : function ( $elem ) {
|
||||
return $elem.find('.name').text();
|
||||
}
|
||||
}
|
||||
}, changeBGColor );
|
||||
|
||||
|
||||
var $optionSets = $('#options .option-set'),
|
||||
$optionLinks = $optionSets.find('a');
|
||||
|
||||
$optionLinks.click(function(){
|
||||
var $this = $(this);
|
||||
// don't proceed if already selected
|
||||
if ( $this.hasClass('selected') ) {
|
||||
return false;
|
||||
}
|
||||
var $optionSet = $this.parents('.option-set');
|
||||
$optionSet.find('.selected').removeClass('selected');
|
||||
$this.addClass('selected');
|
||||
|
||||
// make option object dynamically, i.e. { filter: '.my-filter-class' }
|
||||
var options = {},
|
||||
key = $optionSet.attr('data-option-key'),
|
||||
value = $this.attr('data-option-value');
|
||||
// parse 'false' as false boolean
|
||||
value = value === 'false' ? false : value;
|
||||
options[ key ] = value;
|
||||
if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
|
||||
// changes in layout modes need extra logic
|
||||
changeLayoutMode( $this, options )
|
||||
} else {
|
||||
// otherwise, apply new options
|
||||
$container.isotope( options, changeBGColor );
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
|
||||
$('#insert a').click(function(){
|
||||
var $newEls = $( fakeElement.getGroup() );
|
||||
$container.isotope( 'insert', $newEls, changeBGColor );
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
$('#append a').click(function(){
|
||||
var $newEls = $( fakeElement.getGroup() );
|
||||
$container.append( $newEls ).isotope( 'appended', $newEls, changeBGColor );
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
// change size of clicked element
|
||||
$container.delegate( '.element', 'click', function(){
|
||||
$(this).toggleClass('large');
|
||||
$container.isotope( 'reLayout', changeBGColor );
|
||||
});
|
||||
|
||||
// toggle variable sizes of all elements
|
||||
$('#toggle-sizes').find('a').click(function(){
|
||||
$container
|
||||
.toggleClass('variable-sizes')
|
||||
.isotope( 'reLayout', changeBGColor );
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
var $sortBy = $('#sort-by');
|
||||
$('#shuffle a').click(function(){
|
||||
$container.isotope( 'shuffle', changeBGColor );
|
||||
$sortBy.find('.selected').removeClass('selected');
|
||||
$sortBy.find('[data-option-value="random"]').addClass('selected');
|
||||
return false;
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<footer>
|
||||
Isotope by <a href="http://desandro.com">David DeSandro</a> / <a href="http://metafizzy.co">Metafizzy</a>
|
||||
</footer>
|
||||
|
||||
</section> <!-- #content -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
376
sites/all/libraries/isotope-site/tests/destroy.html
Normal file
376
sites/all/libraries/isotope-site/tests/destroy.html
Normal file
@@ -0,0 +1,376 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<title>destroy · Isotope </title>
|
||||
|
||||
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
|
||||
<!-- scripts at bottom of page -->
|
||||
|
||||
</head>
|
||||
<body class="tests ">
|
||||
|
||||
<nav id="site-nav">
|
||||
<h1><a href="../index.html">Isotope</a></h1>
|
||||
|
||||
<h2>Docs</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../docs/introduction.html">Introduction</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/options.html">Options</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/methods.html">Methods</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/animating.html">Animating</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/extending-isotope.html">Extending Isotope</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/hash-history-jquery-bbq.html">Hash history with jQuery BBQ</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/help.html">Help</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/license.html">License</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Demos</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../demos/basic.html">Basic</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-complete.html">Elements Complete</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-partial.html">Elements Partial</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/relayout.html">reLayout</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/infinite-scroll.html">Infinite Scroll</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/images.html">Images</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/combination-filters.html">Combination filters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/hash-history.html">Hash history</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/fluid-responsive.html">Fluid / responsive</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Custom layout modes</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/centered-masonry.html">Centered Masonry</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/category-rows.html">Category rows</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-corner-stamp.html">Masonry corner stamp</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-gutters.html">Masonry gutters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/spine-align.html">Spine align</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2><a href="../tests/index.html">Tests</a></h2>
|
||||
|
||||
</nav> <!-- #site-nav -->
|
||||
|
||||
<section id="content">
|
||||
|
||||
<h1>destroy</h1>
|
||||
|
||||
|
||||
<style>
|
||||
#container {
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<section id="copy">
|
||||
<p>Click <em>init</em> button the <em>destroy</em>. Original CSS, pre-init, should be re-applied, all items back to visibility.</p>
|
||||
</section>
|
||||
|
||||
<section id="options">
|
||||
<button id="init">Init Isotope instance</button>
|
||||
<button id="destroy">Destroy Isotope instance</button>
|
||||
</section>
|
||||
|
||||
<div id="container" style="height: 600px">
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="H" data-category="other">
|
||||
<p class="number">1</p>
|
||||
<h3 class="symbol">H</h3>
|
||||
<h2 class="name">Hydrogen</h2>
|
||||
<p class="weight">1.00794</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element noble-gas nonmetal " data-symbol="He" data-category="noble-gas">
|
||||
<p class="number">2</p>
|
||||
<h3 class="symbol">He</h3>
|
||||
<h2 class="name">Helium</h2>
|
||||
<p class="weight">4.002602</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkali metal " data-symbol="Li" data-category="alkali">
|
||||
<p class="number">3</p>
|
||||
<h3 class="symbol">Li</h3>
|
||||
<h2 class="name">Lithium</h2>
|
||||
<p class="weight">6.941</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkaline-earth metal " data-symbol="Be" data-category="alkaline-earth">
|
||||
<p class="number">4</p>
|
||||
<h3 class="symbol">Be</h3>
|
||||
<h2 class="name">Beryllium</h2>
|
||||
<p class="weight">9.012182</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element metalloid " data-symbol="B" data-category="metalloid">
|
||||
<p class="number">5</p>
|
||||
<h3 class="symbol">B</h3>
|
||||
<h2 class="name">Boron</h2>
|
||||
<p class="weight">10.811</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="C" data-category="other">
|
||||
<p class="number">6</p>
|
||||
<h3 class="symbol">C</h3>
|
||||
<h2 class="name">Carbon</h2>
|
||||
<p class="weight">12.0107</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="N" data-category="other">
|
||||
<p class="number">7</p>
|
||||
<h3 class="symbol">N</h3>
|
||||
<h2 class="name">Nitrogen</h2>
|
||||
<p class="weight">14.0067</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="O" data-category="other">
|
||||
<p class="number">8</p>
|
||||
<h3 class="symbol">O</h3>
|
||||
<h2 class="name">Oxygen</h2>
|
||||
<p class="weight">15.9994</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element halogen nonmetal " data-symbol="F" data-category="halogen">
|
||||
<p class="number">9</p>
|
||||
<h3 class="symbol">F</h3>
|
||||
<h2 class="name">Fluorine</h2>
|
||||
<p class="weight">18.9984032</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element noble-gas nonmetal " data-symbol="Ne" data-category="noble-gas">
|
||||
<p class="number">10</p>
|
||||
<h3 class="symbol">Ne</h3>
|
||||
<h2 class="name">Neon</h2>
|
||||
<p class="weight">20.1797</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkali metal " data-symbol="Na" data-category="alkali">
|
||||
<p class="number">11</p>
|
||||
<h3 class="symbol">Na</h3>
|
||||
<h2 class="name">Sodium</h2>
|
||||
<p class="weight">22.98976928</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkaline-earth metal " data-symbol="Mg" data-category="alkaline-earth">
|
||||
<p class="number">12</p>
|
||||
<h3 class="symbol">Mg</h3>
|
||||
<h2 class="name">Magnesium</h2>
|
||||
<p class="weight">24.305</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element post-transition metal " data-symbol="Al" data-category="post-transition">
|
||||
<p class="number">13</p>
|
||||
<h3 class="symbol">Al</h3>
|
||||
<h2 class="name">Aluminium</h2>
|
||||
<p class="weight">26.9815386</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element metalloid " data-symbol="Si" data-category="metalloid">
|
||||
<p class="number">14</p>
|
||||
<h3 class="symbol">Si</h3>
|
||||
<h2 class="name">Silicon</h2>
|
||||
<p class="weight">28.0855</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="P" data-category="other">
|
||||
<p class="number">15</p>
|
||||
<h3 class="symbol">P</h3>
|
||||
<h2 class="name">Phosphorus</h2>
|
||||
<p class="weight">30.973762</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="S" data-category="other">
|
||||
<p class="number">16</p>
|
||||
<h3 class="symbol">S</h3>
|
||||
<h2 class="name">Sulfur</h2>
|
||||
<p class="weight">32.065</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element halogen nonmetal " data-symbol="Cl" data-category="halogen">
|
||||
<p class="number">17</p>
|
||||
<h3 class="symbol">Cl</h3>
|
||||
<h2 class="name">Chlorine</h2>
|
||||
<p class="weight">35.453</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element noble-gas nonmetal " data-symbol="Ar" data-category="noble-gas">
|
||||
<p class="number">18</p>
|
||||
<h3 class="symbol">Ar</h3>
|
||||
<h2 class="name">Argon</h2>
|
||||
<p class="weight">39.948</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkali metal " data-symbol="K" data-category="alkali">
|
||||
<p class="number">19</p>
|
||||
<h3 class="symbol">K</h3>
|
||||
<h2 class="name">Potassium</h2>
|
||||
<p class="weight">39.0983</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkaline-earth metal " data-symbol="Ca" data-category="alkaline-earth">
|
||||
<p class="number">20</p>
|
||||
<h3 class="symbol">Ca</h3>
|
||||
<h2 class="name">Calcium</h2>
|
||||
<p class="weight">40.078</p>
|
||||
</div>
|
||||
|
||||
</div> <!-- #container -->
|
||||
|
||||
<script src="../js/jquery-1.6.4.min.js"></script>
|
||||
<script src="../jquery.isotope.min.js"></script>
|
||||
<script>
|
||||
$(function(){
|
||||
|
||||
var $container = $('#container');
|
||||
|
||||
$('#init').click(function(){
|
||||
$container.isotope({
|
||||
itemSelector: '.element',
|
||||
filter: '.metal'
|
||||
});
|
||||
});
|
||||
|
||||
$('#destroy').click(function(){
|
||||
$container.isotope('destroy');
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<footer>
|
||||
Isotope by <a href="http://desandro.com">David DeSandro</a> / <a href="http://metafizzy.co">Metafizzy</a>
|
||||
</footer>
|
||||
|
||||
</section> <!-- #content -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
1478
sites/all/libraries/isotope-site/tests/elements-complete-test.html
Normal file
1478
sites/all/libraries/isotope-site/tests/elements-complete-test.html
Normal file
File diff suppressed because it is too large
Load Diff
327
sites/all/libraries/isotope-site/tests/flash.html
Normal file
327
sites/all/libraries/isotope-site/tests/flash.html
Normal file
@@ -0,0 +1,327 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<title>flash · Isotope </title>
|
||||
|
||||
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
|
||||
<!-- scripts at bottom of page -->
|
||||
|
||||
</head>
|
||||
<body class="tests ">
|
||||
|
||||
<nav id="site-nav">
|
||||
<h1><a href="../index.html">Isotope</a></h1>
|
||||
|
||||
<h2>Docs</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../docs/introduction.html">Introduction</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/options.html">Options</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/methods.html">Methods</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/animating.html">Animating</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/extending-isotope.html">Extending Isotope</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/hash-history-jquery-bbq.html">Hash history with jQuery BBQ</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/help.html">Help</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/license.html">License</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Demos</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../demos/basic.html">Basic</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-complete.html">Elements Complete</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-partial.html">Elements Partial</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/relayout.html">reLayout</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/infinite-scroll.html">Infinite Scroll</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/images.html">Images</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/combination-filters.html">Combination filters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/hash-history.html">Hash history</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/fluid-responsive.html">Fluid / responsive</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Custom layout modes</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/centered-masonry.html">Centered Masonry</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/category-rows.html">Category rows</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-corner-stamp.html">Masonry corner stamp</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-gutters.html">Masonry gutters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/spine-align.html">Spine align</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2><a href="../tests/index.html">Tests</a></h2>
|
||||
|
||||
</nav> <!-- #site-nav -->
|
||||
|
||||
<section id="content">
|
||||
|
||||
<h1>flash</h1>
|
||||
|
||||
|
||||
<style>
|
||||
.item {
|
||||
width: 500px;
|
||||
margin: 5px;
|
||||
float: left;
|
||||
background: #333;
|
||||
}
|
||||
|
||||
.isotope .isotope-item {
|
||||
-webkit-transition-property: top, left, opacity;
|
||||
-moz-transition-property: top, left, opacity;
|
||||
transition-property: top, left, opacity;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<section id="copy">
|
||||
<p>Flash content like YouTube or Vimeo videos</p>
|
||||
</section>
|
||||
|
||||
<section id="options" class="clearfix">
|
||||
|
||||
<h3>Filters</h3>
|
||||
|
||||
<ul id="filters" class="option-set clearfix" data-option-key="filter">
|
||||
<li><a href="#filter-show-all" data-option-value="*" class="selected">show all</a></li>
|
||||
<li><a href="#filter-link" data-option-value=".link">link</a></li>
|
||||
<li><a href="#filter-audio" data-option-value=".audio">audio</a></li>
|
||||
<li><a href="#filter-video" data-option-value=".video">video</a></li>
|
||||
<li><a href="#filter-photo" data-option-value=".photo">photo</a></li>
|
||||
</ul>
|
||||
|
||||
</section> <!-- #options -->
|
||||
|
||||
<div id="container" class="clearfix">
|
||||
|
||||
<div class="item video">
|
||||
|
||||
<object width="500" height="305"><param name="movie" value="http://www.youtube.com/v/GaoLU6zKaws&rel=0&egm=0&showinfo=0&fs=1"><param name="wmode" value="transparent"><param name="allowFullScreen" value="true"><embed src="http://www.youtube.com/v/GaoLU6zKaws&rel=0&egm=0&showinfo=0&fs=1" type="application/x-shockwave-flash" width="500" height="305" allowfullscreen="true" wmode="transparent"></object>
|
||||
|
||||
<p>Sexy Sax Man (Careless Whisper Saxophone Prank!!) directors cut (by <a href="http://www.youtube.com/watch?v=GaoLU6zKaws&feature=youtu.be">mikedahlquist</a>)</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="item photo">
|
||||
<figure class="content">
|
||||
<a href="http://danimaree.tumblr.com"><img src="http://29.media.tumblr.com/tumblr_lhbbz91Wg51qa5ylbo1_500.gif" alt="WIN"></a>
|
||||
<figcaption><p>WIN</p></figcaption>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="item audio">
|
||||
<figure class="content audio">
|
||||
|
||||
<script type="text/javascript" language="javascript" src="http://assets.tumblr.com/javascript/tumblelog.js?505"></script><span id="audio_player_3674118149">[<a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" target="_blank">Flash 9</a> is required to listen to audio.]</span><script type="text/javascript">replaceIfFlash(9,"audio_player_3674118149",'\x3cdiv class=\x22audio_player\x22\x3e<embed type="application/x-shockwave-flash" src="http://assets.tumblr.com/swf/audio_player_black.swf?audio_file=http://www.tumblr.com/audio_file/3674118149/tumblr_lhmdlpR0Kl1qashpb&color=FFFFFF" height="27" width="207" quality="best"></embed>\x3c/div\x3e')</script>
|
||||
Smashing Pumpkins
|
||||
<em>Set The Ray To Jerry</em>
|
||||
Judas 0: B-Sides and Rarities
|
||||
<figcaption><blockquote>
|
||||
<p>I’ll believe until the day I die that the Smashing Pumpkins were more unique and more complex than most people will ever give them credit for. But I also understand that casual listeners aren’t going to go out of their way to hear the hundreds of lesser-known Pumpkins tracks that are often just as good as anything that’s made its way onto an album. So I’m telling you to start with “Set the Ray to Jerry.”</p>
|
||||
</blockquote>
|
||||
|
||||
<p>— Ross McGowan <a href="http://www.stylusmagazine.com/articles/seconds/the-smashing-pumpkins-set-the-ray-to-jerry.htm">The Smashing Pumpkins: Set the Ray to Jerry</a></p></figcaption>
|
||||
</figure>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="item photo">
|
||||
<figure class="content photo">
|
||||
<a href="http://zenibyfajnie.deviantart.com/art/and-there-s-a-light-on-171400460"><img src="http://27.media.tumblr.com/tumblr_lh8j1hUuvO1qashpbo1_500.jpg" alt="and there&#8217;s a light on by *zenibyfajnie on deviantART"></a>
|
||||
<figcaption><p><a href="http://zenibyfajnie.deviantart.com/art/and-there-s-a-light-on-171400460">and there’s a light on by *zenibyfajnie on deviantART</a></p></figcaption>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="item link">
|
||||
<h2><a href="http://www.kaplusa.com/blog/2011/01/twitter-icon-evolution/" >KA+A : Blog : Iconoclast – A Twitter Icon’s Journey From Discreet to Disaster</a></h2>
|
||||
<p>Via <a href="https://twitter.com/kristianindy/status/31100858091442178">kristianindy</a></p>
|
||||
</div>
|
||||
|
||||
<div class="item video">
|
||||
<figure class="content video">
|
||||
<object width="500" height="305"><param name="movie" value="http://www.youtube.com/v/7g0We1DY7WI&rel=0&egm=0&showinfo=0&fs=1"></param><param name="wmode" value="transparent"></param><param name="allowFullScreen" value="true"></param><embed src="http://www.youtube.com/v/7g0We1DY7WI&rel=0&egm=0&showinfo=0&fs=1" type="application/x-shockwave-flash" width="500" height="305" allowFullScreen="true" wmode="transparent"></embed></object>
|
||||
<figcaption><p><a href="http://www.youtube.com/watch?v=7g0We1DY7WI">Aloha - Ruins [Live @ DC 9 - Washington, DC - 4/15/10]</a> (via <a href="http://youtube.com/user/alohaband1">alohaband1</a>)</p>
|
||||
|
||||
<p>I was at this show. This is my favorite song from 2010. I love Aloha so much.</p></figcaption>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="item video">
|
||||
<iframe title="YouTube video player" width="500" height="311" src="http://www.youtube.com/embed/7g0We1DY7WI" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
|
||||
|
||||
</div> <!-- #container -->
|
||||
|
||||
<script src="../js/jquery-1.6.4.min.js"></script>
|
||||
<script src="../jquery.isotope.min.js"></script>
|
||||
<script>
|
||||
|
||||
$(function(){
|
||||
|
||||
var $container = $('#container');
|
||||
|
||||
$container.imagesLoaded(function(){
|
||||
$container.isotope({
|
||||
transformsEnabled: false,
|
||||
visibleStyle: { opacity: 1 },
|
||||
hiddenStyle: { opacity: 0 }
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
var $optionSets = $('#options .option-set'),
|
||||
$optionLinks = $optionSets.find('a');
|
||||
|
||||
$optionLinks.click(function(){
|
||||
var $this = $(this);
|
||||
// don't proceed if already selected
|
||||
if ( $this.hasClass('selected') ) {
|
||||
return false;
|
||||
}
|
||||
var $optionSet = $this.parents('.option-set');
|
||||
$optionSet.find('.selected').removeClass('selected');
|
||||
$this.addClass('selected');
|
||||
|
||||
// make option object dynamically, i.e. { filter: '.my-filter-class' }
|
||||
var options = {},
|
||||
key = $optionSet.attr('data-option-key'),
|
||||
value = $this.attr('data-option-value');
|
||||
// parse 'false' as false boolean
|
||||
value = value === 'false' ? false : value;
|
||||
options[ key ] = value;
|
||||
if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
|
||||
// changes in layout modes need extra logic
|
||||
changeLayoutMode( $this, options )
|
||||
} else {
|
||||
// otherwise, apply new options
|
||||
$container.isotope( options );
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<footer>
|
||||
Isotope by <a href="http://desandro.com">David DeSandro</a> / <a href="http://metafizzy.co">Metafizzy</a>
|
||||
</footer>
|
||||
|
||||
</section> <!-- #content -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
221
sites/all/libraries/isotope-site/tests/index.html
Normal file
221
sites/all/libraries/isotope-site/tests/index.html
Normal file
@@ -0,0 +1,221 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<title>Tests Index · Isotope </title>
|
||||
|
||||
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
|
||||
<!-- scripts at bottom of page -->
|
||||
|
||||
</head>
|
||||
<body class="tests ">
|
||||
|
||||
<nav id="site-nav">
|
||||
<h1><a href="../index.html">Isotope</a></h1>
|
||||
|
||||
<h2>Docs</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../docs/introduction.html">Introduction</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/options.html">Options</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/methods.html">Methods</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/animating.html">Animating</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/extending-isotope.html">Extending Isotope</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/hash-history-jquery-bbq.html">Hash history with jQuery BBQ</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/help.html">Help</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/license.html">License</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Demos</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../demos/basic.html">Basic</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-complete.html">Elements Complete</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-partial.html">Elements Partial</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/relayout.html">reLayout</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/infinite-scroll.html">Infinite Scroll</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/images.html">Images</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/combination-filters.html">Combination filters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/hash-history.html">Hash history</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/fluid-responsive.html">Fluid / responsive</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Custom layout modes</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/centered-masonry.html">Centered Masonry</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/category-rows.html">Category rows</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-corner-stamp.html">Masonry corner stamp</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-gutters.html">Masonry gutters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/spine-align.html">Spine align</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2><a href="../tests/index.html">Tests</a></h2>
|
||||
|
||||
</nav> <!-- #site-nav -->
|
||||
|
||||
<section id="content">
|
||||
|
||||
<h1>Tests Index</h1>
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
|
||||
|
||||
<li><a href="../tests/destroy.html">destroy</a></li>
|
||||
|
||||
|
||||
|
||||
<li><a href="../tests/flash.html">flash</a></li>
|
||||
|
||||
|
||||
|
||||
<li><a href="../tests/no-items.html">no items</a></li>
|
||||
|
||||
|
||||
|
||||
<li><a href="../tests/item-position-data.html">item position data</a></li>
|
||||
|
||||
|
||||
|
||||
<li><a href="../tests/jquery-animation.html">jquery animation</a></li>
|
||||
|
||||
|
||||
|
||||
<li><a href="../tests/elements-complete-test.html">elements complete test</a></li>
|
||||
|
||||
|
||||
|
||||
<li><a href="../tests/tiny-text.html">Tiny text</a></li>
|
||||
|
||||
|
||||
|
||||
<li><a href="../tests/right-to-left.html">Right to left</a></li>
|
||||
|
||||
|
||||
|
||||
<li><a href="../tests/unclickable-filtered.html">Unclickable filtered</a></li>
|
||||
|
||||
|
||||
|
||||
<li><a href="../tests/callbacks.html">Callbacks</a></li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<footer>
|
||||
Isotope by <a href="http://desandro.com">David DeSandro</a> / <a href="http://metafizzy.co">Metafizzy</a>
|
||||
</footer>
|
||||
|
||||
</section> <!-- #content -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
632
sites/all/libraries/isotope-site/tests/item-position-data.html
Normal file
632
sites/all/libraries/isotope-site/tests/item-position-data.html
Normal file
@@ -0,0 +1,632 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<title>item position data · Isotope </title>
|
||||
|
||||
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
|
||||
<!-- scripts at bottom of page -->
|
||||
|
||||
</head>
|
||||
<body class="tests ">
|
||||
|
||||
<nav id="site-nav">
|
||||
<h1><a href="../index.html">Isotope</a></h1>
|
||||
|
||||
<h2>Docs</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../docs/introduction.html">Introduction</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/options.html">Options</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/methods.html">Methods</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/animating.html">Animating</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/extending-isotope.html">Extending Isotope</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/hash-history-jquery-bbq.html">Hash history with jQuery BBQ</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/help.html">Help</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/license.html">License</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Demos</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../demos/basic.html">Basic</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-complete.html">Elements Complete</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-partial.html">Elements Partial</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/relayout.html">reLayout</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/infinite-scroll.html">Infinite Scroll</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/images.html">Images</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/combination-filters.html">Combination filters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/hash-history.html">Hash history</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/fluid-responsive.html">Fluid / responsive</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Custom layout modes</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/centered-masonry.html">Centered Masonry</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/category-rows.html">Category rows</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-corner-stamp.html">Masonry corner stamp</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-gutters.html">Masonry gutters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/spine-align.html">Spine align</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2><a href="../tests/index.html">Tests</a></h2>
|
||||
|
||||
</nav> <!-- #site-nav -->
|
||||
|
||||
<section id="content">
|
||||
|
||||
<h1>item position data</h1>
|
||||
|
||||
|
||||
<section id="copy">
|
||||
<p><code>itemPositionDataEnabled</code> option is enabled. </p>
|
||||
</section>
|
||||
|
||||
<section id="options" class="clearfix">
|
||||
|
||||
|
||||
<h3>Sort</h3>
|
||||
|
||||
<ul id="sort-by" class="option-set clearfix" data-option-key="sortBy">
|
||||
<li><a href="#sortBy=original-order" data-option-value="original-order" class="selected" data>original-order</a></li>
|
||||
<li><a href="#sortBy=name" data-option-value="name">name</a></li>
|
||||
<li><a href="#sortBy=symbol" data-option-value="symbol">symbol</a></li>
|
||||
<li><a href="#sortBy=number" data-option-value="number">number</a></li>
|
||||
<li><a href="#sortBy=weight" data-option-value="weight">weight</a></li>
|
||||
<li><a href="#sortBy=category" data-option-value="category">category</a></li>
|
||||
<li><a href="#sortBy=random" data-option-value="random">random</a></li>
|
||||
</ul>
|
||||
|
||||
<h3>Sort direction</h3>
|
||||
|
||||
<ul id="sort-direction" class="option-set clearfix" data-option-key="sortAscending">
|
||||
<li><a href="#sortAscending=true" data-option-value="true" class="selected">sort ascending</a></li>
|
||||
<li><a href="#sortAscending=false" data-option-value="false">sort descending</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h3>Etc</h3>
|
||||
|
||||
<ul id="etc" class="clearfix">
|
||||
|
||||
<li id="toggle-sizes"><a href="#toggle-sizes">Toggle variable sizes</a></li>
|
||||
</ul>
|
||||
</section> <!-- #options -->
|
||||
|
||||
<div id="container" class="clickable clearfix">
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="H" data-category="other">
|
||||
<p class="number">1</p>
|
||||
<h3 class="symbol">H</h3>
|
||||
<h2 class="name">Hydrogen</h2>
|
||||
<p class="weight">1.00794</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element noble-gas nonmetal " data-symbol="He" data-category="noble-gas">
|
||||
<p class="number">2</p>
|
||||
<h3 class="symbol">He</h3>
|
||||
<h2 class="name">Helium</h2>
|
||||
<p class="weight">4.002602</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkali metal " data-symbol="Li" data-category="alkali">
|
||||
<p class="number">3</p>
|
||||
<h3 class="symbol">Li</h3>
|
||||
<h2 class="name">Lithium</h2>
|
||||
<p class="weight">6.941</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkaline-earth metal " data-symbol="Be" data-category="alkaline-earth">
|
||||
<p class="number">4</p>
|
||||
<h3 class="symbol">Be</h3>
|
||||
<h2 class="name">Beryllium</h2>
|
||||
<p class="weight">9.012182</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element metalloid " data-symbol="B" data-category="metalloid">
|
||||
<p class="number">5</p>
|
||||
<h3 class="symbol">B</h3>
|
||||
<h2 class="name">Boron</h2>
|
||||
<p class="weight">10.811</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="C" data-category="other">
|
||||
<p class="number">6</p>
|
||||
<h3 class="symbol">C</h3>
|
||||
<h2 class="name">Carbon</h2>
|
||||
<p class="weight">12.0107</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="N" data-category="other">
|
||||
<p class="number">7</p>
|
||||
<h3 class="symbol">N</h3>
|
||||
<h2 class="name">Nitrogen</h2>
|
||||
<p class="weight">14.0067</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="O" data-category="other">
|
||||
<p class="number">8</p>
|
||||
<h3 class="symbol">O</h3>
|
||||
<h2 class="name">Oxygen</h2>
|
||||
<p class="weight">15.9994</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element halogen nonmetal " data-symbol="F" data-category="halogen">
|
||||
<p class="number">9</p>
|
||||
<h3 class="symbol">F</h3>
|
||||
<h2 class="name">Fluorine</h2>
|
||||
<p class="weight">18.9984032</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element noble-gas nonmetal " data-symbol="Ne" data-category="noble-gas">
|
||||
<p class="number">10</p>
|
||||
<h3 class="symbol">Ne</h3>
|
||||
<h2 class="name">Neon</h2>
|
||||
<p class="weight">20.1797</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkali metal " data-symbol="Na" data-category="alkali">
|
||||
<p class="number">11</p>
|
||||
<h3 class="symbol">Na</h3>
|
||||
<h2 class="name">Sodium</h2>
|
||||
<p class="weight">22.98976928</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkaline-earth metal " data-symbol="Mg" data-category="alkaline-earth">
|
||||
<p class="number">12</p>
|
||||
<h3 class="symbol">Mg</h3>
|
||||
<h2 class="name">Magnesium</h2>
|
||||
<p class="weight">24.305</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element post-transition metal " data-symbol="Al" data-category="post-transition">
|
||||
<p class="number">13</p>
|
||||
<h3 class="symbol">Al</h3>
|
||||
<h2 class="name">Aluminium</h2>
|
||||
<p class="weight">26.9815386</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element metalloid " data-symbol="Si" data-category="metalloid">
|
||||
<p class="number">14</p>
|
||||
<h3 class="symbol">Si</h3>
|
||||
<h2 class="name">Silicon</h2>
|
||||
<p class="weight">28.0855</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="P" data-category="other">
|
||||
<p class="number">15</p>
|
||||
<h3 class="symbol">P</h3>
|
||||
<h2 class="name">Phosphorus</h2>
|
||||
<p class="weight">30.973762</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="S" data-category="other">
|
||||
<p class="number">16</p>
|
||||
<h3 class="symbol">S</h3>
|
||||
<h2 class="name">Sulfur</h2>
|
||||
<p class="weight">32.065</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element halogen nonmetal " data-symbol="Cl" data-category="halogen">
|
||||
<p class="number">17</p>
|
||||
<h3 class="symbol">Cl</h3>
|
||||
<h2 class="name">Chlorine</h2>
|
||||
<p class="weight">35.453</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element noble-gas nonmetal " data-symbol="Ar" data-category="noble-gas">
|
||||
<p class="number">18</p>
|
||||
<h3 class="symbol">Ar</h3>
|
||||
<h2 class="name">Argon</h2>
|
||||
<p class="weight">39.948</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkali metal " data-symbol="K" data-category="alkali">
|
||||
<p class="number">19</p>
|
||||
<h3 class="symbol">K</h3>
|
||||
<h2 class="name">Potassium</h2>
|
||||
<p class="weight">39.0983</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkaline-earth metal " data-symbol="Ca" data-category="alkaline-earth">
|
||||
<p class="number">20</p>
|
||||
<h3 class="symbol">Ca</h3>
|
||||
<h2 class="name">Calcium</h2>
|
||||
<p class="weight">40.078</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Sc" data-category="transition">
|
||||
<p class="number">21</p>
|
||||
<h3 class="symbol">Sc</h3>
|
||||
<h2 class="name">Scandium</h2>
|
||||
<p class="weight">44.955912</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Ti" data-category="transition">
|
||||
<p class="number">22</p>
|
||||
<h3 class="symbol">Ti</h3>
|
||||
<h2 class="name">Titanium</h2>
|
||||
<p class="weight">47.867</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="V" data-category="transition">
|
||||
<p class="number">23</p>
|
||||
<h3 class="symbol">V</h3>
|
||||
<h2 class="name">Vanadium</h2>
|
||||
<p class="weight">50.9415</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Cr" data-category="transition">
|
||||
<p class="number">24</p>
|
||||
<h3 class="symbol">Cr</h3>
|
||||
<h2 class="name">Chromium</h2>
|
||||
<p class="weight">51.9961</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Mn" data-category="transition">
|
||||
<p class="number">25</p>
|
||||
<h3 class="symbol">Mn</h3>
|
||||
<h2 class="name">Manganese</h2>
|
||||
<p class="weight">54.938045</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Fe" data-category="transition">
|
||||
<p class="number">26</p>
|
||||
<h3 class="symbol">Fe</h3>
|
||||
<h2 class="name">Iron</h2>
|
||||
<p class="weight">55.845</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Co" data-category="transition">
|
||||
<p class="number">27</p>
|
||||
<h3 class="symbol">Co</h3>
|
||||
<h2 class="name">Cobalt</h2>
|
||||
<p class="weight">58.933195</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Ni" data-category="transition">
|
||||
<p class="number">28</p>
|
||||
<h3 class="symbol">Ni</h3>
|
||||
<h2 class="name">Nickel</h2>
|
||||
<p class="weight">58.6934</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Cu" data-category="transition">
|
||||
<p class="number">29</p>
|
||||
<h3 class="symbol">Cu</h3>
|
||||
<h2 class="name">Copper</h2>
|
||||
<p class="weight">63.546</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Zn" data-category="transition">
|
||||
<p class="number">30</p>
|
||||
<h3 class="symbol">Zn</h3>
|
||||
<h2 class="name">Zinc</h2>
|
||||
<p class="weight">65.38</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element post-transition metal " data-symbol="Ga" data-category="post-transition">
|
||||
<p class="number">31</p>
|
||||
<h3 class="symbol">Ga</h3>
|
||||
<h2 class="name">Gallium</h2>
|
||||
<p class="weight">69.723</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element metalloid " data-symbol="Ge" data-category="metalloid">
|
||||
<p class="number">32</p>
|
||||
<h3 class="symbol">Ge</h3>
|
||||
<h2 class="name">Germanium</h2>
|
||||
<p class="weight">72.64</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element metalloid " data-symbol="As" data-category="metalloid">
|
||||
<p class="number">33</p>
|
||||
<h3 class="symbol">As</h3>
|
||||
<h2 class="name">Arsenic</h2>
|
||||
<p class="weight">74.9216</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="Se" data-category="other">
|
||||
<p class="number">34</p>
|
||||
<h3 class="symbol">Se</h3>
|
||||
<h2 class="name">Selenium</h2>
|
||||
<p class="weight">78.96</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element halogen nonmetal " data-symbol="Br" data-category="halogen">
|
||||
<p class="number">35</p>
|
||||
<h3 class="symbol">Br</h3>
|
||||
<h2 class="name">Bromine</h2>
|
||||
<p class="weight">79.904</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element noble-gas nonmetal " data-symbol="Kr" data-category="noble-gas">
|
||||
<p class="number">36</p>
|
||||
<h3 class="symbol">Kr</h3>
|
||||
<h2 class="name">Krypton</h2>
|
||||
<p class="weight">83.798</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkali metal " data-symbol="Rb" data-category="alkali">
|
||||
<p class="number">37</p>
|
||||
<h3 class="symbol">Rb</h3>
|
||||
<h2 class="name">Rubidium</h2>
|
||||
<p class="weight">85.4678</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkaline-earth metal " data-symbol="Sr" data-category="alkaline-earth">
|
||||
<p class="number">38</p>
|
||||
<h3 class="symbol">Sr</h3>
|
||||
<h2 class="name">Strontium</h2>
|
||||
<p class="weight">87.62</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Y" data-category="transition">
|
||||
<p class="number">39</p>
|
||||
<h3 class="symbol">Y</h3>
|
||||
<h2 class="name">Yttrium</h2>
|
||||
<p class="weight">88.90585</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Zr" data-category="transition">
|
||||
<p class="number">40</p>
|
||||
<h3 class="symbol">Zr</h3>
|
||||
<h2 class="name">Zirconium</h2>
|
||||
<p class="weight">91.224</p>
|
||||
</div>
|
||||
|
||||
</div> <!-- #container -->
|
||||
|
||||
<script src="../js/jquery-1.6.4.min.js"></script>
|
||||
<script src="../jquery.isotope.min.js"></script>
|
||||
<script>
|
||||
|
||||
$(function(){
|
||||
|
||||
var $container = $('#container');
|
||||
|
||||
|
||||
// add randomish size classes
|
||||
$container.find('.element').each(function(){
|
||||
var $this = $(this),
|
||||
number = parseInt( $this.find('.number').text(), 10 );
|
||||
if ( number % 7 % 2 === 1 ) {
|
||||
$this.addClass('width2');
|
||||
}
|
||||
if ( number % 3 === 0 ) {
|
||||
$this.addClass('height2');
|
||||
}
|
||||
});
|
||||
|
||||
$container.isotope({
|
||||
itemSelector: '.element',
|
||||
itemPositionDataEnabled: true,
|
||||
masonry: {
|
||||
columnWidth : 120
|
||||
},
|
||||
getSortData : {
|
||||
symbol : function( $elem ) {
|
||||
return $elem.attr('data-symbol');
|
||||
},
|
||||
category : function( $elem ) {
|
||||
return $elem.attr('data-category');
|
||||
},
|
||||
number : function( $elem ) {
|
||||
return parseInt( $elem.find('.number').text(), 10 );
|
||||
},
|
||||
weight : function( $elem ) {
|
||||
return parseFloat( $elem.find('.weight').text().replace( /[\(\)]/g, '') );
|
||||
},
|
||||
name : function ( $elem ) {
|
||||
return $elem.find('.name').text();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
var $optionSets = $('#options .option-set'),
|
||||
$optionLinks = $optionSets.find('a');
|
||||
|
||||
$optionLinks.click(function(){
|
||||
var $this = $(this);
|
||||
// don't proceed if already selected
|
||||
if ( $this.hasClass('selected') ) {
|
||||
return false;
|
||||
}
|
||||
var $optionSet = $this.parents('.option-set');
|
||||
$optionSet.find('.selected').removeClass('selected');
|
||||
$this.addClass('selected');
|
||||
|
||||
// make option object dynamically, i.e. { filter: '.my-filter-class' }
|
||||
var options = {},
|
||||
key = $optionSet.attr('data-option-key'),
|
||||
value = $this.attr('data-option-value');
|
||||
// parse 'false' as false boolean
|
||||
value = value === 'false' ? false : value;
|
||||
options[ key ] = value;
|
||||
if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
|
||||
// changes in layout modes need extra logic
|
||||
changeLayoutMode( $this, options )
|
||||
} else {
|
||||
// otherwise, apply new options
|
||||
$container.isotope( options );
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
|
||||
// change size of clicked element
|
||||
$container.delegate( '.element', 'click', function(){
|
||||
$(this).toggleClass('large');
|
||||
$container.isotope('reLayout');
|
||||
});
|
||||
|
||||
// toggle variable sizes of all elements
|
||||
$('#toggle-sizes').find('a').click(function(){
|
||||
$container
|
||||
.toggleClass('variable-sizes')
|
||||
.isotope('reLayout');
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<footer>
|
||||
Isotope by <a href="http://desandro.com">David DeSandro</a> / <a href="http://metafizzy.co">Metafizzy</a>
|
||||
</footer>
|
||||
|
||||
</section> <!-- #content -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
667
sites/all/libraries/isotope-site/tests/jquery-animation.html
Normal file
667
sites/all/libraries/isotope-site/tests/jquery-animation.html
Normal file
@@ -0,0 +1,667 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<title>jquery animation · Isotope </title>
|
||||
|
||||
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
|
||||
<!-- scripts at bottom of page -->
|
||||
|
||||
</head>
|
||||
<body class="tests ">
|
||||
|
||||
<nav id="site-nav">
|
||||
<h1><a href="../index.html">Isotope</a></h1>
|
||||
|
||||
<h2>Docs</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../docs/introduction.html">Introduction</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/options.html">Options</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/methods.html">Methods</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/animating.html">Animating</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/extending-isotope.html">Extending Isotope</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/hash-history-jquery-bbq.html">Hash history with jQuery BBQ</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/help.html">Help</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/license.html">License</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Demos</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../demos/basic.html">Basic</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-complete.html">Elements Complete</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-partial.html">Elements Partial</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/relayout.html">reLayout</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/infinite-scroll.html">Infinite Scroll</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/images.html">Images</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/combination-filters.html">Combination filters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/hash-history.html">Hash history</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/fluid-responsive.html">Fluid / responsive</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Custom layout modes</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/centered-masonry.html">Centered Masonry</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/category-rows.html">Category rows</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-corner-stamp.html">Masonry corner stamp</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-gutters.html">Masonry gutters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/spine-align.html">Spine align</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2><a href="../tests/index.html">Tests</a></h2>
|
||||
|
||||
</nav> <!-- #site-nav -->
|
||||
|
||||
<section id="content">
|
||||
|
||||
<h1>jquery animation</h1>
|
||||
|
||||
|
||||
<style>
|
||||
.isotope,
|
||||
.isotope .isotope-item {
|
||||
-webkit-transition: none;
|
||||
-moz-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<section id="copy">
|
||||
<p>Check that the option setter for animationEngine is properly triggered.</p>
|
||||
</section>
|
||||
|
||||
<section id="options" class="clearfix">
|
||||
|
||||
|
||||
|
||||
<h3>Filters</h3>
|
||||
|
||||
<ul id="filters" class="option-set clearfix" data-option-key="filter">
|
||||
<li><a href="#filter" data-option-value="*" class="selected">show all</a></li>
|
||||
<li><a href="#filter" data-option-value=".metal">metal</a></li>
|
||||
<li><a href="#filter" data-option-value=".transition">transition</a></li>
|
||||
<li><a href="#filter" data-option-value=".post-transition">post-transition</a></li>
|
||||
<li><a href="#filter" data-option-value=".nonmetal">nonmetal</a></li>
|
||||
<li><a href="#filter" data-option-value=".inner-transition">inner-transition</a></li>
|
||||
<li><a href="#filter" data-option-value=".alkali, .alkaline-earth">alkali and alkaline-earth</a></li>
|
||||
<li><a href="#filter" data-option-value=":not(.transition)">not transition</a></li>
|
||||
<li><a href="#filter" data-option-value=".metal:not(.transition)">metal but not transition</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<h3>Sort</h3>
|
||||
|
||||
<ul id="sort-by" class="option-set clearfix" data-option-key="sortBy">
|
||||
<li><a href="#sortBy=original-order" data-option-value="original-order" class="selected" data>original-order</a></li>
|
||||
<li><a href="#sortBy=name" data-option-value="name">name</a></li>
|
||||
<li><a href="#sortBy=symbol" data-option-value="symbol">symbol</a></li>
|
||||
<li><a href="#sortBy=number" data-option-value="number">number</a></li>
|
||||
<li><a href="#sortBy=weight" data-option-value="weight">weight</a></li>
|
||||
<li><a href="#sortBy=category" data-option-value="category">category</a></li>
|
||||
<li><a href="#sortBy=random" data-option-value="random">random</a></li>
|
||||
</ul>
|
||||
|
||||
<h3>Sort direction</h3>
|
||||
|
||||
<ul id="sort-direction" class="option-set clearfix" data-option-key="sortAscending">
|
||||
<li><a href="#sortAscending=true" data-option-value="true" class="selected">sort ascending</a></li>
|
||||
<li><a href="#sortAscending=false" data-option-value="false">sort descending</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h3>Etc</h3>
|
||||
|
||||
<ul id="etc" class="clearfix">
|
||||
|
||||
<li id="toggle-animation"><a href="#toggle-animation">Toggle jQuery animation</a></li>
|
||||
<li id="toggle-sizes"><a href="#toggle-sizes">Toggle variable sizes</a></li>
|
||||
</ul>
|
||||
</section> <!-- #options -->
|
||||
|
||||
<div id="container" class="clickable clearfix">
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="H" data-category="other">
|
||||
<p class="number">1</p>
|
||||
<h3 class="symbol">H</h3>
|
||||
<h2 class="name">Hydrogen</h2>
|
||||
<p class="weight">1.00794</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element noble-gas nonmetal " data-symbol="He" data-category="noble-gas">
|
||||
<p class="number">2</p>
|
||||
<h3 class="symbol">He</h3>
|
||||
<h2 class="name">Helium</h2>
|
||||
<p class="weight">4.002602</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkali metal " data-symbol="Li" data-category="alkali">
|
||||
<p class="number">3</p>
|
||||
<h3 class="symbol">Li</h3>
|
||||
<h2 class="name">Lithium</h2>
|
||||
<p class="weight">6.941</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkaline-earth metal " data-symbol="Be" data-category="alkaline-earth">
|
||||
<p class="number">4</p>
|
||||
<h3 class="symbol">Be</h3>
|
||||
<h2 class="name">Beryllium</h2>
|
||||
<p class="weight">9.012182</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element metalloid " data-symbol="B" data-category="metalloid">
|
||||
<p class="number">5</p>
|
||||
<h3 class="symbol">B</h3>
|
||||
<h2 class="name">Boron</h2>
|
||||
<p class="weight">10.811</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="C" data-category="other">
|
||||
<p class="number">6</p>
|
||||
<h3 class="symbol">C</h3>
|
||||
<h2 class="name">Carbon</h2>
|
||||
<p class="weight">12.0107</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="N" data-category="other">
|
||||
<p class="number">7</p>
|
||||
<h3 class="symbol">N</h3>
|
||||
<h2 class="name">Nitrogen</h2>
|
||||
<p class="weight">14.0067</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="O" data-category="other">
|
||||
<p class="number">8</p>
|
||||
<h3 class="symbol">O</h3>
|
||||
<h2 class="name">Oxygen</h2>
|
||||
<p class="weight">15.9994</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element halogen nonmetal " data-symbol="F" data-category="halogen">
|
||||
<p class="number">9</p>
|
||||
<h3 class="symbol">F</h3>
|
||||
<h2 class="name">Fluorine</h2>
|
||||
<p class="weight">18.9984032</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element noble-gas nonmetal " data-symbol="Ne" data-category="noble-gas">
|
||||
<p class="number">10</p>
|
||||
<h3 class="symbol">Ne</h3>
|
||||
<h2 class="name">Neon</h2>
|
||||
<p class="weight">20.1797</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkali metal " data-symbol="Na" data-category="alkali">
|
||||
<p class="number">11</p>
|
||||
<h3 class="symbol">Na</h3>
|
||||
<h2 class="name">Sodium</h2>
|
||||
<p class="weight">22.98976928</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkaline-earth metal " data-symbol="Mg" data-category="alkaline-earth">
|
||||
<p class="number">12</p>
|
||||
<h3 class="symbol">Mg</h3>
|
||||
<h2 class="name">Magnesium</h2>
|
||||
<p class="weight">24.305</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element post-transition metal " data-symbol="Al" data-category="post-transition">
|
||||
<p class="number">13</p>
|
||||
<h3 class="symbol">Al</h3>
|
||||
<h2 class="name">Aluminium</h2>
|
||||
<p class="weight">26.9815386</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element metalloid " data-symbol="Si" data-category="metalloid">
|
||||
<p class="number">14</p>
|
||||
<h3 class="symbol">Si</h3>
|
||||
<h2 class="name">Silicon</h2>
|
||||
<p class="weight">28.0855</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="P" data-category="other">
|
||||
<p class="number">15</p>
|
||||
<h3 class="symbol">P</h3>
|
||||
<h2 class="name">Phosphorus</h2>
|
||||
<p class="weight">30.973762</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="S" data-category="other">
|
||||
<p class="number">16</p>
|
||||
<h3 class="symbol">S</h3>
|
||||
<h2 class="name">Sulfur</h2>
|
||||
<p class="weight">32.065</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element halogen nonmetal " data-symbol="Cl" data-category="halogen">
|
||||
<p class="number">17</p>
|
||||
<h3 class="symbol">Cl</h3>
|
||||
<h2 class="name">Chlorine</h2>
|
||||
<p class="weight">35.453</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element noble-gas nonmetal " data-symbol="Ar" data-category="noble-gas">
|
||||
<p class="number">18</p>
|
||||
<h3 class="symbol">Ar</h3>
|
||||
<h2 class="name">Argon</h2>
|
||||
<p class="weight">39.948</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkali metal " data-symbol="K" data-category="alkali">
|
||||
<p class="number">19</p>
|
||||
<h3 class="symbol">K</h3>
|
||||
<h2 class="name">Potassium</h2>
|
||||
<p class="weight">39.0983</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkaline-earth metal " data-symbol="Ca" data-category="alkaline-earth">
|
||||
<p class="number">20</p>
|
||||
<h3 class="symbol">Ca</h3>
|
||||
<h2 class="name">Calcium</h2>
|
||||
<p class="weight">40.078</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Sc" data-category="transition">
|
||||
<p class="number">21</p>
|
||||
<h3 class="symbol">Sc</h3>
|
||||
<h2 class="name">Scandium</h2>
|
||||
<p class="weight">44.955912</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Ti" data-category="transition">
|
||||
<p class="number">22</p>
|
||||
<h3 class="symbol">Ti</h3>
|
||||
<h2 class="name">Titanium</h2>
|
||||
<p class="weight">47.867</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="V" data-category="transition">
|
||||
<p class="number">23</p>
|
||||
<h3 class="symbol">V</h3>
|
||||
<h2 class="name">Vanadium</h2>
|
||||
<p class="weight">50.9415</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Cr" data-category="transition">
|
||||
<p class="number">24</p>
|
||||
<h3 class="symbol">Cr</h3>
|
||||
<h2 class="name">Chromium</h2>
|
||||
<p class="weight">51.9961</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Mn" data-category="transition">
|
||||
<p class="number">25</p>
|
||||
<h3 class="symbol">Mn</h3>
|
||||
<h2 class="name">Manganese</h2>
|
||||
<p class="weight">54.938045</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Fe" data-category="transition">
|
||||
<p class="number">26</p>
|
||||
<h3 class="symbol">Fe</h3>
|
||||
<h2 class="name">Iron</h2>
|
||||
<p class="weight">55.845</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Co" data-category="transition">
|
||||
<p class="number">27</p>
|
||||
<h3 class="symbol">Co</h3>
|
||||
<h2 class="name">Cobalt</h2>
|
||||
<p class="weight">58.933195</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Ni" data-category="transition">
|
||||
<p class="number">28</p>
|
||||
<h3 class="symbol">Ni</h3>
|
||||
<h2 class="name">Nickel</h2>
|
||||
<p class="weight">58.6934</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Cu" data-category="transition">
|
||||
<p class="number">29</p>
|
||||
<h3 class="symbol">Cu</h3>
|
||||
<h2 class="name">Copper</h2>
|
||||
<p class="weight">63.546</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Zn" data-category="transition">
|
||||
<p class="number">30</p>
|
||||
<h3 class="symbol">Zn</h3>
|
||||
<h2 class="name">Zinc</h2>
|
||||
<p class="weight">65.38</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element post-transition metal " data-symbol="Ga" data-category="post-transition">
|
||||
<p class="number">31</p>
|
||||
<h3 class="symbol">Ga</h3>
|
||||
<h2 class="name">Gallium</h2>
|
||||
<p class="weight">69.723</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element metalloid " data-symbol="Ge" data-category="metalloid">
|
||||
<p class="number">32</p>
|
||||
<h3 class="symbol">Ge</h3>
|
||||
<h2 class="name">Germanium</h2>
|
||||
<p class="weight">72.64</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element metalloid " data-symbol="As" data-category="metalloid">
|
||||
<p class="number">33</p>
|
||||
<h3 class="symbol">As</h3>
|
||||
<h2 class="name">Arsenic</h2>
|
||||
<p class="weight">74.9216</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="Se" data-category="other">
|
||||
<p class="number">34</p>
|
||||
<h3 class="symbol">Se</h3>
|
||||
<h2 class="name">Selenium</h2>
|
||||
<p class="weight">78.96</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element halogen nonmetal " data-symbol="Br" data-category="halogen">
|
||||
<p class="number">35</p>
|
||||
<h3 class="symbol">Br</h3>
|
||||
<h2 class="name">Bromine</h2>
|
||||
<p class="weight">79.904</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element noble-gas nonmetal " data-symbol="Kr" data-category="noble-gas">
|
||||
<p class="number">36</p>
|
||||
<h3 class="symbol">Kr</h3>
|
||||
<h2 class="name">Krypton</h2>
|
||||
<p class="weight">83.798</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkali metal " data-symbol="Rb" data-category="alkali">
|
||||
<p class="number">37</p>
|
||||
<h3 class="symbol">Rb</h3>
|
||||
<h2 class="name">Rubidium</h2>
|
||||
<p class="weight">85.4678</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkaline-earth metal " data-symbol="Sr" data-category="alkaline-earth">
|
||||
<p class="number">38</p>
|
||||
<h3 class="symbol">Sr</h3>
|
||||
<h2 class="name">Strontium</h2>
|
||||
<p class="weight">87.62</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Y" data-category="transition">
|
||||
<p class="number">39</p>
|
||||
<h3 class="symbol">Y</h3>
|
||||
<h2 class="name">Yttrium</h2>
|
||||
<p class="weight">88.90585</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Zr" data-category="transition">
|
||||
<p class="number">40</p>
|
||||
<h3 class="symbol">Zr</h3>
|
||||
<h2 class="name">Zirconium</h2>
|
||||
<p class="weight">91.224</p>
|
||||
</div>
|
||||
|
||||
</div> <!-- #container -->
|
||||
|
||||
<script src="../js/jquery-1.6.4.min.js"></script>
|
||||
<script src="../jquery.isotope.min.js"></script>
|
||||
<script>
|
||||
$(function(){
|
||||
|
||||
var $container = $('#container');
|
||||
|
||||
|
||||
// add randomish size classes
|
||||
$container.find('.element').each(function(){
|
||||
var $this = $(this),
|
||||
number = parseInt( $this.find('.number').text(), 10 );
|
||||
if ( number % 7 % 2 === 1 ) {
|
||||
$this.addClass('width2');
|
||||
}
|
||||
if ( number % 3 === 0 ) {
|
||||
$this.addClass('height2');
|
||||
}
|
||||
});
|
||||
|
||||
$container.isotope({
|
||||
itemSelector: '.element',
|
||||
transformsEnabled: false,
|
||||
animationEngine: 'jquery',
|
||||
masonry: {
|
||||
columnWidth : 120
|
||||
},
|
||||
getSortData : {
|
||||
symbol : function( $elem ) {
|
||||
return $elem.attr('data-symbol');
|
||||
},
|
||||
category : function( $elem ) {
|
||||
return $elem.attr('data-category');
|
||||
},
|
||||
number : function( $elem ) {
|
||||
return parseInt( $elem.find('.number').text(), 10 );
|
||||
},
|
||||
weight : function( $elem ) {
|
||||
return parseFloat( $elem.find('.weight').text().replace( /[\(\)]/g, '') );
|
||||
},
|
||||
name : function ( $elem ) {
|
||||
return $elem.find('.name').text();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
var $optionSets = $('#options .option-set'),
|
||||
$optionLinks = $optionSets.find('a');
|
||||
|
||||
$optionLinks.click(function(){
|
||||
var $this = $(this);
|
||||
// don't proceed if already selected
|
||||
if ( $this.hasClass('selected') ) {
|
||||
return false;
|
||||
}
|
||||
var $optionSet = $this.parents('.option-set');
|
||||
$optionSet.find('.selected').removeClass('selected');
|
||||
$this.addClass('selected');
|
||||
|
||||
// make option object dynamically, i.e. { filter: '.my-filter-class' }
|
||||
var options = {},
|
||||
key = $optionSet.attr('data-option-key'),
|
||||
value = $this.attr('data-option-value');
|
||||
// parse 'false' as false boolean
|
||||
value = value === 'false' ? false : value;
|
||||
options[ key ] = value;
|
||||
if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
|
||||
// changes in layout modes need extra logic
|
||||
changeLayoutMode( $this, options )
|
||||
} else {
|
||||
// otherwise, apply new options
|
||||
$container.isotope( options );
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
|
||||
// change size of clicked element
|
||||
$container.delegate( '.element', 'click', function(){
|
||||
$(this).toggleClass('large');
|
||||
$container.isotope('reLayout');
|
||||
});
|
||||
|
||||
// toggle variable sizes of all elements
|
||||
$('#toggle-sizes').find('a').click(function(){
|
||||
$container
|
||||
.toggleClass('variable-sizes')
|
||||
.isotope('reLayout');
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
var isAnimated = true;
|
||||
$('#toggle-animation').click(function(){
|
||||
isAnimated = !isAnimated;
|
||||
var aniEngine = isAnimated ? 'jquery' : 'css';
|
||||
$container.isotope( 'option', { animationEngine: aniEngine } );
|
||||
return false;
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<footer>
|
||||
Isotope by <a href="http://desandro.com">David DeSandro</a> / <a href="http://metafizzy.co">Metafizzy</a>
|
||||
</footer>
|
||||
|
||||
</section> <!-- #content -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
357
sites/all/libraries/isotope-site/tests/no-items.html
Normal file
357
sites/all/libraries/isotope-site/tests/no-items.html
Normal file
@@ -0,0 +1,357 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<title>no items · Isotope </title>
|
||||
|
||||
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
|
||||
<!-- scripts at bottom of page -->
|
||||
|
||||
</head>
|
||||
<body class="tests ">
|
||||
|
||||
<nav id="site-nav">
|
||||
<h1><a href="../index.html">Isotope</a></h1>
|
||||
|
||||
<h2>Docs</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../docs/introduction.html">Introduction</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/options.html">Options</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/methods.html">Methods</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/animating.html">Animating</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/extending-isotope.html">Extending Isotope</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/hash-history-jquery-bbq.html">Hash history with jQuery BBQ</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/help.html">Help</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/license.html">License</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Demos</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../demos/basic.html">Basic</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-complete.html">Elements Complete</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-partial.html">Elements Partial</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/relayout.html">reLayout</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/infinite-scroll.html">Infinite Scroll</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/images.html">Images</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/combination-filters.html">Combination filters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/hash-history.html">Hash history</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/fluid-responsive.html">Fluid / responsive</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Custom layout modes</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/centered-masonry.html">Centered Masonry</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/category-rows.html">Category rows</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-corner-stamp.html">Masonry corner stamp</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-gutters.html">Masonry gutters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/spine-align.html">Spine align</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2><a href="../tests/index.html">Tests</a></h2>
|
||||
|
||||
</nav> <!-- #site-nav -->
|
||||
|
||||
<section id="content">
|
||||
|
||||
<h1>no items</h1>
|
||||
|
||||
|
||||
<section id="copy">
|
||||
<p>What happens when there are no items for Isotope? If no items match `itemSelector`, container collapses. Plugin still <code>return this</code>.</p>
|
||||
</section>
|
||||
|
||||
<div id="container">
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="H" data-category="other">
|
||||
<p class="number">1</p>
|
||||
<h3 class="symbol">H</h3>
|
||||
<h2 class="name">Hydrogen</h2>
|
||||
<p class="weight">1.00794</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element noble-gas nonmetal " data-symbol="He" data-category="noble-gas">
|
||||
<p class="number">2</p>
|
||||
<h3 class="symbol">He</h3>
|
||||
<h2 class="name">Helium</h2>
|
||||
<p class="weight">4.002602</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkali metal " data-symbol="Li" data-category="alkali">
|
||||
<p class="number">3</p>
|
||||
<h3 class="symbol">Li</h3>
|
||||
<h2 class="name">Lithium</h2>
|
||||
<p class="weight">6.941</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkaline-earth metal " data-symbol="Be" data-category="alkaline-earth">
|
||||
<p class="number">4</p>
|
||||
<h3 class="symbol">Be</h3>
|
||||
<h2 class="name">Beryllium</h2>
|
||||
<p class="weight">9.012182</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element metalloid " data-symbol="B" data-category="metalloid">
|
||||
<p class="number">5</p>
|
||||
<h3 class="symbol">B</h3>
|
||||
<h2 class="name">Boron</h2>
|
||||
<p class="weight">10.811</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="C" data-category="other">
|
||||
<p class="number">6</p>
|
||||
<h3 class="symbol">C</h3>
|
||||
<h2 class="name">Carbon</h2>
|
||||
<p class="weight">12.0107</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="N" data-category="other">
|
||||
<p class="number">7</p>
|
||||
<h3 class="symbol">N</h3>
|
||||
<h2 class="name">Nitrogen</h2>
|
||||
<p class="weight">14.0067</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="O" data-category="other">
|
||||
<p class="number">8</p>
|
||||
<h3 class="symbol">O</h3>
|
||||
<h2 class="name">Oxygen</h2>
|
||||
<p class="weight">15.9994</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element halogen nonmetal " data-symbol="F" data-category="halogen">
|
||||
<p class="number">9</p>
|
||||
<h3 class="symbol">F</h3>
|
||||
<h2 class="name">Fluorine</h2>
|
||||
<p class="weight">18.9984032</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element noble-gas nonmetal " data-symbol="Ne" data-category="noble-gas">
|
||||
<p class="number">10</p>
|
||||
<h3 class="symbol">Ne</h3>
|
||||
<h2 class="name">Neon</h2>
|
||||
<p class="weight">20.1797</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkali metal " data-symbol="Na" data-category="alkali">
|
||||
<p class="number">11</p>
|
||||
<h3 class="symbol">Na</h3>
|
||||
<h2 class="name">Sodium</h2>
|
||||
<p class="weight">22.98976928</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkaline-earth metal " data-symbol="Mg" data-category="alkaline-earth">
|
||||
<p class="number">12</p>
|
||||
<h3 class="symbol">Mg</h3>
|
||||
<h2 class="name">Magnesium</h2>
|
||||
<p class="weight">24.305</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element post-transition metal " data-symbol="Al" data-category="post-transition">
|
||||
<p class="number">13</p>
|
||||
<h3 class="symbol">Al</h3>
|
||||
<h2 class="name">Aluminium</h2>
|
||||
<p class="weight">26.9815386</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element metalloid " data-symbol="Si" data-category="metalloid">
|
||||
<p class="number">14</p>
|
||||
<h3 class="symbol">Si</h3>
|
||||
<h2 class="name">Silicon</h2>
|
||||
<p class="weight">28.0855</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="P" data-category="other">
|
||||
<p class="number">15</p>
|
||||
<h3 class="symbol">P</h3>
|
||||
<h2 class="name">Phosphorus</h2>
|
||||
<p class="weight">30.973762</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="S" data-category="other">
|
||||
<p class="number">16</p>
|
||||
<h3 class="symbol">S</h3>
|
||||
<h2 class="name">Sulfur</h2>
|
||||
<p class="weight">32.065</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element halogen nonmetal " data-symbol="Cl" data-category="halogen">
|
||||
<p class="number">17</p>
|
||||
<h3 class="symbol">Cl</h3>
|
||||
<h2 class="name">Chlorine</h2>
|
||||
<p class="weight">35.453</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element noble-gas nonmetal " data-symbol="Ar" data-category="noble-gas">
|
||||
<p class="number">18</p>
|
||||
<h3 class="symbol">Ar</h3>
|
||||
<h2 class="name">Argon</h2>
|
||||
<p class="weight">39.948</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkali metal " data-symbol="K" data-category="alkali">
|
||||
<p class="number">19</p>
|
||||
<h3 class="symbol">K</h3>
|
||||
<h2 class="name">Potassium</h2>
|
||||
<p class="weight">39.0983</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="element alkaline-earth metal " data-symbol="Ca" data-category="alkaline-earth">
|
||||
<p class="number">20</p>
|
||||
<h3 class="symbol">Ca</h3>
|
||||
<h2 class="name">Calcium</h2>
|
||||
<p class="weight">40.078</p>
|
||||
</div>
|
||||
|
||||
</div> <!-- #container -->
|
||||
|
||||
<script src="../js/jquery-1.6.4.min.js"></script>
|
||||
<script src="../jquery.isotope.min.js"></script>
|
||||
<script>
|
||||
$(function(){
|
||||
|
||||
var $container = $('#container');
|
||||
|
||||
$container.isotope({
|
||||
itemSelector: '.foo'
|
||||
}).css('border', '10px solid');
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<footer>
|
||||
Isotope by <a href="http://desandro.com">David DeSandro</a> / <a href="http://metafizzy.co">Metafizzy</a>
|
||||
</footer>
|
||||
|
||||
</section> <!-- #content -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
561
sites/all/libraries/isotope-site/tests/right-to-left.html
Normal file
561
sites/all/libraries/isotope-site/tests/right-to-left.html
Normal file
@@ -0,0 +1,561 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<title>Right to left · Isotope </title>
|
||||
|
||||
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
|
||||
<!-- scripts at bottom of page -->
|
||||
|
||||
</head>
|
||||
<body class="tests demos">
|
||||
|
||||
<nav id="site-nav">
|
||||
<h1><a href="../index.html">Isotope</a></h1>
|
||||
|
||||
<h2>Docs</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../docs/introduction.html">Introduction</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/options.html">Options</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/methods.html">Methods</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/animating.html">Animating</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/extending-isotope.html">Extending Isotope</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/hash-history-jquery-bbq.html">Hash history with jQuery BBQ</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/help.html">Help</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/license.html">License</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Demos</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../demos/basic.html">Basic</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-complete.html">Elements Complete</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-partial.html">Elements Partial</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/relayout.html">reLayout</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/infinite-scroll.html">Infinite Scroll</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/images.html">Images</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/combination-filters.html">Combination filters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/hash-history.html">Hash history</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/fluid-responsive.html">Fluid / responsive</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Custom layout modes</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/centered-masonry.html">Centered Masonry</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/category-rows.html">Category rows</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-corner-stamp.html">Masonry corner stamp</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-gutters.html">Masonry gutters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/spine-align.html">Spine align</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2><a href="../tests/index.html">Tests</a></h2>
|
||||
|
||||
</nav> <!-- #site-nav -->
|
||||
|
||||
<section id="content">
|
||||
|
||||
<h1>Right to left</h1>
|
||||
|
||||
|
||||
<style>
|
||||
#content { direction: rtl; }
|
||||
|
||||
#options li { float: right; }
|
||||
|
||||
.isotope .isotope-item {
|
||||
-webkit-transition-property: right, top, -webkit-transform, opacity;
|
||||
-moz-transition-property: right, top, -moz-transform, opacity;
|
||||
-o-transition-property: right, top, -o-transform, opacity;
|
||||
transition-property: right, top, transform, opacity;
|
||||
}
|
||||
</style>
|
||||
|
||||
<section id="copy">
|
||||
<p>Isotope can support right-to-left layouts for languages like Hebrew and Arabic. See docs: <a href="../docs/help.html#righttoleft_layouts">Help - Right to left layouts</a>.</p>
|
||||
</section>
|
||||
|
||||
<section id="options" class="clearfix">
|
||||
|
||||
|
||||
<h3>Filters</h3>
|
||||
|
||||
<ul id="filters" class="option-set clearfix" data-option-key="filter">
|
||||
<li><a href="#filter" data-option-value="*" class="selected">show all</a></li>
|
||||
<li><a href="#filter" data-option-value=".metal">metal</a></li>
|
||||
<li><a href="#filter" data-option-value=".transition">transition</a></li>
|
||||
<li><a href="#filter" data-option-value=".post-transition">post-transition</a></li>
|
||||
<li><a href="#filter" data-option-value=".nonmetal">nonmetal</a></li>
|
||||
<li><a href="#filter" data-option-value=".inner-transition">inner-transition</a></li>
|
||||
<li><a href="#filter" data-option-value=".alkali, .alkaline-earth">alkali and alkaline-earth</a></li>
|
||||
<li><a href="#filter" data-option-value=":not(.transition)">not transition</a></li>
|
||||
<li><a href="#filter" data-option-value=".metal:not(.transition)">metal but not transition</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<h3>Sort</h3>
|
||||
|
||||
<ul id="sort-by" class="option-set clearfix" data-option-key="sortBy">
|
||||
<li><a href="#sortBy=original-order" data-option-value="original-order" class="selected" data>original-order</a></li>
|
||||
<li><a href="#sortBy=name" data-option-value="name">name</a></li>
|
||||
<li><a href="#sortBy=symbol" data-option-value="symbol">symbol</a></li>
|
||||
<li><a href="#sortBy=number" data-option-value="number">number</a></li>
|
||||
<li><a href="#sortBy=weight" data-option-value="weight">weight</a></li>
|
||||
<li><a href="#sortBy=category" data-option-value="category">category</a></li>
|
||||
<li><a href="#sortBy=random" data-option-value="random">random</a></li>
|
||||
</ul>
|
||||
|
||||
<h3>Sort direction</h3>
|
||||
|
||||
<ul id="sort-direction" class="option-set clearfix" data-option-key="sortAscending">
|
||||
<li><a href="#sortAscending=true" data-option-value="true" class="selected">sort ascending</a></li>
|
||||
<li><a href="#sortAscending=false" data-option-value="false">sort descending</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<h3>Layout modes</h3>
|
||||
|
||||
<ul id="layouts" class="option-set clearfix" data-option-key="layoutMode">
|
||||
<li><a href="#masonry" data-option-value="masonry" class="selected">masonry</a></li>
|
||||
<li><a href="#fitRows" data-option-value="fitRows">fitRows</a></li>
|
||||
<li><a href="#cellsByRow" data-option-value="cellsByRow">cellsByRow</a></li>
|
||||
<li><a href="#straightDown" data-option-value="straightDown">straightDown</a></li>
|
||||
<li><a href="#masonryHorizontal" data-option-value="masonryHorizontal" class="horizontal">masonryHorizontal</a></li>
|
||||
<li><a href="#fitColumns" data-option-value="fitColumns" class="horizontal">fitColumns</a></li>
|
||||
<li><a href="#cellsByColumn" data-option-value="cellsByColumn" class="horizontal">cellsByColumn</a></li>
|
||||
<li><a href="#straightAcross" data-option-value="straightAcross" class="horizontal">straightAcross</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h3>Etc</h3>
|
||||
|
||||
<ul id="etc" class="clearfix">
|
||||
<li id="toggle-sizes"><a href="#toggle-sizes">Toggle variable sizes</a></li>
|
||||
<li id="insert"><a href="#insert">Insert new elements</a></li>
|
||||
<li id="append"><a href='#append'>Append new elements</a></li>
|
||||
<li id="shuffle"><a href='#shuffle'>Shuffle</a></li>
|
||||
</ul>
|
||||
|
||||
</section> <!-- #options -->
|
||||
|
||||
|
||||
<div id="container" class="clickable clearfix">
|
||||
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Hg" data-category="transition">
|
||||
<p class="number">80</p>
|
||||
<h3 class="symbol">Hg</h3>
|
||||
<h2 class="name">Mercury</h2>
|
||||
<p class="weight">200.59</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element metalloid " data-symbol="Te" data-category="metalloid">
|
||||
<p class="number">52</p>
|
||||
<h3 class="symbol">Te</h3>
|
||||
<h2 class="name">Tellurium</h2>
|
||||
<p class="weight">127.6</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element post-transition metal " data-symbol="Bi" data-category="post-transition">
|
||||
<p class="number">83</p>
|
||||
<h3 class="symbol">Bi</h3>
|
||||
<h2 class="name">Bismuth</h2>
|
||||
<p class="weight">208.9804</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Cd" data-category="transition">
|
||||
<p class="number">48</p>
|
||||
<h3 class="symbol">Cd</h3>
|
||||
<h2 class="name">Cadmium</h2>
|
||||
<p class="weight">112.411</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element alkaline-earth metal " data-symbol="Ca" data-category="alkaline-earth">
|
||||
<p class="number">20</p>
|
||||
<h3 class="symbol">Ca</h3>
|
||||
<h2 class="name">Calcium</h2>
|
||||
<p class="weight">40.078</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Re" data-category="transition">
|
||||
<p class="number">75</p>
|
||||
<h3 class="symbol">Re</h3>
|
||||
<h2 class="name">Rhenium</h2>
|
||||
<p class="weight">186.207</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element post-transition metal " data-symbol="Tl" data-category="post-transition">
|
||||
<p class="number">81</p>
|
||||
<h3 class="symbol">Tl</h3>
|
||||
<h2 class="name">Thallium</h2>
|
||||
<p class="weight">204.3833</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element metalloid " data-symbol="Sb" data-category="metalloid">
|
||||
<p class="number">51</p>
|
||||
<h3 class="symbol">Sb</h3>
|
||||
<h2 class="name">Antimony</h2>
|
||||
<p class="weight">121.76</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element transition metal " data-symbol="Co" data-category="transition">
|
||||
<p class="number">27</p>
|
||||
<h3 class="symbol">Co</h3>
|
||||
<h2 class="name">Cobalt</h2>
|
||||
<p class="weight">58.933195</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element lanthanoid metal inner-transition " data-symbol="Lu" data-category="lanthanoid">
|
||||
<p class="number">71</p>
|
||||
<h3 class="symbol">Lu</h3>
|
||||
<h2 class="name">Lutetium</h2>
|
||||
<p class="weight">174.9668</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element noble-gas nonmetal " data-symbol="Ar" data-category="noble-gas">
|
||||
<p class="number">18</p>
|
||||
<h3 class="symbol">Ar</h3>
|
||||
<h2 class="name">Argon</h2>
|
||||
<p class="weight">39.948</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element alkali metal " data-symbol="Rb" data-category="alkali">
|
||||
<p class="number">37</p>
|
||||
<h3 class="symbol">Rb</h3>
|
||||
<h2 class="name">Rubidium</h2>
|
||||
<p class="weight">85.4678</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element other nonmetal " data-symbol="N" data-category="other">
|
||||
<p class="number">7</p>
|
||||
<h3 class="symbol">N</h3>
|
||||
<h2 class="name">Nitrogen</h2>
|
||||
<p class="weight">14.0067</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element actinoid metal inner-transition " data-symbol="Np" data-category="actinoid">
|
||||
<p class="number">93</p>
|
||||
<h3 class="symbol">Np</h3>
|
||||
<h2 class="name">Neptunium</h2>
|
||||
<p class="weight">(237)</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="element actinoid metal inner-transition " data-symbol="Ac" data-category="actinoid">
|
||||
<p class="number">89</p>
|
||||
<h3 class="symbol">Ac</h3>
|
||||
<h2 class="name">Actinium</h2>
|
||||
<p class="weight">(227)</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<script src="../js/jquery-1.6.4.min.js"></script>
|
||||
<script src="../jquery.isotope.min.js"></script>
|
||||
<script src="../js/fake-element.js"></script>
|
||||
<script>
|
||||
$.Isotope.prototype._positionAbs = function( x, y ) {
|
||||
return { right: x, top: y };
|
||||
};
|
||||
|
||||
$(function(){
|
||||
|
||||
var $container = $('#container');
|
||||
|
||||
|
||||
// add randomish size classes
|
||||
$container.find('.element').each(function(){
|
||||
var $this = $(this),
|
||||
number = parseInt( $this.find('.number').text(), 10 );
|
||||
if ( number % 7 % 2 === 1 ) {
|
||||
$this.addClass('width2');
|
||||
}
|
||||
if ( number % 3 === 0 ) {
|
||||
$this.addClass('height2');
|
||||
}
|
||||
});
|
||||
|
||||
$container.isotope({
|
||||
itemSelector : '.element',
|
||||
transformsEnabled: false,
|
||||
masonry : {
|
||||
columnWidth : 120
|
||||
},
|
||||
masonryHorizontal : {
|
||||
rowHeight: 120
|
||||
},
|
||||
cellsByRow : {
|
||||
columnWidth : 240,
|
||||
rowHeight : 240
|
||||
},
|
||||
cellsByColumn : {
|
||||
columnWidth : 240,
|
||||
rowHeight : 240
|
||||
},
|
||||
getSortData : {
|
||||
symbol : function( $elem ) {
|
||||
return $elem.attr('data-symbol');
|
||||
},
|
||||
category : function( $elem ) {
|
||||
return $elem.attr('data-category');
|
||||
},
|
||||
number : function( $elem ) {
|
||||
return parseInt( $elem.find('.number').text(), 10 );
|
||||
},
|
||||
weight : function( $elem ) {
|
||||
return parseFloat( $elem.find('.weight').text().replace( /[\(\)]/g, '') );
|
||||
},
|
||||
name : function ( $elem ) {
|
||||
return $elem.find('.name').text();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var $optionSets = $('#options .option-set'),
|
||||
$optionLinks = $optionSets.find('a');
|
||||
|
||||
$optionLinks.click(function(){
|
||||
var $this = $(this);
|
||||
// don't proceed if already selected
|
||||
if ( $this.hasClass('selected') ) {
|
||||
return false;
|
||||
}
|
||||
var $optionSet = $this.parents('.option-set');
|
||||
$optionSet.find('.selected').removeClass('selected');
|
||||
$this.addClass('selected');
|
||||
|
||||
// make option object dynamically, i.e. { filter: '.my-filter-class' }
|
||||
var options = {},
|
||||
key = $optionSet.attr('data-option-key'),
|
||||
value = $this.attr('data-option-value');
|
||||
// parse 'false' as false boolean
|
||||
value = value === 'false' ? false : value;
|
||||
options[ key ] = value;
|
||||
|
||||
if ( key === 'layoutMode' && changeLayoutMode ) {
|
||||
// changes in layout modes need extra logic
|
||||
changeLayoutMode( $this, options )
|
||||
} else {
|
||||
// otherwise, apply new options
|
||||
$container.isotope( options );
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
// change layout
|
||||
var isHorizontal = false;
|
||||
function changeLayoutMode( $link, options ) {
|
||||
var wasHorizontal = isHorizontal;
|
||||
isHorizontal = $link.hasClass('horizontal');
|
||||
|
||||
if ( wasHorizontal !== isHorizontal ) {
|
||||
// orientation change
|
||||
// need to do some clean up for transitions and sizes
|
||||
var style = isHorizontal ?
|
||||
{ height: '80%', width: $container.width() } :
|
||||
{ width: 'auto' };
|
||||
// stop any animation on container height / width
|
||||
$container.filter(':animated').stop();
|
||||
// disable transition, apply revised style
|
||||
$container.addClass('no-transition').css( style );
|
||||
setTimeout(function(){
|
||||
$container.removeClass('no-transition').isotope( options );
|
||||
}, 100 )
|
||||
} else {
|
||||
$container.isotope( options );
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// change size of clicked element
|
||||
$container.delegate( '.element', 'click', function(){
|
||||
$(this).toggleClass('large');
|
||||
$container.isotope('reLayout');
|
||||
});
|
||||
|
||||
// toggle variable sizes of all elements
|
||||
$('#toggle-sizes').find('a').click(function(){
|
||||
$container
|
||||
.toggleClass('variable-sizes')
|
||||
.isotope('reLayout');
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
|
||||
$('#insert a').click(function(){
|
||||
var $newEls = $( fakeElement.getGroup() );
|
||||
$container.isotope( 'insert', $newEls );
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
$('#append a').click(function(){
|
||||
var $newEls = $( fakeElement.getGroup() );
|
||||
$container.append( $newEls ).isotope( 'appended', $newEls );
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
var $sortBy = $('#sort-by');
|
||||
$('#shuffle a').click(function(){
|
||||
$container.isotope('shuffle');
|
||||
$sortBy.find('.selected').removeClass('selected');
|
||||
$sortBy.find('[data-option-value="random"]').addClass('selected');
|
||||
return false;
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<footer>
|
||||
Isotope by <a href="http://desandro.com">David DeSandro</a> / <a href="http://metafizzy.co">Metafizzy</a>
|
||||
</footer>
|
||||
|
||||
</section> <!-- #content -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
270
sites/all/libraries/isotope-site/tests/tiny-text.html
Normal file
270
sites/all/libraries/isotope-site/tests/tiny-text.html
Normal file
@@ -0,0 +1,270 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<title>Tiny text · Isotope </title>
|
||||
|
||||
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
|
||||
<!-- scripts at bottom of page -->
|
||||
|
||||
</head>
|
||||
<body class="tests ">
|
||||
|
||||
<nav id="site-nav">
|
||||
<h1><a href="../index.html">Isotope</a></h1>
|
||||
|
||||
<h2>Docs</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../docs/introduction.html">Introduction</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/options.html">Options</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/methods.html">Methods</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/animating.html">Animating</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/extending-isotope.html">Extending Isotope</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/hash-history-jquery-bbq.html">Hash history with jQuery BBQ</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/help.html">Help</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/license.html">License</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Demos</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../demos/basic.html">Basic</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-complete.html">Elements Complete</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-partial.html">Elements Partial</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/relayout.html">reLayout</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/infinite-scroll.html">Infinite Scroll</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/images.html">Images</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/combination-filters.html">Combination filters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/hash-history.html">Hash history</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/fluid-responsive.html">Fluid / responsive</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Custom layout modes</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/centered-masonry.html">Centered Masonry</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/category-rows.html">Category rows</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-corner-stamp.html">Masonry corner stamp</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-gutters.html">Masonry gutters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/spine-align.html">Spine align</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2><a href="../tests/index.html">Tests</a></h2>
|
||||
|
||||
</nav> <!-- #site-nav -->
|
||||
|
||||
<section id="content">
|
||||
|
||||
<h1>Tiny text</h1>
|
||||
|
||||
|
||||
<style>
|
||||
.text-box {
|
||||
width: 200px;
|
||||
margin: 10px;
|
||||
color: #000;
|
||||
float: left;
|
||||
font-size: 11px;
|
||||
line-height: 1.3em;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.blue { background: #88F; }
|
||||
.red { background: #F88; }
|
||||
</style>
|
||||
|
||||
<section id="copy">
|
||||
<p>Test to see how IE7 deals with type rendering</p>
|
||||
</section>
|
||||
|
||||
<section id="options" class="clearfix">
|
||||
|
||||
<h3>Filters</h3>
|
||||
|
||||
<ul id="filters" class="option-set clearfix" data-option-key="filter">
|
||||
<li><a href="#show-all" data-option-value="*" class="selected">show all</a></li>
|
||||
<li><a href="#red" data-option-value=".red">red</a></li>
|
||||
<li><a href="#blue" data-option-value=".blue">blue</a></li>
|
||||
</ul>
|
||||
|
||||
</section> <!-- #options -->
|
||||
|
||||
<div id="container" class="clearfix">
|
||||
<div class="red text-box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
|
||||
<div class="blue text-box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
|
||||
<div class="red text-box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
|
||||
<div class="blue text-box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
|
||||
<div class="red text-box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
|
||||
<div class="blue text-box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
|
||||
<div class="red text-box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
|
||||
<div class="blue text-box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
|
||||
<div class="red text-box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
|
||||
<div class="blue text-box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
|
||||
<div class="red text-box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
|
||||
<div class="blue text-box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
|
||||
<div class="red text-box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
|
||||
<div class="blue text-box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="../js/jquery-1.6.4.min.js"></script>
|
||||
<script src="../jquery.isotope.min.js"></script>
|
||||
<script>
|
||||
$(function(){
|
||||
|
||||
var $container = $('#container');
|
||||
|
||||
$container.isotope({
|
||||
});
|
||||
|
||||
|
||||
var $optionSets = $('#options .option-set'),
|
||||
$optionLinks = $optionSets.find('a');
|
||||
|
||||
$optionLinks.click(function(){
|
||||
var $this = $(this);
|
||||
// don't proceed if already selected
|
||||
if ( $this.hasClass('selected') ) {
|
||||
return false;
|
||||
}
|
||||
var $optionSet = $this.parents('.option-set');
|
||||
$optionSet.find('.selected').removeClass('selected');
|
||||
$this.addClass('selected');
|
||||
|
||||
// make option object dynamically, i.e. { filter: '.my-filter-class' }
|
||||
var options = {},
|
||||
key = $optionSet.attr('data-option-key'),
|
||||
value = $this.attr('data-option-value');
|
||||
// parse 'false' as false boolean
|
||||
value = value === 'false' ? false : value;
|
||||
options[ key ] = value;
|
||||
if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
|
||||
// changes in layout modes need extra logic
|
||||
changeLayoutMode( $this, options )
|
||||
} else {
|
||||
// otherwise, apply new options
|
||||
$container.isotope( options );
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<footer>
|
||||
Isotope by <a href="http://desandro.com">David DeSandro</a> / <a href="http://metafizzy.co">Metafizzy</a>
|
||||
</footer>
|
||||
|
||||
</section> <!-- #content -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
287
sites/all/libraries/isotope-site/tests/unclickable-filtered.html
Normal file
287
sites/all/libraries/isotope-site/tests/unclickable-filtered.html
Normal file
@@ -0,0 +1,287 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<title>Unclickable filtered · Isotope </title>
|
||||
|
||||
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
|
||||
<!-- scripts at bottom of page -->
|
||||
|
||||
</head>
|
||||
<body class="tests demos">
|
||||
|
||||
<nav id="site-nav">
|
||||
<h1><a href="../index.html">Isotope</a></h1>
|
||||
|
||||
<h2>Docs</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../docs/introduction.html">Introduction</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/options.html">Options</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/methods.html">Methods</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/animating.html">Animating</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/extending-isotope.html">Extending Isotope</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/hash-history-jquery-bbq.html">Hash history with jQuery BBQ</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/help.html">Help</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../docs/license.html">License</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Demos</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../demos/basic.html">Basic</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-complete.html">Elements Complete</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/elements-partial.html">Elements Partial</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/layout-modes.html">Layout modes</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/filtering.html">Filtering</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/sorting.html">Sorting</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/relayout.html">reLayout</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/adding-items.html">Adding items</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/infinite-scroll.html">Infinite Scroll</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/images.html">Images</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/combination-filters.html">Combination filters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/hash-history.html">Hash history</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../demos/fluid-responsive.html">Fluid / responsive</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Custom layout modes</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/centered-masonry.html">Centered Masonry</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/category-rows.html">Category rows</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-corner-stamp.html">Masonry corner stamp</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/masonry-gutters.html">Masonry gutters</a>
|
||||
|
||||
|
||||
|
||||
<li><a href="../custom-layout-modes/spine-align.html">Spine align</a>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<h2><a href="../tests/index.html">Tests</a></h2>
|
||||
|
||||
</nav> <!-- #site-nav -->
|
||||
|
||||
<section id="content">
|
||||
|
||||
<h1>Unclickable filtered</h1>
|
||||
|
||||
|
||||
<style>
|
||||
#container {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
#clicked-display {
|
||||
display: inline-block;
|
||||
border: 1px dotted white;
|
||||
font-size: 1.1em;
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<section id="copy">
|
||||
<p>For Internet Explorer and Opera, you might need to dismiss event on filtered out items. You should not be able to click on the big red blocks when filtered-out</p>
|
||||
<p id="clicked-display">(Last item clicked)</p>
|
||||
</section>
|
||||
|
||||
<section id="options" class="clearfix">
|
||||
|
||||
<ul id="etc" class="clearfix">
|
||||
<li id="toggle-red"><a href="#toggle-red">Toggle big red blocks</a></li>
|
||||
<li id="shuffle"><a href='#shuffle'>Shuffle</a></li>
|
||||
</ul>
|
||||
|
||||
</section> <!-- #options -->
|
||||
|
||||
<div id="container" class="clearfix">
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape big red"><a href="#big-red-block"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape big red"><a href="#big-red-block"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape big red"><a href="#big-red-block"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
<div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="../js/jquery-1.6.4.min.js"></script>
|
||||
<script src="../jquery.isotope.min.js"></script>
|
||||
<script>
|
||||
$(function(){
|
||||
|
||||
var $container = $('#container'),
|
||||
isRedFiltered = true;
|
||||
|
||||
$container.isotope({
|
||||
itemSelector : '.color-shape',
|
||||
masonry: {
|
||||
columnWidth: 80
|
||||
},
|
||||
hiddenStyle: {
|
||||
opacity: 0.25
|
||||
}
|
||||
}).isotope({
|
||||
filter: '.blue'
|
||||
}).isotope('shuffle');
|
||||
|
||||
$('#toggle-red a').click(function(){
|
||||
isRedFiltered = !isRedFiltered;
|
||||
var selector = isRedFiltered ? '.blue' : '*';
|
||||
$container.isotope({ filter: selector });
|
||||
return false;
|
||||
});
|
||||
|
||||
$('#shuffle a').click(function(){
|
||||
$container.isotope('shuffle');
|
||||
return false;
|
||||
});
|
||||
|
||||
var $clickedDisplay = $('#clicked-display');
|
||||
|
||||
$('.color-shape a').click(function(){
|
||||
var $this = $(this);
|
||||
// back out if hidden item
|
||||
if ( $this.parents('.isotope-item').hasClass('isotope-hidden') ) {
|
||||
return;
|
||||
}
|
||||
$clickedDisplay.text( $(this).attr('href') );
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<footer>
|
||||
Isotope by <a href="http://desandro.com">David DeSandro</a> / <a href="http://metafizzy.co">Metafizzy</a>
|
||||
</footer>
|
||||
|
||||
</section> <!-- #content -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user