Infinite Isotope 01 (Base)

<!DOCTYPE html>
<html>
    <head>
		<title>Adamantine</title>


<script src="http://static.tumblr.com/iuvoef7/bXomx943d/jquery-1.7.1.min.js"></script>

<!--don't understand why this script doesn't work -->
  <script src="http://static.tumblr.com/iuvoef7/hshmx93xt/jquery.isotope.min.js"></script>

<!-- for some reason this one works -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script>


  <script src="http://static.tumblr.com/iuvoef7/tIEmx9449/jquery.infinitescroll.min.js"></script>


<script>
var isotope =  $(function(){
        var $container = $('#content');
        $container.imagesLoaded(function(){
            $container.isotope({
                itemSelector : '.box',
                layoutMode : 'vertical',
            });
        });

        $container.infinitescroll({
            navSelector  : '#page_nav',
            nextSelector : '#page_nav a',
            itemSelector : '.box',
            loading: {
                finishedMsg: 'No more pages to load.',
                img: 'http://i.imgur.com/qkKy8.gif'
                        }
                },
        // call Isotope as a callback
        function ( newElements ) {
            var $newElems = jQuery( newElements ).hide(); // hide to begin with
  // ensure that images load before adding to masonry layout
            $newElems.imagesLoaded(function(){
            $newElems.fadeIn(); // fade in when ready
            $container.isotope( 'insert', $newElems );
            });
        }
        );
});


$(document).ready(isotope);

</script>


<meta name="image:Background" content="" />
<meta name="image:Lollipop Background" content="" />
<meta name="image:Quote Background" content="" />
<meta name="image:HeaderBackground" content="" />
<meta name="color:Background" content="#369fa0" />
<meta name="color:Links" content="#619251" />
<meta name="color:Text highlight" content="#d83e5c" />
<meta name="color:Lollipop" content="#000000" />
<meta name="color:Lollipop Hover" content="#b7512e" />
<meta name="color:Hover" content="#b7512e" />

<meta name="text:Post Width" content="240px" />
<meta name="text:Post margin" content="10px" />
<meta name="text:Columns" content="4" />


<meta name="text:Font size" content='0.8em'/>
<meta name="text:Google Analytics ID" content=''/>
<meta name="text:Twitter Username" content=''/>

<meta name="if:Fade" content="1" />
<meta name="if:Infinite Scroll" content="1" />


    <meta name="viewport" content="width=device-width, maximum-scale=1, minimum-scale=1" />


        <link rel="shortcut icon" href="{Favicon}">
                <link rel="alternate" type="application/rss+xml" href="{RSS}">
                <link href="http://static.tumblr.com/wgijwsy/k1Hm9ei8b/normalize.css" rel="stylesheet" type="text/css" />


    <style type="text/css">


      @font-face {font-family:"Mayo";src:url('http://static.tumblr.com/m9qxvhq/dD6mhcpd0/mayonaise-condensed.otf');}
      @font-face {font-family:"Blake";src:url('http://static.tumblr.com/m9qxvhq/bnRmhedq1/blake2.ttf');}
      @font-face {font-family:"Sugah";src:url('http://static.tumblr.com/m9qxvhq/Dghmhi6ct/frenchsugar.ttf');}
      @font-face {font-family:"Sachiko";src:url('http://static.tumblr.com/m9qxvhq/UTEmhi6ks/sachiko.ttf');}
      @font-face {font-family:"Buffet";src:url('http://static.tumblr.com/m9qxvhq/0V2mhl3je/buffet_script.ttf');}
      @font-face {font-family:"Accent";src:url('http://static.tumblr.com/m9qxvhq/mc9mhlhm3/accent.ttf');}
      @font-face {font-family:"Barkentina";src:url('http://static.tumblr.com/m9qxvhq/CH5mhn23p/barkentina_1.otf');}


 ::-webkit-scrollbar {width: 8px; height: 4px; background: #000; opacity:0.5;}
::-webkit-scrollbar-thumb { background-color: #aaaaaa; -webkit-border-radius: 2ex; opacity:0.5; }
::-moz-scrollbar {width: 8px; height: 4px; background: #ffffff; }
::-moz-scrollbar-thumb { background-color: #aaaaaa; -moz-border-radius: 2ex; opacity:0.4; }
::-o-scrollbar {width: 8px; height: 4px; background: #ffffff; }
::-o-scrollbar-thumb { background-color: #aaaaaa; -o-border-radius: 2ex; opacity:0.4; }


::selection {background: #d83e5c;color: #fff;}
::-moz-selection {background: #d83e5c;color: #fff;}


 html {

}


body {
background: #ffffff;

}

#content {
width:100%;

}


.title {
font-family:"Buffet";
font-size: 25px;
margin-bottom: 10px;
}

.entry {
float: left;
width:50%;
}


#nav {
float: left;
margin-top: 20px;
position: fixed;
z-index:1000;
right:0px;
margin-right:auto;
position:fixed;
}

#nav a {
text-decoration: none;
font-size: 15px;
line-height: 25px;
color: #595959;
}

#nav a:hover {
color: #393939;
}

#nav a:active {
color: #151515;
}


.tumblrAutoPager_page_info, .tumblrAutoPager_page_separator {display:none;}
#infscr-loading {display:none;}
.navigation {display:none!important;}


.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

.isotope,
.isotope .isotope-item {
  /* change duration value to whatever you like */
  -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;
}


.box {
float: left;
}

.photo {
    width:500px;
}


    </style>


	</head>


	<body>


<div id="content">
{block:Posts}

{block:Photo}

<a href="{Permalink}">
<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" class="box photo" />
</a>


{/block:Photo}


{/block:Posts}
</div>


        <div class="navigation">
{block:Pagination}
{block:NextPage}<p id="page_nav"><a style="float:right" href="{NextPage}" id="next">Older ?</a>{/block:NextPage}
{block:PreviousPage}<a style="float:left" href="{PreviousPage}">? Newer</a></p>{/block:PreviousPage}
{/block:Pagination}
</div>


	</body>
</html>