<html>
<head>
<title>Autoload</title>
<!-- Bootstrap -->
<link href="style.css" rel="stylesheet" media="screen">
</head>
<body>
<div id="container" class="photos">
</div> <!-- #container -->
<div id="bot"> </div>
<nav id="page_nav">
<a href="pages/2.html"></a>
</nav>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
</body>
</html>
#container {
margin: 0 auto;
padding: 0;
}
.photo {
width: 25%;
}
/**** Isotope Filtering ****/
.isotope-item {
z-index: 2;
}
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}
/**** Isotope CSS3 transitions ****/
.isotope,
.isotope .isotope-item {
transition-duration: 0s;
transition-duration: 0s;
transition-duration: 0s;
transition-duration: 0s;
transition-duration: 0s;
}
.isotope {
transition-property: height, width;
transition-property: height, width;
transition-property: height, width;
transition-property: height, width;
transition-property: height, width;
}
.isotope .isotope-item {
transition-property: transform, opacity;
transition-property: transform, opacity;
transition-property: transform, opacity;
transition-property: transform, opacity;
transition-property: transform, opacity;
}
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
transition-duration: 0s;
transition-duration: 0s;
transition-duration: 0s;
transition-duration: 0s;
transition-duration: 0s;
}
/* End: Recommended Isotope styles */
var offset = 0;
var $container = $('#container');
var $firstRun = true;
function load() {
var tumblr = $.getJSON("http://polerstuff.tumblr.com/api/read/json?num=10&type=photo&start="+offset+"&callback=?",
function(data) {
$.each(data.posts, function(i,item){
if($firstRun){
$container.append('<img class="photo" src="'+this['photo-url-400']+'" />');
} else {
var $newItems = $('<img class="photo" src="'+this['photo-url-400']+'" />');
$container.append( $newItems ).isotope( 'appended', $newItems );
}
});
});
tumblr.complete(function(){
$container.isotope({
// options
layoutMode: 'masonry',
itemSelector : '.photo'
});
});
offset+=10;
$firstRun = false;
}
$(window).load(function(){
load();
$container.isotope({
// options
layoutMode: 'masonry',
itemSelector : '.photo'
});
$(window).scroll(function () {
var top = $(window).scrollTop();
var bottom = $("#bot").height() + $("#bot").offset().top;
var winHeight = window.innerHeight ? window.innerHeight : $(window).height();
var winBot = top + winHeight;
if (bottom < winBot ) load().delay(800);
});
});
Output
You can jump to the latest bin by adding /latest
to your URL
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |