Is it possible to create a 'view all' page in Tumblr?

I've tried creating pages using the 'standard layout' and 'custom layout' but neither allows the use of the {block:Posts} variable(s). I need to re-create essentially the archive page but with some custom css. Is there any way to accomplish this?

If I try $("#someDiv").load("/archive", "#content"); the whole page formatting gets screwed up. Is there a way to load just the <a> tags into a div on my custom page?

Or would it be possible to use the API entirely client side to accomplish this?

Any ideas on this would be appreciated.

Solution

I came up with two possible solutions if anyone else finds themselves stuck on this. I abandoned this first one before finalizing it, so it's a bit rough but a good start. It uses the API to load photos (that was all I needed) as you scroll down the page.

<script>
  function getPhotos(offset){
    $.ajax({
      url: "http://api.tumblr.com/v2/blog/[tumblr].tumblr.com/posts?api_key=[key]&offset="+offset,
      dataType: 'jsonp',
      success: function(results){
        loaded += 20;
        total = results.response.blog.posts;
        if(total > loaded){
          results.response.posts.forEach(function(post){
            post.photos.forEach(function(photo){
                $("#photos ul").append("<li class='"+post.tags.join(" ")+"'><img src='"+photo.alt_sizes[0].url+"'></li>");
                $("#photos").imagesLoaded(function(){
                    $("#photos").masonry({
                        itemSelector: 'li'
                    });
                });
            });
          });
          if($("#photos ul").height() < $(window).height()){
            getPhotos(loaded);
          } 
        }
      }
    });
  }

  loaded = 0;

  getPhotos(loaded);

  $(window).scroll(function() {
     if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
         getPhotos(loaded);
     }
  });
</script>

What I've ended up doing is just using an iframe with a custom stylesheet appended to the head.

html:

<head>
  <script src="http://[remote location]/frame.js"></script> 
</head>
<body>
  <div id="photos">
    <iframe name="frame1" id="frame1" src="http://[tumblr]/archive" frameBorder="0"></iframe>
  </div>
</body>

frame.js:

$(function(){
  function insertCSS(){
    var frm = frames['frame1'].document;
    var otherhead = frm.getElementsByTagName("head")[0];
    if(otherhead.length != 0){
        var link = frm.createElement("link");
      link.setAttribute("rel", "stylesheet");
      link.setAttribute("type", "text/css");
      link.setAttribute("href", "http://[remote location]/frame.css");
      otherhead.appendChild(link);
      setTimeout(function(){$("#frame1").show();}, 200);
      clearInterval(cssInsertion);
    }
  }

  cssInsertion = setInterval(insertCSS, 500);
  //setTimeout(insertCSS, 1000);

  $(window).scroll(function() {
     if($(window).scrollTop() + $(window).height() > $(document).height() - 100 && $("#frame1").height() < 50000) {
         $("#frame1").css("height", "+=1000px");
     }
  });
});

frame.css (stylesheet appended into iframe)

body{
    overflow: hidden;
}
#nav_archive{
    display: none;
}
.heading{
    display: block !important;
}
.old_archive #content{
    margin: 0 auto 0;
}

style.css (stylesheet on page where iframe is located)

#frame1{
    border: none;
    width: 100%;
    height: 3000px;
    overflow: hidden;
    display: none;
}