The World’s Simplest Tumblr Slideshow

So I was browsing a tumblr and wondered why it didn’t have a slideshow mode. Seems like an obvious feature to have. When I scroll, the top of the next post is rarely aligned to the top of my screen, so what I really want is a sort of “next button” or slideshow that jumps to the next post down, and aligns it to the top of the screen.

So, I decided to code it myself in the most minimal way I could, and 10 minutes later it was done.

How to use it:

1. Go to Tumblr
2. Open your Javascript console in Google Chrome with CTRL-SHIFT-J
3. Paste the following:


var jq=document.createElement('script'); jq.src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"; document.getElementsByTagName('head')[0].appendChild(jq);jQuery.noConflict();

That loads jQuery so that we can use it to write less code.

4. Paste the following:


var aSlideShow;$(document).ready(function(){var aSlideShow = setInterval(function(){var scrollPosition=$(document).scrollTop(),nextPost=0,currentPosition = 0;$(".post_avatar").each(function() {currentPosition=$(this).offset().top;if (currentPosition>scrollPosition){nextPost=currentPosition;return false;}});$(document).scrollTop(nextPost);},1500);});$(document).bind( "click", function() {clearInterval(aSlideShow)});

That starts the slideshow. The last line is supposed to help you stop it when you click the page, but it doesn’t work and I didn’t bother to figure out why. If you know why and feel like sharing, tell me! I think it has something to do with variable scope in the console, but who knows.

So, the slideshow will never stop or allow you to pause to look at anything. But you can always refresh! :)